在看 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 在元素超多时那是很烧的一件事
在看 jquery 源码中发现的一些优化方向的更多相关文章
- jQuery源码中的“new jQuery.fn.init()”什么意思?
所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...
- Jquery源码中的Javascript基础知识(一)
jquery源码中涉及了大量原生js中的知识和概念,文章是我在学习两者的过程中进行的整理和总结,有不对的地方欢迎大家指正. 本文使用的jq版本为2.0.3,附上压缩和未压缩版本地址: http://a ...
- jQuery源码中的赌博网站
前言 jQuery源码中有赌博网站? 起因是公司发的一份自查文件,某银行在日常安全运营过程中发现在部分jQuery源码中存在赌博和黄色网站链接. 链接分为好几个: www.cactussoft.cn ...
- jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理
jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...
- jQuery 源码中的 camelCase
先看一下源码 //65-72行 // Matches dashed string for camelizing //匹配连字符 ‘-’ 和其后的第一个字母或数字,如果是字母,则替换为大写,如果是数字, ...
- Jquery源码中的Javascript基础知识(三)
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...
- Jquery源码中的Javascript基础知识(二)
接上一篇,jquery源码的这种写法叫做匿名函数自执行 (function( window, undefined ) { // code })( window ); 函数定义了两个参数window和u ...
- 关于jQuery源码中(function(window,undefined){//dosomething()})(window)写法解释
一.首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名). (function() { ...
- Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...
随机推荐
- PHP安装加载yaf扩展
Yaf,全称 Yet Another Framework,是一个C语言编写的PHP框架,是一个用PHP扩展形式提供的PHP开发框架, 相比于一般的PHP框架, 它更快. 它提供了Bootstrap, ...
- mysql 顺序问题
unsigned 必须出在 not null 的前面,如果出现在这个后面就出错呢.
- js的一些技巧总结
1. 将彻底屏蔽鼠标右键 <body oncontextmenu="return false"> ''''' </body> 或者 <table b ...
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- [转]unity3d所要知道的基础知识体系大纲,可以对照着学习,不定期更新 ... ... ... ...
本文献给,想踏入3d游戏客户端开发的初学者. 毕业2年,去年开始9月开始转作手机游戏开发,从那时开始到现在一共面的游戏公司12家,其中知名的包括搜狐畅游.掌趣科技.蓝港在线.玩蟹科技.天神互动.乐元素 ...
- NGINX快速部署
NGINX快速部署 #!/bin/bash ############################################################################## ...
- Oracle 常用
1. 级联查询 在ORACLE 数据库中有一种方法可以实现级联查询select * //要查询的字段from table //具有子接点ID与父 ...
- jQuery 文档操作方法(append)
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 一.append() 方法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. 例子: <html& ...
- E QUERY [main] SyntaxError: identifier starts immediately after numeric literal mongodb mapReduce 异常分析 集合命名规范
异常信息 repl_test:PRIMARY> db.0917order_totals_b.find()2018-09-28T15:13:03.992+0800 E QUERY [main] S ...
- ECMAScript6重复字符串方法repeat()
repeat() 1.定义 repeat()方法返回一个新字符串,新字符串将对象字符串重复指定次数. 2.语法 str.repeat(count) count:表示新构造的字符串把原字符串重复的次数, ...