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()。这些代码的执行时间将随页面的增大而增大。