优化Web运行程序性能的最佳通常

作为开发人员，Web页面加载或刷新的速度对其网站至关关键。 在阅读器中调整性能疑问比在Java运行程序中更难。开发人员在各种阅读器中调试JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以经常使用Firebug调试JavaScript，但依然不能调整很多性能疑问，如阅读器出现消耗期间。为了处置这些疑问，有必要开发阅读器插件来监控期间照应，以及确定其他对应处置打算如部分出现或延时加载。

介绍专题： 高性能WEB开发运行指南

本文节选自IBM developerWorks 优化Web运行程序的性能的系列文章，该文经过Web运行程序性能的***通常案例，协助开发者更好地理解影响Web运行程序性能的要素，学习如何诊断Web运行程序中的性能疑问，找到客户端内容中的瓶颈，并确定处置打算。

一、优化Web运行程序性能的6种基本形式

1.缩小HTTP恳求数

每个HTTP恳求都有开支，包含查找DNS、创立衔接及期待照应，因此增添不用要的恳求数可缩小不用要的开支。要缩小恳求数：

◆ 兼并文件。将总是同时经常使用的脚本兼并到同一个文件中，不会减小总大小，但将会缩小恳求数。还可以雷同方法兼并CSS文件和图片。可以成功文件智能兼并：

◆ 在构建阶段。用标志，经过运转Ant兼并文件。

◆ 在运转时阶段。启用mod_concat模块。假设httpServer是Apache，用pack:Tag作为JSP标签库来兼并JavaScript和样式表文件。(pack:Tag是一个JSP-Taglib，可缩减、紧缩及兼并资源，如JavaScript和CSS，并将它们在内容或个别文件中缓存。)

◆ 经常使用CSS Sprites。将背景图片兼并成一个图片，并经常使用CSS background-image和background-position属性来显示所需图片部分。还可经常使用内联图片缩小恳求数。

2.后置加载组件

只出现须要的组件;其他可期待。***不要一次性出现太多组件。

某些状况下，可经常使用后置加载。由于阅读器可视区域外的组件可置加载，当这些组建进入可视区域不久后，初始出现就会失效。

有些JavaScript可以在onload事情后后置加载，如JavaScript中初始出现后拖动某个元素。

3.前置加载组件

有两种前置加载：

无条件：一旦触发onload，就取得一些额外组件。

有条件：依据用户的举措，推测用户下一步的方向并启动相应的前置加载。

4.将脚本放在底部

脚本或许会发生疑问，由于它们或许会阻碍并行下载。当下载脚本时，阅读器不会再启动其他下载，即使那些位于不同主机。将脚本，如样式表，放在底部，以保障它们在其他下载成功后再下载。

也可以经常使用延时脚本，这只要Internet Explorer允许。DEFER属性示意脚本不含document.write()。这就通知阅读器他们可以继续出现。

5.经常使用无cookie域组件

当阅读器收回对静态图片的恳求，并随之发送cookie时，主机不会经常使用那些cookie。由于这些cookie只会形成不用要的网络流量，确保用无恳求来恳求静态组件。而后经常使用子域和主机保留这些静态组件。

6.将JavaScript和CSS放在外部

理想环球中经常使用外部文件通常会使页面运转更快，由于JavaScript和CSS文件被阅读器缓存。HTML文档内的JavaScript和CSS会在每次恳求HTML文档时被下载。这缩小了须要恳求的HTTP的数量，但参与了HTML文档的大小。另一方面，假设JavaScript和CSS在被阅读器缓存的外部文件中，就会减小HTML文档大小，而不会参与恳求数。

二、改良RIA小部件性能方法

干流RIA Ajax框架，如ExtJS、YUI、Dojo及其他，都提供一些精美的小部件库，以增强用户体验。与其他框架相比，Dojo在企业开发畛域更弱小，这是由于：

◆ Object-oriented programming(OOP)编码

◆ 跨平台

◆ 本地数据存储的Dojo离线API允许

◆ alt="YSlow Grade 面板是 Firefox 插件的一部分" src="https://s7./oss/202207/20/31d391399f119bbd04e8772d8020fb1d7bccf4.jpg">

YSlow的Web页面建设在22条可测试的规定基础上，这些规定在下方按关键性和成果陈列。钻研显示，依照以下规定，Web页面照应期间可优化25%到50%：

◆ 尽量缩小HTTP恳求数。

◆ 经常使用内容颁布网络(CDN)。

◆ 参与Expires或Cache-Control头部。

◆ 用Gzip紧缩内容。

◆ 将样式表放在顶部。

◆ 将脚本放在底部。

◆ 防止经常使用CSS表白式。

◆ 将JavaScript和CSS放在外部。

◆ 缩小DNS搜查。

◆ 精简JavaScript和CSS。

◆ 防止经常使用重定向。

◆ 删除重复的脚本。

◆ 性能ETags。

◆ 使Ajax可缓存。

◆ 经常使用GET启动Ajax恳求。

◆ 缩小DOM元素数。

◆ 消弭404失误。

◆ 减小cookie大小。

◆ 对组件经常使用无cookie的域。

◆ 防止经常使用过滤器。

◆ 不在HTML中测量图片大小。

◆ 使favicon.ico尽或许小，可缓存。

如图：图中的YSlow Statistics，对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。

Components选项卡显示了每个组件及关系的性能消息。例如，假设组件被gzip紧缩，或ETag有内容(假设的话)，都能看到。组件大小和超期期间也显示在Components选项卡中，如图所示。

Firebug与Mozilla Firefox集成，在阅读网站时有少量开发工具棘手可用。可以即时编辑、调试、监控Web页面中的CSS、HTML和JavaScript。

可以经常使用Firebug Net面板，如图所示，监控Web页面发生的HTTP流量。它向用户展现了一切搜集到的和计算出的消息。每个条目示意页面的一个恳求/照应来回。

Firebug Console面板，如图所示，提供了两种监控代码性能的方法。

关于某个特定的函数，经常使用Profiler。JavaScript Profiler是能用来测量每个JavaScript代码口头期间的Firebug个性。经常使用JavaScript Profiler来优化代码的性能，或是检查为什么某个函数运转期间过长。它与console.time();相似，但JavaScript Profiler能提供更多代码外部环节细节。

console.time()

关于特定代码段，经常使用console.time()。控制台会显示您输入到命令行的命令的结果。可以经常使用console.time(timeName)函数测量某个特定代码或函数口头多长期间。该个性关于优化JavaScript代码的性能十分有用，样例显示：

measuringTime：xxms将显示在控制台。

完结语

文中，开发者学习了如何识别Web运行程序中的一些疑问或瓶颈。开发者们应了解一些工具、窍门和技巧，以用于调整和改善对用户的性能。

原文：

【编辑介绍】