正文 

当前位置： 首页 > java > java教程

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

xuexiaodong2009 xuexiaodong2009     2022-07-31     763

关键词：

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

前端性能优化方法与实战

【前端性能优化方法与实战】性能优化概览 查看详情

前端性能优化

...源按需加载6)不同网络类型的优化7)优化实战案例如今的前端开发已经从严重依赖后端演变成了node做中间层，MVVM框架进行服务端渲染做view层。性能优化也变得异常重要，主要对以下几个方面做了几个总结：1.performance面板如何查... 查看详情

前端性能优化：桌面浏览器前端优化策略(代码片段)

摘要:前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，... 查看详情

前端工程与性能优化

前端工程与性能优化来源:fexbaidu  发布时间:2014-07-2207:55  阅读:8131次  推荐:30  原文链接  [收藏]  　　每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问... 查看详情

前端project与性能优化（长文）

...og/2014/03/fis-optimize/　　每一个參与过开发企业级web应用的前端project师也许都曾思考过前端性能优化方面的问题。我们有雅虎14条性能优化原则。还有两本非常经典的性能优化指导书：《高性能站点建设指南》、《高性能站点建设... 查看详情

前端项目性能优化记录~(代码片段)

前端性能优化总结原因：最近公司一个项目即将上线,作为它的主要构建者之一(亲爸爸)一直在思考如何能给它更好的性能优化于是博主开始了网上大量的学习,集百家之所长,试图把这些骚操作应用在自己的项目中,完事之后记... 查看详情

7000字前端性能优化总结|干货建议收藏(代码片段)

...对于用户的留存率、转化率有很大的影响，所以对于前端开发来说性能优化能力也是重要的考察点。性能优化的点非常的多，有的小伙伴觉得记起来非常的麻烦，所以这里主要梳理出一条线来帮助记忆。可以将性能优... 查看详情

前端性能优化：jquery的each为什么比原生的for循环慢很多？

其实查看jQuery的源代码，发现each的代码很简单，但为什么性能和原生的for循环相差几十倍呢？jQuery的each的核心代码for(;i<length;i++){value=callback.call(obj[i],i,obj[i]);if(value===false){break;}}看着很简单，但为什么会慢很多呢？编写测试代... 查看详情

前端性能优化

一、前端优化是什么，目的何在？　　 网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且... 查看详情

性能测试前端性能优化方法

...一个开发者或者性能测试工程师，如何去测试并提升优化前端的性能呢？ 一、浏览器打开URL和方式和过程不同浏览器工作方式不完全一样，大体来讲，浏览器的核心是浏览器引擎；不同浏览器对W3C的规范支持不尽相同，在具... 查看详情

前端性能高性能滚动scroll及页面渲染优化--转发

本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读... 查看详情

性能优化:资源合并与压缩--文件合并(css与javascript文件合并提升前端性能)(代码片段)

本文主要介绍了“前端性能优化”CSS与JS静态文件在开发中“文件合并”的实际操作方式。废话不多说,直接上代码以及图例(为了让大家方便阅读,都有自己验证过程的一些图片作为分享)。性能优化---上篇文章:性能优化:资源合并... 查看详情

前端性能优化之优化图片

　　前端图片优化一直以来都是热门话题，从需求上来看，很多站点往往是图片体积大于代码体积，图片请求多余代码文件请求，给前端的性能带来了很大的困扰，那么应该如何解决呢？  零、认识图片　　我们通常使用... 查看详情

前端性能优化插件---pagespeedinsights

对于前端工程师来说，前端性能优化始终都是非常重要的一环，它决定了用户体验，决定了一个用户是否愿意在页面的加载浪费时间，从而丢失用户。所以前端性能优化是非常重要的。     下载地址https://chrome.... 查看详情

前端性能优化（转）

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么?　　1.从用户角度而言，优化能够让页面加载得更快、对用户的操... 查看详情

移动h5前端性能优化

移动H5前端优化，从以下几个方面入手：1、加载优化2、图片优化3、css优化4、脚本优化5、渲染优化加载优化1、合并CSS、JS2、合并小图片，使用雪碧图3、缓存一切可缓存的资源4、使用长Cache5、使用外联式引用CSS、JS6、压缩HTML、C... 查看详情

前端性能优化

很好地一篇文章，转过来。前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么?　　1.从用户角度而言，优化能够让页... 查看详情

前端性能优化之请求优化(代码片段)

...长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方向有很多，今天主要讲解在网络请求上的优化。因涉及的优化方向较多，对于具体... 查看详情