前端性能优化jQuery性能优化
一、使用合适的选择器
$("#id");
1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById();如果这个 方式不能直接找到你需要的元素,那么你可以考虑调用find()方法,代码如下:
$("#domo").find("div");
使用以上代码可以有效的缩小你定位的DOM元素。
2.标签选择器的性能也是不错的,它是性能优化的第二选择。
二、缓存对象
在写代码时,我们一般喜欢这样写:
$("#domo p").bind("click",function(){.....});
$("#domo p").css("color","green");
$("#domo p").fadeIn(1000);
但是这样写的后果是:jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。
比较好的书写方式如下:
var $yuki=$("#domo p");//缓存变量
$yuki.bind("click",function(){......});
$yuki.css("color","green");
$yuki.fadeIn(1000); //上面的代码还可以改善一下,如下 var $yuki=$("#domo p");
$yuki.bind("click",function(){
//...
}).css("color","green").fadeIn(1000);
三、循环时的DOM操作
我们来看一段代码:
var yuki=[...];//假设这里是100个独一无二的字符串
var $mylist=$("#mylist");//jQuery选择到<ul>元素
for(var i=0;i<$mylist.length;i++){
$mylist.append("<li>"+yuki[i]+"</li>");
}
以上代码,我们将每一个新添加的标签元素作为一个节点添加到容器ID中,每一次循环,都会调用到$mylist
所以更好的方式是尽可能的减少DOM操作,代码如下:
var yuki=[...];
var $mylist=$("#mylist");
var result="";
for(var i=0;i<$mylist.length;i++){
result+="<li>"+yuki[i]+"</li>";
}
//我们将整个元素字符串在插入DOM元素(ul)之前全部创建好,这样大大的减少了DOM操作
$mylist.html(result);
四、事件代理
每一个JavaScript事件都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时这点会很有用。比如,我们要为一个表格绑定这样的行为:点击td后,把背景色设置为红色,代码如下:
$("#myTable td").click(function(){
$(this).css("background","red");
})
假设有100个td元素,在使用以上方式的时候,你绑定了100个事件,这将带来很负面的性能影响,有没有什么更好的方式呢?
代替这种效率很差的元素事件监听的方法就是:你只需向它们的父节点绑定一次事件,然后通过event.target获取到点击的当前元素。
代码如下:
$("#myTable").click(function(e){
var $clicked=$(e.target);//e.target捕捉到触发的目标元素
$clicked.css("background","red");
})
还有一种方式是使用on() ,代码如下:
$("#myTable").on("click","td",function(){
$(this).css("background","red");
})
前端性能优化jQuery性能优化的更多相关文章
- jQuery性能优化
1. 优化选择器执行的速度 优先使用ID与标记选择器 在jQuery中,访问DOM元素的最快方式是通过元素ID号,其次是通过元素的标记.因为前者源于JavaScript中的document.getEl ...
- jQuery性能优化篇
jQuery高级技巧——性能优化篇 阅读目录 通过CDN(Content Delivery Network)引入jQuery库 减少DOM操作 适当使用原生JS 选择器优化 缓存jQuery对象 定义 ...
- Web前端性能优化之图片优化
我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
- jQuery:jQuery性能优化28条建议
http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
- jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧 博客地址:http://www.extlight.com 一.使用最新版本 jQuery 类库 二.合理使用选择器 # 推荐使用 $("#id" ...
随机推荐
- CryptoTools加密与解密
CryptoTools加密与解密 java常用的加密算法有MD5(Message Digest algorithm 5,信息摘要算法) BASE64(严格地说,属于编码格式,而非加密算法) SHA(S ...
- 【SQL】- 基础知识梳理(四) - 存储过程
存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行 存储过程的好处 A. 存储过程允许标准组件式编程 ...
- Eclipse dynamic web project 插件
下载了Eclipse Oxygen 发现没有Dynamic web Project 首先我们先了解下Dynamic Web Project If you want to create a c ...
- GUI PasswordField
GUI.PasswordField public static function PasswordField(position: Rect, password: string, maskChar: c ...
- 简洁灵活的前端框架------BootStrap
前 言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...
- 翻译 | 使用A-Frame打造WebVR版《我的世界》
原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是 Kevin Ngo,一名就职于 Moz ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- pytorch实现DCGAN、pix2pix、DiscoGAN、CycleGAN、BEGAN以及VAE
https://github.com/sunshineatnoon/Paper-Implementations
- TOP命令详解(负载情况)
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...