javascript入门教程:JavaScript的两大优化准则

【51Test.NET-javascript入门教程:JavaScript的两大优化准则】：

在互联网高度发达的今天，各种网站因运而生，有些不是单纯提供信息的网站，有些涉及到纷繁复杂的web应用程序。那么，在日益复杂的网络发展阶段， 各种各样的网页特效也随之产生了，尤其是当今用的比较多的Ajax技术以及JavaScript使得今天的网页绚丽多彩。昨天给大家介绍了应用于此方面的 新语言，即Google的新编程语言Dart。但是，在很短的一段时间之内JavaScript还不会被代替吧，那么，如今，在广泛使用JavaScript制作特效的时候，我们要考虑网站的加载速度了，那么，今天就来为大家分享两大JavaScript的优化准则。

首先我们来分析一下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（）。这些代码的执行时间将随页面的增大而增大。

Javascript