jquery优化引发的思考
无意间看到jquery优化的一个细节让我觉得不可思议记录一下。仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现。
通过缓存最小化选择操作
jQuery的选择器棒极了。它们可以在页面上以极其简单的方法找到任何元素,但是在内部它们必须通过大量的步骤才可以实现选择操作,如果你错误的使用它们,那么你可能发现一切都变得相当慢。
如果你一次又一次的选择相同元素(例如在一个循环中),那么你可以一次选择出它并放入内存中,同时你可以在核心内容里操作它。看下面的例子,这里我们利用循环往UL里添加条目:
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
这在我的PC上Firefox 3花费了1066毫秒时间(可以设想一下在IE6中的情况!),对JavaScript而言这个操作相当慢。现在让我们来看看下面的代码,这里我们仅使用了一次选择操作:
var myList = $('.myList');
for (i = 0; i < 1000; i++) {
myList.append('This is list item ' + i);
}
仅仅用了224毫秒,通过移动一行代码就快了将近4倍。
http://www.cnblogs.com/huyh/archive/2009/03/30/1422976.html#tip1
jquery优化引发的思考的更多相关文章
- 解决一道leetcode算法题的曲折过程及引发的思考
写在前面 本题实际解题过程是 从 40秒 --> 24秒 -->1.5秒 --> 715ms --> 320ms --> 48ms --> 36ms --> ...
- 新手必看的jQuery优化笔记十则
jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...
- 曲演杂坛--一条DELETE引发的思考
原文:曲演杂坛--一条DELETE引发的思考 场景介绍: 我们有一张表,专门用来生成自增ID供业务使用,表结构如下: CREATE TABLE TB001 ( ID ,) PRIMARY KEY, D ...
- Spring之LoadTimeWeaver——一个需求引发的思考---转
原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver——一个需求引 ...
- 由SecureCRT引发的思考和学习
由SecureCRT引发的思考和学习 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMDEwMA==&mid=2652500597&idx=1& ...
- 【思考】由安装zabbix至排障php一系列引发的思考
[思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...
- 由<a href = "#" > 引发的思考
原文:由<a href = "#" > 引发的思考 前阵子在一个移动项目中,通过 <a href = "#" > 的方式 绑定clic ...
- class_copyIvarList方法获取实例变量问题引发的思考
在runtime.h中,你可以通过其中的一个方法来获取实例变量,那就是class_copyIvarList方法,具体的实现如下: - (NSArray *)ivarArray:(Class)cls { ...
- 由一个emoji引发的思考
由一个emoji引发的思考 从毕业以来,基本就一直在做移动端,但是一直就关于移动端的开发,各种适配问题的解决,在日常搬砖中处理了就过了,也没有把东西都沉淀下来,觉得甚是寒颜.现就一个小bug,让我们来 ...
随机推荐
- jstl数字保留两位小数
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><fmt:fo ...
- oracle函数Lpad与Rpad
函数介绍 lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 语法格式如下: lpad( string ...
- 如何利用 Bootstrap 进行快速 Web 开发
原文出处: IBM developerworks 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS 项目为基础,由 Twi ...
- Entity Framework中实现查询的几种方法
在介绍几种方法前,献上一张图,希望图的作者不要追究我的盗图之过.本文的内容是我自学时的笔记,自学的内容来自网络.手打的代码,切不可直接复制过去用,会有好多错别字什么的. Entity SQL 类似于S ...
- 在IIS Express中调试时无法读取配置文件
在IIS Express中调试代码时,如果出现“无法读取配置文件”的问题(如图),这种情况是IIS Express的“applicationhost.config”配置文件中的映射关系出了问题[ps: ...
- PHP学习笔记二十二【静态方法二】
<?PHP class Student{ public static $fee; public $name; //构造函数 function __construct($name) { $this ...
- 转: 向tabControl中添加一个Form(C#)
- 解决mac ssh连linux中文乱码的问题[转]
将Mac下/etc/ssh_config中的SendEnv LANG LC_*这一行用#号注释掉 reference: http://www.zhihu.com/question/20117388
- Ecstore中如何调用发起Ajax请求
Ecstore的JS框架使用了mootools,所以ajax调用也使用mootools中的Request组件. 语法: var myRequest = new Request([options]); ...
- sql每五秒插入一条数据 一次插入N条数据
1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...