1.选择器的使用
(1)$('#id')
  使用id来定位dom元素是性能最高的方法。jQuery底层将直接调用本地方法document.getElementById()。如果id直接可以找到所要对象,一定不要加任何修饰。如果这个方式不能直接找到需要的元素,那么可以考虑调用.find()方法。如下:
 $('#id').find('tag');
 
(2)$('p'),$('input'),$('div') ...
  使用标签名是第二优化选择,因为jQuery将直接调用本地方法document.getElementsByTagName_r()来定位DOM元素。但是,容易增加代码耦合性,需谨慎。
 
(3)$('.class')
  对于比较新的浏览器例如,IE9,它支持本地方法document.getElementsByClassName(),而对于老的浏览器,例如,IE8或者更早版本来说,不得不使用DOM搜索方式来实现,自然会对于性能产生比较大的影响。所以大家得选择使用。
  如果要用class,最好在其前面加上tag,并且不要忘了就近的id,如下:
  $('#id tag.class');
 
(4)$('[attribute=value]')
  对于利用属性来定位DOM元素,本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果,很多现代浏览器支持querySelectorAll()方法,但是不同浏览器的性能还是有区别。总体来说,使用这种方式来定位DOM元素,并不是非常理想。所以为了获得更好的优化效果,你需要尽量避免这个对性能有害的使用方式。
 
(5)$(':hidden')
  和上面使用属性来定位DOM的方式类似,这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器,将会对你的应用带来比较大的性能问题。所以大家尽量不要使用,当然,如果你非要使用的话,请先是用find方法定位父元素,然后,再使用这个选择器,这样会帮助你很好的优化性能,如下:
  $("#id").find(":hidden")
 
2.使用最新版本的jquery。
 新的版本在性能上肯定会进行一些优化,不可能越改越差。需要注意的是如将旧版本移植新版本,一些用法需要修改,花费这样的时间是否值得。
 
3.使用链式调用,重复的dom对象要进行缓存
    链式调用是jquery的一个特性,看自己代码情况使用,如在不同地方多次使用同一dom对象,要缓存。如下:
    var $dom = $('dom') ;
 
4.事件代理
  //不好的方法 
  $('#id').find('img').click(function(){
    $(this).toggleClass('class');
  });
  如果#id中有1000个img,就要绑定1000次
 
  //优化方法
  $('#id').on('click','img',function(){
    $(this).toggleClass('class');
  });
 
5.循环语句中dom操作
例如append,先把要插入的内容整体拼好字符串,最后再整体append,不要在每个循环中都append。
字符串拼接中,用数组和join()方法代替字符串相加。
 
6.$(function(){})代替$(document).ready(function(){})
7.$.data(elem,key,value)代替$(elem).data(key,value)
8.从父元素中选择子元素,用.find方法速度最快。

jquery前端性能优化(持续添加。。。)的更多相关文章

  1. Web前端性能优化教程03:添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  2. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

  3. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

  4. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. 前端性能优化(三)——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  7. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  8. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...

  9. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

随机推荐

  1. BAT-使用BAT方法判断网络启动EXE(快捷方式)

      原理思路:先启动iNode,如果访问www.baidu.com成功,证明网通了,这时就启动GXT和邮件等.PS:因为对BAT不清楚,所以自己写的东东可能有问题,希望大家有了解BAT的,看一下是否正 ...

  2. 什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  3. nyoj 119 士兵杀敌(三)【线段树区间最大值最小值差】

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...

  4. HttpWebRequest抓数据遇到的问题

    1.有些网站访问速度慢,而且这个网站的连接数(比如全球内衣,另外对于女生各种什么内衣不懂的也可以上去查看了解哈),因为没有即时的关闭,造成抓取页面数据的时候超时也严重. 解决:把相应的HttpWebR ...

  5. DevExpress 用户控件 分页(下)

    分页控件调用 (1)初始化时: this.pageCtrl1.pageSize = 4; (2)数据绑定时: 从数据库中获取实时的 Public void LoadData(){ //这是只写有关分页 ...

  6. Stackdump: 一个可以离线看stackoverflow的工具

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Stackdump: 一个可以离线看stackoverflow的工具.

  7. NPOI组件集锦

    关于NPOI不错的介绍:http://www.cnblogs.com/restran/p/3889479.html http://www.cnblogs.com/Irving/archive/2012 ...

  8. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  9. 仿path菜单button的实现

    path刚出来时.其菜单button也算是让大多数人感到了惊艳,如今看来事实上是非常easy的就是动画的结合. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  10. 2440test 裸机測试 调试不进main 设置改动方法

           2440test没进main函数并非跑飞.bin文件已经烧写到开发板里了的 而是没选择载入文件,导致不能调试程序文件 主要设置例如以下: