1. 避免使用 $.fn.each 或 $.each

因为它比原生的 for/while 真的会慢一些,循环次数越多差距越大。

另外,对象的 for-in 比 for 是要快一丢丢的,但数组的 for-in 要比 for 慢。

但是吧,方便呀,可以少好多变量,其实无所谓啦。

2. 选择器

始终要相信,原生的普遍要快一些,jquery 也是如此,

id 选择器 $('#id') / 元素标签选择器 $('input') / 类选择器 $('.class') 都是原生的

而伪类选择器 $(':hidden') / 属性选择器 $('[data-id]') 就相对更慢一些了

你猜用了 querySelector 或 querySelectorAll 后后两者会快些吗,自己快去试试吧

3. 父子关系

比较以下这 6 种获取子级元素的方法,发现 $parent.find('.child') 竟然最快

$('.child', $parent) 

↑ 其实还是会转化为 $parent.find('.child') 去寻找,所以何必呢

$parent.find('.child')

↑ 最原生的选择器去查找 .child,当然最快

$parent.children('.child')

↑ 其实内部会使用 siblings 和 nextSiblings 一个个区遍历节点,不管怎样都比 find 要慢

$('#parent > .child')

↑ jQuery 的 Sizzle 引擎是从右向左识别的,这很肝疼(虽然浏览器也是这样合并 DOM 树和样式树的,但那是无奈之举呀)

$('#parent .child')

↑ 与上同理,还要考虑多层级,速度就更慢了

4. 做好缓存

每个 jQuery 对象的开销其实不小,每次选择都会生成一个 jQuery 对象,而它又都有上百个属性,想想都可怕。因此:

var $obj = $('#xx');
$obj.find('.a');
$obj.find('.b')

$('#xx').find('.a');
$('#xx').find('.b');

可能快上一倍

5. dom 元素操作可用原生就用原生吧

$('#x').on('click', function(){
alert($(this).prop('id'));
alert(this.id);
});

两者相比,后者要快上许多许多。

同理:

$(this).hide(0);
this.style.display = 'none';

  

6. 使用链式写法

$('xx').find('p').eq(2).text('哈');

想想其实也应该懂的,免去了重复生成 jQuery 对象的开销

7. 改动 DOM 结构

众所周知,改动 DOM 结构的开销何其大,拉开十倍的速率差距都是可能的。

对大量 DOM 的插入还是使用先合并再插入比较好。而是使用 jQuery 元素的合并还是字符串的合并就得看安全要求和复杂程度了

对大量 DOM 的修改建议先用 detach 方法把元素取出,处理完毕后再插回文档

8. 存储数据

$('#xx').data(key, value);
$.data($('#xx'), key, value);

前者定义在元素对象的 prototype 上,后者定义在全局 $ 对象上(都是实例对象为什么这样会快其实我也没搞懂,还只想到这点,请大佬补充)

9. 事件委托

原生去写事件委托还是比较累的,所以使用 jQuery 很大程度上是因为 $.fn.on 和 $.ajax 是我的最爱

$('#parent').on('click', '.child', function(){});

相比去给每个 .child 都绑定 click 在元素超多时那是很烧的一件事

在看 jquery 源码中发现的一些优化方向的更多相关文章

  1. jQuery源码中的“new jQuery.fn.init()”什么意思?

    所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...

  2. Jquery源码中的Javascript基础知识(一)

    jquery源码中涉及了大量原生js中的知识和概念,文章是我在学习两者的过程中进行的整理和总结,有不对的地方欢迎大家指正. 本文使用的jq版本为2.0.3,附上压缩和未压缩版本地址: http://a ...

  3. jQuery源码中的赌博网站

    前言 jQuery源码中有赌博网站? 起因是公司发的一份自查文件,某银行在日常安全运营过程中发现在部分jQuery源码中存在赌博和黄色网站链接. 链接分为好几个: www.cactussoft.cn ...

  4. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

  5. jQuery 源码中的 camelCase

    先看一下源码 //65-72行 // Matches dashed string for camelizing //匹配连字符 ‘-’ 和其后的第一个字母或数字,如果是字母,则替换为大写,如果是数字, ...

  6. Jquery源码中的Javascript基础知识(三)

    这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...

  7. Jquery源码中的Javascript基础知识(二)

    接上一篇,jquery源码的这种写法叫做匿名函数自执行 (function( window, undefined ) { // code })( window ); 函数定义了两个参数window和u ...

  8. 关于jQuery源码中(function(window,undefined){//dosomething()})(window)写法解释

    一.首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名). (function() { ...

  9. Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法

    $() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...

随机推荐

  1. ACM Computer Factory - poj 3436 (最大流)

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5949   Accepted: 2053   Special Judge ...

  2. 第一百七十八节,jQuery-UI,知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  3. 集合Set映射一对多(使用xml文件)

    如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...

  4. Servlet线程安全2

    Servlet的多线程机制 Servlet体系结构是建立在Java多线程机制之上的,它的生命周期是由Web容器负责的.当客户端第一次请求某个Servlet时,Servlet容器将会根据web.xml配 ...

  5. libevent在windows下用visual studio编译时出现error C2894错误的原因与解决方法

    libevent是一个使用很广泛的网络库,今天想了解下它.于是去git clone了一份源码,用vs2005的命令行:nmake -f makefile.nmake编译之,顺利编译通过,生成三个静态库 ...

  6. python爬虫:正则表达式

    符号: . : 匹配任意字符(类似占位符,多少个.就表示多少个字符),换行符除外(与re.S相反) *:匹配前面一个字符0次或无限次 ?:匹配前面一个字符0次或1次 组合: .* : 贪心算法 一次匹 ...

  7. mysql中对应oracle中的to_char()和to_number()函数

    TO_CHAR(): CAST(123   AS   CHAR(3)) TO_NUMBER(): cast( '123 '   as   SIGNED   INTEGER)

  8. SQL查临时表没有返回数据集

    问题描述:在SQL中可以查询到数据,返回不到页面上. 解决办法: set nocount on create table #list [转] 每次我们在使用查询分析器调试SQL语句的时候,通常会看到一 ...

  9. CSS:text-decoration参数说明

    CSS:text-decoration(下划线参数) underline:下划线 效果:下划线 overline:上划线 效果:上划线 line-through:贯穿线 效果:贯穿线 blink:闪烁 ...

  10. DevExpress控件-lookupedit的使用方法详解(图文)转http://blog.csdn.net/qq395537505/article/details/50920508

    绑定数据源: lookupedit.Properties.ValueMember = 实际要用的字段; //相当于editvalue lookupedit.Properties.DisplayMemb ...