在看 jquery 源码中发现的一些优化方向

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 在元素超多时那是很烧的一件事

时间: 2024-12-29 01:08:08

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

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

一.首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名). 1 (function() {// ...})(); 二.自执行函数和其他函数类似,都可以传入参数:jQuery源码中将window作为一个参数传入, window是DOM对象模型的最顶层对象,把全局变量传进来,就避免了到外层去寻找,提高效率: 1 (function(window) {// ...})(window); 当

jQuery源码中的Ajax--get()/post()方法

load()方法通常用来在web服务器上获取静态的数据文件,如果需要传递一些参数给服务器中的页面,那就可以使用$.get()方法或$.post()方法. *$.get()方法和$.post()方法是jQuery中的全局函数 一.$.get()方法 $.get()方法是使用GET方式来进行异步请求.结构为: $.get(url [.data] [.callback] [.type]) 参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的url地址 data(可选) Obj

jQuery源码中的Ajax--getScript()/getJson()方法

一.$.getScript()方法 有时候,在页面初次加载时就取得所需的全部Javascript文件是完全没必要的,可以按需所取. 该函数用于动态加载JS文件,并在全局作用域下执行文件中的JS代码. 该函数可以加载跨域的JS文件.请注意,该函数是通过异步方式加载数据的. 该函数属于全局jQuery对象. 语法: $(function(){ $("send").on("click",function(){ $.getScript("script.js&quo

jQuery源码中的Ajax--serialize()/serializeArray()/param()方法

由于jQueryObject.serialize()方法的核心是$.param()方法,所以先学习$.param()方法. 一.$.param()方法 $.param()方法是用来对一个数组或对象按照key/value进行序列化,以便用于URL查询字符串或AJAX请求.其返回的字符串已经过URL编码处理(采用的字符集为UTF-8). 语法: jQuery.param( obj [, traditional ] ) 参数如下: 参数 描述 obj 需要被序列化的JS对象. traditional

jQuery源码中的Ajax--load方法

load()方法是jQuery中最为简单和常用的方法,能载入远程HTML代码幷插入到DOM中,其结构为: load(url [.data] [.callback]) 各参数解释如下: 参数名称 类型 说明 url String 请求HTML页面的URL地址 data(可选) Object 发送至服务器的key/value数据 callback(可选) Function 请求完成时的回调函数,无论请求成功或失败 load的源码如下:(源码目录:jquery/src/ajax/load.js) de

关于jquery源码中undefined作为参数的理解

大家先看一下,下面代码 (function (window,undefined) {window.alert('zhangling');var person = {};person.addName = function () { };person.addAge = function () { };})(window) 压缩后: (function(a,b){a.alert('zhangling');var c={};c.addName=function(){};c.addAge=function

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

$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 下面是init方法代码: 1 init: function( selector, context, rootjQuery ) { 2 var match, elem; 3 if ( !selector ) { 4 return this; 5

jquery源码中的(function(window, undefined){})(window)【转】

(function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ) {})(jQuery); 同理 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined. 还

从jquery源码中看类型判断和数组的一些操作

在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是for in循环,这是很对的,也是行之有效的.但是并非是效果最优的.因为需要循环,然后把循环出来的值push进新数组里,估计怎么也得10行代码吧... 那么jquery中是怎么用的呢? Array原型上的slice方法. 我们在控制台中打上Array.prototype.slice 那么会出来一个完整的