前端性能优化:jquery性能优化
来源:互联网 发布:手机视频播放器 知乎 编辑:程序博客网 时间:2024/06/06 01:14
jQuery是前端最常用的一个js框架,其实有部分操作也是可以改进的。大部分情况下,封装的后性能是会降低的,如果发现很影响,就可以改为原生的。
另外使用jQuery需要注意一下几点来提高性能:
1不使用each,
jQuery 的each循环比原生的for循环性能相差几十倍。
前端性能优化:循环优化
2尽量使用ID,类型,类选择器,避免使用属性选择器
尽量使用ID,类,类型选择器,避免属性选择器。ID,类,类型都有原生的方法,属性选择器需要遍历整个DOM,还需要读取每个节点的属性进行判断,性能很低。
尽量不使用祖孙的选择器,使用父子关系更为明确的选择器,也就是使用更能缩小范围的选择器,避免大量的遍历。
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法:
- getElementById()返回带有指定 ID 的元素。getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。appendChild()把新的子节点添加到指定节点。removeChild()删除子节点。replaceChild()替换子节点。insertBefore()在指定的子节点前面插入新的子节点。
- getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
一些常用的 HTML DOM 属性:
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
使用方法:
node.getElementById("id");返回node下ID为id的元素,node可以为document,或者一般的页面元素
document.getElementsByTagName("p");返回document下所有的p标签
node.getElementsByTagName("p");
返回document下所有的p标签
document.getElementById("main").getElementsByTagName("p");返回id="main" 的元素的所有后代元素为p的元素, 返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等)
document.getElementById("main").childNodes ("p");
返回id="main" 的元素的所有子元素
3选择器添加第二个参数
其实jQuery选择器还有第二个参数,来进一步控制选择的范围,可以添加第二个参数,来缩小范围
4使用缓存
定义局部变量,缓存要使用多次的结果,一方面避免反复调用,反复在原型链上查找,另一方面局部变量可以加快访问速度。
$('#item').css ('color', '#123456');$('#item').html ('hello');$('#item').css ('background-color', '#ffffff');
改为
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff'); // 或者var item = $('#item');item.css ('color', '#123456');item.html ('hello');item.css ('background-color', '#ffffff');
5避免频繁的DOM操作
修改DOM就会导致浏览器重新建立DOM树和渲染,而这在web中是非常耗时的操作。
var item = $('#list'); for (var i=0; i<1000; i++) { item.append (i);}改为
var list = ''; for (var i=0; i<1000; i++) { list += '<li>'+i+'</li>';} ('#list').html (list);
或者
var list = []; for (var i=0; i<1000; i++) { list[i]= '<li>'+i+'</li>';} ('#list').html (list.join(""));
再或者
var list = []; for (var i=0; i<1000; i++) { list[i]= '<li>'+i+'</li>';} ('#list')[0].innerHTML =list.join("");
6对于很大String的连接搓澡不要使用concat,使用数组的join
10 Ways to Instantly Increase Your jQuery Performance
Faster DHTML in 12 Steps
2 0
- 前端性能优化:jquery性能优化
- 前端jquery搜索查询 优化网站性能
- 前端性能优化:循环优化
- 前端性能优化+CDN优化
- Web 前端性能优化
- 网站前端性能优化
- Web 前端性能优化
- 前端性能优化参考资料
- 前端性能优化
- WEB前端性能优化
- 前端性能优化
- 前端性能优化原则
- 前端性能优化
- 前端性能优化
- 前端性能优化指南
- 前端性能优化
- 网站前端性能优化
- 聊聊前端性能优化
- 231. Power of Two
- 卷积神经网络及其在图像处理中的应用
- MySQL 5.6 for Windows 解压缩版配置安装
- 2017 Indeed-tokyo笔试题-6*6的矩阵放置元素
- java多线程基础总结
- 前端性能优化:jquery性能优化
- 2-7parent > child选择器
- Tomcat7源码分析——启动过程和类加载器
- 插入排序
- 左右最值最大差
- Android中定时任务的实现
- Android的getLeft,getX,getTranslation,getRawX的理解
- 2-8prev + next选择器
- python 网络一分钟 get IP