关键词：
一、使用合适的选择器
$("#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对象。
比较好的书写方式如下：
1 var $yuki=$("#domo p");//缓存变量 2 $yuki.bind("click",function(){......}); 3 $yuki.css("color","green"); 4 $yuki.fadeIn(1000); 5 6 //上面的代码还可以改善一下，如下 7 8 var $yuki=$("#domo p"); 9 $yuki.bind("click",function(){ 10 //... 11 }).css("color","green").fadeIn(1000);
三、循环时的DOM操作
我们来看一段代码：
1 var yuki=[...];//假设这里是100个独一无二的字符串 2 var $mylist=$("#mylist");//jQuery选择到<ul>元素 3 for(var i=0;i<$mylist.length;i++){ 4 $mylist.append("<li>"+yuki[i]+"</li>"); 5 }
以上代码，我们将每一个新添加的标签元素作为一个节点添加到容器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获取到点击的当前元素。
代码如下：
1 $("#myTable").click(function(e){ 2 var $clicked=$(e.target);//e.target捕捉到触发的目标元素 3 $clicked.css("background","red"); 4 })
还有一种方式是使用on() ，代码如下：
$("#myTable").on("click","td",function(){
$(this).css("background","red");
})
前端性能优化方法与实战
【前端性能优化方法与实战】性能优化概览 查看详情
前端性能优化
...源按需加载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.从用户角度而言，优化能够让页... 查看详情
前端性能优化之请求优化(代码片段)
...长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方向有很多，今天主要讲解在网络请求上的优化。因涉及的优化方向较多，对于具体... 查看详情