《如何合理优化网页JavaScript》由会员分享，可在线阅读，更多相关《如何合理优化网页JavaScript（2页珍藏版）》请在金锄头文库上搜索。
1、.如何合理优化网页JavaScript 每个开发人员都需要首先理解的是，终端用户并不会只使用一种浏览器。用户可以使用并且会使用如今市面上可用的多种浏览器：最常见的是IE，其次是谷歌浏览器Chrome，还有欧朋Oprera和Safari，这只是其中几个，随着WIN10的发布，IE会被放弃，我们需要重点关注Edge。每个浏览器都用自己专有的JavaScript引擎来处理JavaScript。到目前为止，Chrome 6浏览器已实现了V8引擎，这是个C+引擎，可直接安装在使用了ECMAScript的Chrome浏览器上，这一点已经在ECMA262第三版中做了说明，请参考V8，了解相关的其他信息。Sa
2、fari 4使用的是字节码引擎SquirrelFish，Firefox 3.5+使用了TraceMonkey，而Opera则使用Carakan。由于每个浏览器都在使用自己的JavaScript引擎，因此可以确定的是应用程序中的JavaScript在不同的浏览器中会有不同的性能。使用某种浏览器的用户也许比使用其他浏览器的用户体验到更快的加载速度。幸好，我们有可以运行的基准，能够测试出哪个浏览器的JavaScript引擎更快。使用SunSpider JavaScript基准测试，可以比较各个主流浏览器运行JavaScript函数集的性能。该测试不能运行任何特殊的API，也不能与DOM进行交互。它只
3、能测试JavaScript的核心功能，举几个例子，比如加密、日期、数学、字符串和正则表达式功能。图2-12给出了在5种浏览器(IE 8、Firefox 3.6、Chrome 7、Safari 5和Opera 10 )上运行该测试的结果。图2-12中所示的图表展示了SunSpider基准测试对5种主流浏览器进行测试的结果。这5种浏览器运行在奔腾4，3.20Ghz系统上，操作系统为Windows XP，测试结果表明，Chrome的JavaScript引擎速度最快，也就是说JavaScript在这个浏览器中的执行速度最快。一、JavaScript的放置位置如前所述，JavaScript所放的位置对应
4、用程序在浏览器中的加载至关重要。JavaScript的放置位置之所以如此重要，是因为浏览器在遇到标记时的反应。每当浏览器遇到一个标记时，它将会中断该网页上所有进一步的呈现，因此用户会看到并只能看到等待中的页面内容（参见代码清单2-1）。如果将所有JavaScript移到HTML文件底部，则HTML将可以呈现得更快（参见代码清单2-2）。代码清单2-1 JavaScript文件中的不佳放置位置代码清单2-2 优化过的JavaScript放置位置代码清单2-1和代码清单2-2中所显示的HTML和JavaScript代码含有使用HTML标记ul和li的一系列Web技术。其中的HTML代码还包含一个空
5、的div标记，将由JavaScript对其进行更新。JavaScript代码中包含一个单独的函数，它负责创建DOM元素、将每个Web服务器放于Li标记中并将Li附加到空的Web服务器的ul标记后面。使用Firebug测试代码清单2-1和代码清单2-2，结果如图2-13和图2-14所示。图2-13 代码清单2-1的Firebug Net测试结果图2-14 代码清单2-2的Firebug Net测试结果图2-13和图2-14均没有使用缓存，而且模拟了用户对页面的初次访问请求。在图2-13中，页面的呈现时间为269毫秒，而代码清单2-1中所示代码呈现页面的时间为267毫秒。此外，使用代码清单2-2，
6、浏览器拦截页面呈现的时间也从101毫秒减少到了86毫秒。其中所用的JavaScript和HTML代码均为最小量，这表示该页面已经简化过。在较大HTML/JavaScript页面中，这种改进会达到更好的效果。二、精简JavaScript减少响应数据大小可减少浏览器等待加载页面内容有效负载所需的时间，从而直接提高性能。内容的有效负载包含浏览器呈现页面所需的一切资源。有效负载越小，页面下载越快。精简操作可通过删除JavaScript文件中的空白空间、移除无用代码、去除注释、缩小变量、删除不必要的代码（某些压缩工具可实现）来减少JavaScript文件的大小。我们可以通过代码清单2-3中所示的Java
7、Script来演示精简的过程。代码清单2-3中所示的JavaScript代码对代码清单2-2中所示的代码进行了扩展，添加了注释并将for循环中实现的功能移到了新增函数中。JavaScript代码也从HTML中移除，并放置于单独的文件listing2_8.js中。代码清单2-3 使用JavaScript为无序列表添加新条目使用可用的精简工具（如YUI pressor等），将文件大小从525字节减少到278字节。代码清单2-4显示了精简后的最终文件。代码清单2-4 YUI pressor的输出文件当然，得到的精简文件的效果并不是十分显著。从573字节降至255字节不会被认为解决了瓶颈问题的根源，来
8、看看现实世界中的JavaScript文件，比如JavaScript框架jQuery。JQuery的主页提供了两个版本的框架，文件大小为155KB的jQuery未精简版本以及仅24KB的精简版本，后者比前者少了131KB，也就是降低了84.51%的大小。三、 减少资源请求通过减少向Web服务器请求的数量可以减少浏览器必须通过Internet获取资源的次数。在处理JavaScript时，可以将网页所需的所有JavaScript文件合并成一个文件，从而轻松实现减少资源请求的目的。这里需要注意的是，要确保这些文件以正确的顺序合并在一起，即某个文件所需的功能应该出现在使用该功能的文件之前。四、 使用服务器端压缩文件压缩是另一种减少JavaScript以及CSS文件大小的方法。对已精简过的JavaScript或C5S文件进行压缩可进一步减小它。如今使用得最广泛的压缩工具是GZip。我们可以对比368.6KB文件的两个版本：未压缩但已精简的版本和已精简的+gzip的版本，比较结果如表2-4所示。. v
