JavaScript的优化准则

申请免费试用、咨询电话：400-8352-114

首先我们来剖析一下JavaScript的运转机制。

JavaScript的运转机制

1.JavaScript代码是从效劳器原封不动地发送到客户端的，代码越大，下载所需的时间和带宽越多。

2.JavaScript在阅读器中解释，而不是编译好的。

3.JavaScript 代码经过DOM API修正HTML页面来与用户交互。对JavaScript开发人员来说，这是功用强大的高级模型，但对DOM所做的每个简单修正都将招致阅读器的页面 渲染引擎执行一系列复杂的操作。对DOM看似细微的修正常常招致需求占用比预期的多得多的CPU周期。Gmail和基于Ajax的、ahoo！ Mail等Web应用程序都对妙性能提出了应战。大量的人力被投入到这些Web应用程序中，它们在最新的计算机中可能运转顺畅，但在较旧的计算机中可能反 应愚钝，而在这些旧计算机中运转相应的桌面应用程序没有任何问题。

两大JavaScript的优化原则

一、缩短JavaScript的下载时间

人多数编程言语要么是编译型的，要么在代码装置的计算机中运转，或者两者兼而有之。例如，运用诸如Python、PHP或Perl等脚本言语时，代码在执行 之前不需求经过网络传输，而在本地运转。但是诸如Java等其他言语的代码被编译成二进制文件，可在执行前经过网络传输。思索到这种状况。采用的大量措施 使二进制格式愈加紧凑。

JavaScript不属于上述任何一种状况，其源代码和用到的库被阅读器依照原样下载到客户端，因而 JavaScript源代码的大小以及打包传输方式将直接影响到页面的性能，这些在刚开端编码的时分或许无关紧要，但是随着JavaScript繁荣库越 来越多，很快将招致下载JavaScript代码需求的时间越来越长。

为了缩短上述的下载时间吗，我们有如下有效的措施：

1.除非每个页面都有不同的JavaScript，否则不要将JavaScript放在网页的HTML代码中，而是在HTML代码中援用JavaScript。假如一定要在页面中包含JavaScript，这样的页面不能过长。

2.减少在页面中包含的JavaScript文件数量。不需求走极端，将一切JavaScript代码放到一个文件中。包含不超越5个文件是可行的。但是假如包 含超越20个文件就需求三思然后行了。当然，这些数字只是一个意味性的阐明，详细是什么状况，包含几JavaScript文件数将影响页面的负荷才能需 要停止特地的测试才干得到准确的数字。

3.减少运用的库。假如运用大量不同来源的库，他们或许有一些代码是反复的。例如，每个库中 可能包含处置DOM的代码，这是一种糜费。由于i这些代码能够共享。选择一个能够处理大量问题且模块化的库，这样可只包含所需的子集。运用一个主要库的代 码还有其他益处：减少依赖关系，从而降低不兼容的可能性；晋级到新版本更容易；通常来说，大型库更容易遭到更大社区的支持，因而更新愈加频繁，新特性更 多。

另外，JavaScript的很多库都含有完好版和精简版两个版本。

完好版合适用于阅读和修正库的代码。它包含缩进和注释，关于开发人员来说可读性更高。

精简版合适于用于部署网站。这种版本是基于完好版自动创立的：删除了注释和缩进；通常一切代码位于一行中；有时分不暴露的变量被重命名为很短的称号。

显而易见，在部署网站时，我们务必运用精简版。依据本人编写的代码长度，可能要运用工具创立JavaScript文件的精简版。这样的工具很多，其中开源的如（GPL）的ECMASScript Cruncher（ESC）。

二、最大限度的减少DOM更新

为完成任何有趣的功用，代码必需修正DOM。但是，修正DOM的开支十分高。显然，为处置修正页面内容的DOM API调用，阅读器必需做大量的工作。更令人诧异的是，调用不修正页面的办法（如注册监听器）可能十分慢。

另外，一定要留意遍历大量的DOM对象的代码，如遍历document.all以查找特定元素的代码或document.getElementByName（）。这些代码的执行时间将随页面的增大而增大。