使用局部变量比使用全局变量快得多,因为在作用域链中越远,解析越慢。下图显示了作用域链结构:
如果代码中有 with 或 try-catch 语句,作用域链会更复杂,如下图:
JavaScript 字符串
JavaScript 中一个非常影响性能的函数是字符串连接,一般情况都是使用 + 号来实现拼接字符串。但是早期浏览器没有对这样的连接方式做优化,导致在连续创建和销毁字符串严重降低 JavaScript 执行效率。
- var txt = "hello" + " " + "world";
建议改成:
- var o = [];
- o.push("hello");
- o.push(" ");
- o.push("world");
- var txt = o.join();
我们再简单封装一下:
- function StringBuffer(str) {
- var arr = [];
- arr.push(str || "");
- this.append = function(str) {
- arr.push(str);
- return this;
- };
- this.toString = function() {
- return arr.join("");
- };
- };
然后这样子调用:
- var txt = new StringBuffer();
- txt.append("Hello");
- txt.append(" ");
- txt.append("World");
- alert(txt.toString());
JavaScript DOM 操作
html Document Object Model (DOM) 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档表示成节点树,其中包含元素、属性和文本内容。通过使用 HTML DOM,JavaScript 能访问 HTML 文档中所有节点并操作它们。
DOM 重绘
每次修改到页面的 DOM 对象,都涉及到 DOM 重绘,浏览器都会重新渲染页面。所以降低 DOM 对象的修改次数,可以有效地提高 JavaScript 的性能。
- for (var i = 0; i < 1000; i++ ) {
- var elmt = document.createElement('p');
- elmt.innerHTML = i;
- document.body.appendChild(elmt);
- }
建议改成:
- var html = [];
- for (var i = 0; i < 1000; i++) {
- html.push('<p>' + i + '</p>');
- }
- document.body.innerHTML = html.join('');
DOM 访问
通过 DOM 可以访问到 HTML 文档中的每个节点。每次调用 getElementById()、getElementsByTagName() 等方法,都会重新查找并访问节点。所以将查找到的 DOM 节点缓存一下,也可以提高 JavaScript 的性能。
- document.getElementById("p2").style.color = "blue";
- document.getElementById("p2").style.fontFamily = "Arial";
- document.getElementById("p2").style.fontSize = "larger";
建议改成:
- var elmt = document.getElementById("p2");
- elmt.style.color = "blue";
- elmt.style.fontFamily = "Arial";
- elmt.style.fontSize = "larger";
DOM 遍历
DOM 遍历子元素通常都是按索引循环读取下一个子元素,在早期浏览器下这种读取方式执行效率很低,利用 nextSibling 方式可以提高 js 遍历 DOM 的效率。
- var html = [];
- var x = document.getElementsByTagName("p");//所有节点
- for (var i = 0; i < x.length; i++) {
- //todo
- }
建议改成:
- var html = [];
- var x = document.getElementById("div");//上级节点
- var node = x.firstChild;
- while(node != null){
- //todo
- node = node.nextSibling;
- }
JavaScript 内存释放
在 web 应用中,随着 DOM 对象数量的增加,内存消耗会越来越大。所以应当及时释放对象的引用,让浏览器能够回收这些内存。
释放 DOM 占用的内存
- document.getElementById("test").innerHTML = "";
将 DOM 元素的 innerHTML 设置为空字符串,可以释放其子元素占用的内存。
释放 javascript 对象
- //对象:
- obj = null
- //对象属性:
- delete obj.property
- //数组元素:
- arr.splice(0,3);//删除前3个元素
来源: http://www.phperz.com/article/17/0420/272996.html