【jQuery基础学习】11 jQuery性能简单优化
关于性能优化
- 合适的选择器
- $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继续查找
- $("p")标签选择器也是直接调用底层方法,所以是第二选择
- $(".class")也是直接调用底层方法,不过IE8及更早版本不支持getElementByClassName,它会采用DOM搜索方式,所以会影响性能。
- $("[attribute=value]")采用DOM搜索的方式,很多现代浏览器支持querySelectorALL方法,但不同浏览器上性能也有所区别。总的来说,用这种方式定位DOM元素,性能不太理想。
- $(":hidden")这种伪选择器方式,同样没有在本地js方法中实现。同样DOM搜索
- 以上五种方法性能依次而降,所以尽量用ID选择器,并且给选择器指定上下文。如果你强行要用DOM搜索方式的选择器,建议先用个ID选择器缩小范围,再用find函数进一步搜索。
- 缓存对象
- 尽量去用链式操作,而不是多次使用相同的选择器,然后再进行不同的操作
- 如果不能用链式操作,可以考虑将需要用到的jQuery对象放到一个全局对象里。这样不用每次使用都去查找DOM。
- 循环时的DOM操作
- 不要去循环进行DOM插入的操作,就是$("#id").append及类似的操作,这样会很耗性能。所以可以考虑先把一大串这样的操作,用拼接HTMl字符串的方式,当做字符串先拼好,然后再插入。
- 数组方式使用jQuery对象
- jQuery选择器返回的是一个jQuery对象,如果你是在用一个实际上是数组意义的结构的话,那么在性能上讲,可以用for和while去代替$("#id").each()的写法。
- 事件代理
- 尽量去少绑定事件,否则也会带来负面性能影响。当绑定多个事件时,可以考虑是否能够通过它们共同的父级去只绑定一个事件
//可以想一想下面这种情况,如果是一个大型表格,那么会绑定N次事件。
$('#myTable td').click(function(){
$(this).css('background','red');
});
//利用事件的冒泡机制去代替上面那种拙劣的写法
$('#myTable').click(function(e){
var $click=$(e.target);//e.target捕捉触发的目标元素
$click.css('background','red');
});
//当然我们还可以用on来进行更简单的事件绑定
$('#myTable').on('click','td',function(){
$(this).css('background','red');
});
- 尽量去少绑定事件,否则也会带来负面性能影响。当绑定多个事件时,可以考虑是否能够通过它们共同的父级去只绑定一个事件
- 可以考虑用自定义jQuery插件去取代自己的重复代码
- 使用join()去取代+来拼接字符串
- 可以考虑在更需要性能的地方使用原生js代码
- 合理使用HTML5的data属性
<div id="d1" data-role="page" data-last-value="43" data-options='{"name":"Troy123"}'></div> $("#d1").data("role");//"page"
$("#d1").data("lastValue");//
$("#d1").data("options").name;//"Troy123"
最后作者还写了一些使用jQuery的技巧,其实也就是一些解决方案。
好吧,更通俗的讲就是可以在网上搜一搜,然后直接复制粘贴的代码。
我觉得这些都很次要,所以只是自己看完就没有贴上来了。毕竟当你遇到这些问题的时候百度一下copy就好了。
【jQuery基础学习】11 jQuery性能简单优化的更多相关文章
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- 【总结整理】JQuery基础学习---样式篇
进入官方网站获取最新的版本 http://jquery.com/download/ 中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
随机推荐
- LCLFramework框架之Repository模式
Respository模式在示例中的实际目的小结一下 Repository模式是架构模式,在设计架构时,才有参考价值: Repository模式主要是封装数据查询和存储逻辑: Repository模式 ...
- linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件
原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html 之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...
- WebDriver等待和同步对象(基于C#)
WebDriver等待和同步对象(基于C#) http://www.docin.com/p-748352113.html
- iOS开发-pod install 出错 The dependency `AFNetworking (~> 2.6.0)` is not used in any concrete target.
低版本的cocoapods的Podfile文件pod install可以正常运行 platform :ios, '8.0' pod 'AFNetworking' 高版本的cocoapods的Podfi ...
- php网页切图/js切图
PhantomJS抓取网站页面信息以及网站截图 http://phantomjs.org/download.html PHP imagegrabscreen和imagegrabwindow(截取网站缩 ...
- Sharepoint 2013列表视图和字段权限扩展插件(免费下载)!
记得2014年春节期间,有博客园的网友通过QQ向我咨询Sharepoint 2013列表视图和字段权限扩展,因为之前他看到我博客介绍Sharepoint 2010列表视图和字段的权限控制扩展使用,问有 ...
- c# C++接口封装 汽车模拟仿真
struct PinCamParIn//用户输入的针孔相机参数结构体{ char CameraName[512]; float Offset[3]; float Angle[3]; ...
- (转)在低版本的SDK里使用高版本函数@SuppressLint("NewApi") or @TargetApi?
@SuppressLint 和 @TargetApi达到的效果是一样的,相对于SuppressLint ,TargetApi会根据函数里使用的API,严格匹配SDK版本,给出编译错误,但是Suppre ...
- Maven更新子模块的版本号
mark! 已写成了另一篇,不要打我.
- [Tango] Basic Knowledge
Project Tango类设备能够给开发者在哪些领域带来机会. 室内导航*:室内GPS信号的缺失,使得Project Tango设备会成为室内导航重要应用场景之一.有了它,你就不会在不熟悉的室内商场 ...