js-jQuery性能优化(一)
来自于《锋利的jQuery》
1、使用最新版本的jQuery类库
jQuery每一个新的版本都会较上一版本进行BUG修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。
2、使用合适的选择器
①、$("#id")
使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById()。如果这个方法不能直接找到你需要的元素,那么可以考虑调用find()方法。代码如下:
$("#content").find("div")
使用以上代码可以有效的缩小定位的DOM元素。为了提高性能,建议从最近的ID元素开始往下搜索。
②、$("p"),$("div"),$("input")
标签选择器的性能也是不错的,它是性能优化的第二选择。
③、$(".class")
对于IE9+,将使用本地方法document.getElementByClassName(),而对于较老的浏览器,只能靠使用DOM搜索的方式来实现,这无疑对性能产生较大的影响。
④、$("[attribute=value]")
对于使用属性来定位DOM元素,本地JS方法中并没有直接地实现,大多都是使用DOM搜索方式来达到效果,很多浏览器支持querySelectorAll()方法,但是不同浏览器间的性能还是有区别。总的来说,使用这种方法来定位DOM元素,性能并不是非常理想。尽量避免。
⑤、$(":hidden")
jQuery需要搜索每一个元素来定位伪选择器,具有较大的性能问题。如果坚持使用这种方式,请先使用ID选择器定位父元素后再使用该选择器。
总结:1、尽量使用ID选择器。2、尽量给选择器指定上下文。
3、缓存对象
jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。可以将多次使用的jQuery对象缓存下来。
所以,永远不要让相同的选择器在你的代码里出现多次。
4、循环时的DOM操作
在for、while、each中处理节点,应避免多次的DOM操作,比如在<ul>中插入<li>,不要每次循环插入一个<li>,应该将整个元素字符串在插入DOM之前全部创建好再一次性插入。
js-jQuery性能优化(一)的更多相关文章
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jQuery:jQuery性能优化28条建议
http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
- jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧 博客地址:http://www.extlight.com 一.使用最新版本 jQuery 类库 二.合理使用选择器 # 推荐使用 $("#id" ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- Babylon.js官方性能优化文档中文翻译
在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...
- 多个JS文件性能优化
页面中引入的JS文件是阻塞式加载的,这样会影响页面性能.以下是JS文件性能优化方法: 一:将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在 ...
- jQuery性能优化和技巧
jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...
- jQuery性能优化(转)
摘要:jQuery是我们经常使用的强大的JS类库,因此它的性能优化十分重要,下面就重几点来说明 原文作者:szyuxueliang 原文地址:http://www.cnblogs.com/yxl ...
随机推荐
- psutil 跨平台根据程序名杀进程
笔者在项目中遇到过需要根据进程名杀进程的需求,利用python库psutil实现了此功能. 模块地址: https://pypi.python.org/pypi/psutil/ psutil功能 ...
- POJ 2551
#include<iostream> #include<stdio.h> #include<string> using namespace std; //int m ...
- 课程一(Neural Networks and Deep Learning),第三周(Shallow neural networks)—— 1、两层神经网络的单样本向量化表示与多样本向量化表示
如上图所示的两层神经网络, 单样本向量化: ...
- ajax 提交添加元素内容
JS <script type="text/javascript"> $('.Phone_Interview_Comments').click(function () ...
- Vue笔记:使用 axios 发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- logstash-2-插件配置
配置语法: Logstash必须有一个 input 和一个 output 1, 处理输入的input 1), 从文件录入 logstash使用一个名为 filewatch的 ruby gem库来监听 ...
- spec 文件详解
转自http://blog.sina.com.cn/s/blog_43b39e250100nnu4.html rpm软件包系统的标准分组:/usr/share/doc/rpm-4.3.3/GROUPS ...
- Python模块:日志输出—logging模块
1. logging介绍 Python的logging模块提供了通用的日志系统,可以方便第三方模块或者是应用使用.这个模块提供不同的日志级别,并可以采用不同的方式记录日志,比如文件,HTTP GET/ ...
- java 写法推荐
1. for循环 for (int i = 0; i < list.size(); i++) { int item = list.get(i); System.out.println(" ...
- Spring Boot(三):Spring Boot 中 Redis 的使用
Spring Boot 对常用的数据库支持外,对 Nosql 数据库也进行了封装自动化. Redis 介绍 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更 ...