建站经验 experience
当前位置:首页 > 网站建设专题 > 建站经验
JavaScript的两大优化准则
发布日期:2011-10-21 阅读次数:1396 字体大小:

在互联网高度发达的今天,各种网站因运而生,有些不是单纯提供信息的网站,有些涉及到纷繁复杂的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()。这些代码的执行时间将随页面的增大而增大。