这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 提升性能的常用技巧, 结合实例形式总结分析了 JavaScript 编程中常见的性能提升优化技巧, 涉及作用域、循环、变量、DOM 及函数节流等, 非常具有实用价值, 需要的朋友可以参考下
本文讲述了 JavaScript 提升性能的常用技巧。分享给大家供大家参考,具体如下:
1. 注意作用域
随着作用域链中的作用域数量的增加, 访问当前作用域以外的变量的时间也在增加. 访问全局变量总是要比访问局部变量慢, 因为要遍历作用域链.
1). 避免全局查找 将在一个函数中会多次用到的全局对象存储为局部变量总是没错的.
2). 避免 with 语句 with 会创建自己的作用域, 因此会增加其中执行代码的作用域链的长度.
2. 选择正确的方法
性能问题的一部分是和用于解决问题的算法或者方法有关的.
1). 避免不必要的属性查找
在计算机科学中, 算法的复杂度是使用 O 符号来表示的. 最简单, 最快捷的算法是常数值, 即 O(1). 之后, 算法变得越来越复杂并花更长时间执行. 常用的 JavaScript 算法类型有:
常数 : 不管有多少值, 执行的时间都是恒定的. 一般表示简单值和存储在变量的值.
对数 : 总的执行时间和值的数量相关, 但是要完成算法并不一定要获取每个值. 例如: 二分查找
线性 : 总执行时间和值的数量直接相关. 例如 : 遍历某个数组中的所有元素
平方 : 总执行时间和值的数量有关,每个值至少要获取 n 次.例如:插入排序
立方: 总执行时间和值的数量有关,每个值至少要获取 n 的平方次
使用变量和数组要比访问对象上的属性更有效率.对象上的任何属性的查找都要比访问变量或者数组花更长时间,因为必须在原型链中对拥有该名称的属性进行一次搜索.
一般来讲,只要能减少算法的复杂度,就要尽可能减少.尽可能多地使用局部变量将属性查找替换为值查找.进一步讲,如果即可以用数字化的数组位置进行访问,也可以使用命名属性 (诸如 NodeList 对象), 那么使用数组位置.
2). 优化循环
a. 减值迭代 在很多情况下, 从最大值开始, 在循环中不断减值的迭代器更加高效.
b. 简化终止条件 由于每次循环过程都会计算终止条件, 所以必须保证它尽可能快.
c. 简化循环体 循环体是执行最多的, 所以要确保其被最大限度地优化. 确保没有某些可以被很容易移出循环的密集计算.
d. 使用后测试循环 最常用的 for 循环和 while 循环都是前测试循环. 而如 do-while 这种后测试循环, 可以避免最初终止条件的计算, 因此更快.
3). 展开循环 当循环的次数是确定的, 消除循环并使用多次函数调用往往更快. 如著名的 Duff 装置
4). 避免双重解释
当 JavaScript 代码想解析 JavaScript 的时候就会存在双重解释的惩罚. 如下例:
- eval("alert('Hello world!')");
- //某些代码求值
修正:
- alert('Hello world');
- var sayHi = new Function("alert('Hello world!')");
修正:
- var sayHi = function() {
- alert("Hellow world!');
- };
- "
- setTimeout("alert('Hellow world!')", 500);
修正:
- setTimeout(function)({
- alert('Hellow world!');
- },
- 500);
5). 其他方法
原生方法较快 -- 只要有可能, 使用原生方法而不是自己用 JavaScript 重写一个. 原生方法是用诸如 C/C++ 之类的编译型语言写出来的, 所以要比 JavaScript 的快很多很多. JavaScript 中最容易被忘记的就是可以在 Math 对象中找到的复杂的数学运算; 这些方法要比任何用 JavaScript 写的同样方法, 如正弦, 余弦快的多.
Switch 语句较快 -- 如果有一系复杂的 if-else 语句, 可以转换成单个 switch 语句则可以得到更快的代码. 还可以通过将 case 语句按最可能的到最不可能在顺序进行组织, 来进一步优化 switch 语句.
位运算符较快 -- 当进行数学运算的时候, 位运算操作要比任何布尔运算或者算数运算快. 选择性的用位运算换算数运算可以极大提升复杂计算的性能. 诸如取模, 逻辑与和逻辑或都可以考虑用位运算来替换.
3 . 最小化语句数
1). 多个变量声明
如:
- //4个语句---很浪费
- var count = 5;
- var color = "blue";
- var values = [1, 2, 3];
- var now = new Date();
优化:
- var count = 5,
- color = "blue",
- values = [1, 2, 3],
- noiw = new Date();
在大多数情况下这种优化都非常容易做, 并且要比单个变量分别声明快很多.
2). 插入迭代值
如:
- var name = values[i];
- i++;
优化:
- var name = values[i++];
3). 使用数组和对象字面量
如:
var values = new Array(); ---> var values = [];
var obj = new Object(); ---> var obj = {};
4. 优化 DOM 交互
1). 最小化现场更新
一旦你需要访问 DOM 部分是已经显示的页面的一部分, 那么你就是在进行一个现场更新. 之所以叫现场更新, 是因为需要立即 (现场) 对页面对用户的显示进行更新. 不管是插入单个字符, 还是移除整个片段, 都有一个性能惩罚, 因为浏览器要重新计算无数尺寸以进行更新.
例:
- var list = document.getElementById("myList");
- for (var i = 0; i < 10; i++) {
- var item = document.createElement("li");
- list.appendChild(item);
- item.appendChild(document.createTextNode("Item " + i));
- }
这样添加 10 个项目, 这个操作总共要完成 20 个现场更新. 下面用创建文档碎片的方法改进:
- var list = document.getElementById("myList");
- var fragment = document.createDocumentFragment();
- for (var i = 0; i < 10; i++) {
- fragment.appendChild(item);
- item.appendChild(document.createTextNode("Item " + i));
- }
- list.appendChlid(fragment);
在这个例子中只有一次现场更新, 它发生在所有项目都创建好之后. 文档碎片用作一个临时的占位符, 放置新创建的项目. 然后使用 appendChild() 将所有项目添加到列表用. 记住, 当给 appendChild() 传入文档碎片时, 只有碎片中的子节点被添加到目标, 碎片本身不会被添加的.
一旦需要更新 DOM, 请考虑使用文档碎片来构建 DOM 结构, 然后将其添加到现存的文档中.
2). 使用 innerhtml
有两种在页面上创建 DOM 节点的方法: 使用诸如 createElement(),appendChild() 之类的 DOM 方法, 以及使用 innerHTML 对于小的 DOM 更改而言, 两种方法效率都差不多. 而对于大的 DOM 更改, 使用 innerHTML 要比使用标准 DOM 方法创建同样的 DOM 结构快很多. 同样, 一次使用 innerHTML 比多次使用 innerHTML 也要快相当多.
3). 使用事件代理 (简, 略)
4). 注意 NodeList
最小化访问 NodeList 的次数可以极大的改进脚本的性能.
发生以下情况时会返回 NodeList 对象:
a. 进行了对 getElementsByTagName() 的调用
b. 获取了元素的 childNodes 属性
c. 获取了元素的 attributes 属性
d. 访问了特殊的集合, 如 document.forms , document.images 等等
要了解当使用 NodeList 对象时, 合理使用会极大提升代码执行速度.
前面介绍的 函数节流 也是很重要的一方面。特别是多重循环,非常耗性能时,此方法很有用的。
PS:对于 javascript 进行压缩,减少代码体积也是提升 javascript 性能的有效途径。这里就为大家推荐 2 款非常实用的压缩工具:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0711/264742.html