前端性能优化：jquery性能优化

Posted 2020-08-03 xuexiaodong2009

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