JavaScript提高网站性能优化的建议(二)

在javascript关于提高网站性能的几点建议(一)中，从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议，本文是学习Steve Sounders的另外一本书《高性能网站建设进阶指南》之后，从JavaScript性能的角度进行总结概括，诸君共勉。

JavaScript性能是实现高性能Web应用程序的关键

——Steve Sounders

1 利用js作用域链

作用域链（scope chain）

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

管理好作用域链的深度，是一种只要少量工作就能提高性能的简易方法，我们应避免因无意中增长了作用域链而导致执行速度变得缓慢。

使用局部变量（尽量缩短作用域链）

如果理解了作用域链的概念，那么我们应该清楚JavaScript引擎对变量的解析时间跟作用域链的深度有关，显而易见，局部变量由于处于链尾，存取速度是最快的，因此，一个好的经验是：任何非局部变量使用超过一次时，请使用局部变量将其存储下来，例如：

function changeDiv(){
document.getELementById('myDiv').className = 'changed';
document.getELementById('myDiv').style.height = 150;
}

这里myDiv这个dom元素被引用了两次，为了更快的引用，我们应该用一个局部变量将其存储下来，这样做的好处不仅缩短了作用域链，而且避免了DOM元素的重复查询：

function changeDiv(){
var myDivStyle = document.getElementById('myDiv').style;
myDiv.className = 300;
myDiv.style.height = 150;
}

避免使用with（不要增长作用域链）

一般在代码执行过程中，函数的作用域链是固定的，然而with可以临时增长函数的作用域链。with用于将对象属性作为局部变量来显示，使其便于访问，例如：

var user = {
name:'vicfeel',
age:'23'
};
function showUser(){
var local = 0;
with(user){
console.log("姓名" + name);
console.log("年龄" + age);
console.log(local);
}
}
showUser();

这个例子中，通过with在showUser作用域链的链尾中又增加了一个临时作用域，该作用域存储着user对象的所有属性，也就是增长了with这段代码的作用域链，在这段代码中，局部变量像local从链尾的第一个对象变成了第二个，自然减慢了标识符的存取。直到with语句结束，作用域链恢复增长。正因为with的这个缺陷，我们应尽量避免使用with关键字。

2 更合理的流控制

JavaScript与其它编程语言一样，拥有一些流控制语句（循环、条件等），在每个环节上使用恰当的语句能极大的提高脚本的运行速度。

快速条件判断

提到条件判断，首先要避免的一种使用方式：

if(value == 0){
return result0;
}
else if(value == 1){
return result1;
}
else if(value == 2){
return result2;
}
else if(value == 3){
return result3;
}
else if(value == 4){
return result4;
}
else if(value == 5){
return result5;
}
else if(value == 6){
return result6;
}
else{
return result7;
}

这种使用if进行条件判断的方式存在的主要问题是层次太深，当我要value = 7时，消耗时间要比value = 0长很多，大大损耗了性能，同时可读性很差。

一种更好的方式，利用switch进行判断。

swithc(value){
case 0:
return result0;
case 1:
return result1;
case 2:
return result2;
case 3:
return result3;
case 4:
return result4;
case 5:
return result5;
case 6:
return result6;
default:
return result7;
}

这样不仅提高了可读性，查询时间也要比if更快。但是如果只有一两个条件时，if是比switch更快的

在JavaScript中，条件查询还有另外一种方式，之前的例子是根据值返回不同的值，刚好可以利用数组实现hash表的映射查询。

//定义数组
var results = [result0,result1,result2,result3,result4,result5,result6,result7];
//查询结果
return results[value];

这种数组的方式，在查询范围很大时才更加有效，因为它不必检测上下边界，只需要填入索引值就可以查询了。它的局限性在于条件对应的是单一值，而不是一系列操作。因此要综合实际情况，选择合适的条件判断方式，发挥性能最大化。

快速循环

JavaScript中存在4种循环方式for循环、do-while循环、while循环和for-in循环。下面是一个很常用的循环使用方式：

var values = [1,2,3,4,5];
for(var i = 0;i < values.length;i++){
process(values[i]);
}

我们可以看到，这段代码最明显可以优化的地方在于values.length，每次循环i都要和values的长度进行比较，而查询属性要比局部变量更耗时，如果循环次数越大，这种耗时就越明显，因此可以这样优化：

var values = [1,2,3,4,5];
var length = values.length;//局部变量存储数组长度
for(var i = 0;i < length;i++){
process(values[i]);
}

这段代码还可以继续优化，将循环变量递减到0，而不是递加到总长度。

var values = [1,2,3,4,5];
var length = values.length;
for(var i = length;i--;){ //递减到0
process(values[i]);
}

这里将循环结束改造为与0比较，所以每个循环的速度更快了，根据循环的复杂度不同，这种简单改变可以比原来节约大概50%的时间。

赞 (0)

相关推荐

  • JavaScript性能优化之小知识总结

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas

  • 编写高性能Javascript代码的N条建议

    多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显.但在某些情况下,不优化的Javascript代码必然会影响用户的体验.因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处. 下面给出编写高性能的Javas

  • 使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa

  • JavaScript关于提高网站性能的几点建议(一)

    近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

  • javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

  • js性能优化技巧

    性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

  • javascript性能优化之DOM交互操作实例分析

    本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

  • JavaScript提高网站性能优化的建议(二)

    在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

  • 图片该如何优化来提高网站性能

    图片该如何优化来提高网站性能

    概述 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你不小心的话,图片大小有时高达几十兆. 因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平. 在我的网站上,我注意到我的主页的页面大小 超过了1.1MB,图片占了约88%,我还注意到我提供的图像比它们需要的大(在分辨率方面),显然,还有很多改进的空间. 我开始阅读 Addy Osmani 的优秀Essential Image Optimization电子书,并开始在我的网站上

  • Asp.net 网站性能优化二则分享

    Asp.net 网站性能优化二则分享

    随着后端优化空间越来越小,现在越来越多的网站更注重前端性能的优化,就是浏览器,http层面的优化,这里写两点最简单最有效的 asp.net网站优化技巧. 了解常见的网站性能优化技巧 首先我们要学一些优化网站性能和体验的理论和基础知识,雅虎已经帮我们总结好了,详见参考链接中的几篇文章,有好心人已经给翻译成中文了.这里面提到的一些技巧可操作性都很强,建议每一个网站开发人员都仔细学习并进行实践,可以说不了解这里面说的优化技巧,提升网站前端性能就无从谈起. 诊断网站性能 要想优化网站的前端性能,首先要查

  • 提高jQuery性能优化的技巧

    下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说

  • asp.net小谈网站性能优化

    当然,网站性能优化是多方面的,这里先谈一下这些天来的所获: 1.书写代码的习惯: 再复杂的逻辑,也是从最简单的开始.在书写代码的过程中,很多不好的规范都会影响网站的性能: 以下是整理出来的些许代码习惯: 1)字符串的比较 用 string.Empty 代替 " " 2)在遍历过程中,先定义好计数变量, 再遍历, 这样会减少每次遍历就分配一次内存空间: 复制代码 代码如下: int i; for( i=0; i<100;i++) { // codeing } 3)同样的,用 Str

  • Lua性能优化技巧（二）：基本事实

    在运行任何代码之前,Lua都会把源代码翻译(预编译)成一种内部的格式.这种格式是一个虚拟机指令序列,与真实的CPU所执行的机器码类似.之后,这个内部格式将会被由一个包含巨大的switch结构的while循环组成的C代码解释执行,switch中的每个case对应一条指令. 可能你已经在别处了解到,从5.0版开始,Lua使用一种基于寄存器的虚拟机.这里所说的虚拟机"寄存器"与真正的CPU寄存器并不相同,因为后者难于移植,而且数量非常有限.Lua使用一个栈(通过一个数组和若干索引来实现)来提

  • 提高网站性能之 如何对待JavaScript

    尤其是JavaScript 文件,在下载它时,并行下载实际上是被禁用的,并且还会阻塞页面的呈现! 关于JavaScript 的下载 在下载JavaScript 脚本文件时,浏览器不会并行启动其它下载,而是让JavaScript 脚本文件单独下载完毕后,再继续其它请求.这将对页面的整体性能是一个很大的问题,解决方案如下: 解决方案1:将JavaScript 脚本内联在页面中,即直接将JavaScript 脚本写在HTML标签中. 优点:速度最快.在大型网站的首页中,可以合理的将JavaScript

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • WordPress网站性能优化指南

    1.选择一个好的主机 尽量不要使用免费主机或者共享主机(Godaddy啊.Bluehost啊等等所谓无限带宽.无限网站之类的主机) 首先,你的域名和你的主机最好在一个IDC哪儿,如果不是的话,建议你采用口碑良好的DNS服务商,让域名以最快的速度解析到主机上,这不是重点,重点是你的服务器/主机空间应该够快,怎么才能够快呢?CPU的配置.CPU的使用率.物理内存的大小.磁盘类型以及磁盘的I/O性能(包括Mysql数据库服务器所用磁盘).Mysql响应速度以及Mysql并发数等等,都会影响到网站的快与

随机推荐