dynaTrace之一 —— 网络请求和往返的最佳实践

 

原文地址：Best Practices on Network Requests and Roundtrips

同类文章：dynaTrace之二 —— JavaScript和AJAX性能最佳实践

 

网络请求和往返的最佳实践 

当输入url，浏览器最先请求的是HTML文档。其次是相关图片、css、js文件和其他媒体文件比如flash组件等等。每个资源的下载都需要建立一个连接。一个页面所有资源的下载时间取决于网络速度、潜在因素、服务器处理速度。下载的资源越多，用户看到完整页面花费的时间越多。

为了下载这些资源，浏览器和服务器建立了物理连接。连接的数量取决于浏览器类型和版本，比如：IE7每个主机名并行下载两个组件，IE8/FF3.5每个主机名并行下载六个组件。

网页资源越多，发起的HTTP请求就越多。由于并行下载数的限制，有些资源必须等待很长的时间才能下载，这就增加了整个页面的加载时间。

下图是一个典型的网络下载图。很明显，从一个域名下载的资源越多，其他单个资源的等待时间越长： 

 

优化网站，需要避免不必要的往返和减小单个资源的大小（《高性能网站建设指南》规则4——压缩组件）。这使得浏览器的可用连接更快地下载所有资源，并且加快页面加载速度，提高终端用户的体验。

避免重定向，HTTP 400和 HTTP 500

HTTP 300（重定向）有时是有必要使用的，比如：表明某个资源的新位置或追踪点击。

重定向意味着浏览器必须采取更多操作来实现请求。重定向会使你的网页变慢。它延迟了整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现出任何东西，也没有任何组件会被下载。在用户和HTML文档间插入重定向延迟了页面中的所有东西。 

因为一开始必须执行重定向，浏览器总共花了430ms下载HTML文件。一旦HTML文件下载完，浏览器才开始下载其他资源比如CSS文件： 

另一个不必要往返的例子是上面的这个请求导致了一个HTTP 400错误（认证问题），用户没有得到他请求的内容。

导致HTTP 400错误有两种常用来源：a) 用户不能访问应用程序代码生成的HTML的相关资源，比如：如果我不是网站的特别成员，我可能没有下载某些资源的权限。b) 对资源的访问控制发生了配置错误，或者资源错误得部署到加过安全设置的文件下。

HTTP 500（服务器端错误）是由失败的应用代码，要解决这个问题必须跟踪到应用服务器端分析代码。

dynaTrace AJAX Edition在Network面板的性能报告中列出了所有的HTTP 300，400,500。哪个请求（url列）返回了哪种状态，并且告诉你避免这些请求可以节省多少时间。

资源的常见问题模式

过多images,css,js文件

网站不止展示包含文本的html文件。大部分内容来自图片和样式，决定了页面内容的如何呈现，如何布局，包含客户端代码的js文件使网站拥有更多的用户交互。

dynaTrace AJAX Edition在Network面板的性能报告中列出了所有css,images,js文件。还给出了当合并这些资源后减少请求往返节省的时间。

臃肿的图片，css和js文件

除了需要关注资源的数量，还需要关注资源的大小。有很多种方法来减少图片的大小（选择不同的图片格式或者其他）和css、js文件（压缩空格和空行）。 Smush.it 提供了优化图片大小的在线服务。

dynaTrace AJAX Edition在性能报告中的KPI面板的第一个表格给出了所有对象的概况。展示了每种mime类型的资源数量、总大小和这些资源是否被缓存。请参考the Best Practices on Caching怎样如何优化使用浏览器缓存： 

建议：

减少图片、css和js不仅加速了网站的载入，而且降低了浏览器内存占用和CPU的使用。以下是一些如何优化资源的技巧。

优化图片（CSS精灵和压缩）

分析所有图片，合并成一个单一文件。不要太过火，把所有图片都合并到一个大图里，以至于所有页面都要加载一个超大的文件。在合并文件之前请详细请阅读 CSS Sprites 和 Best Practices 。看看图片的大小。考虑下其他图片格式（jpg,gif,…）或者选择较低分辨率以减少图片的大小。通过 Smush.it 优化你的图片。

附：Best Practices 的 中文翻译

优化CSS（合并CSS文件）

如果一个页面有多个CSS文件，压缩文件，去掉空格、空行或注释去掉该文件。这样不仅减少了网络往返，也减少了传输内容，减少浏览器的解析时间。阅读 combining and merging CSS files，利用在线压缩工具 例如Online CSS Compressor

优化JS

同理，在线压缩工具JavaScript compressors/minifiers。不要把所有js都放在一个文件里，每个页面都去加载他。

计算范围

dynaTrace AJAX Edition计算出来的分数基于可避免的http请求数量。如果页面没有重定向，400和500，也没有图片、css、js可以合并，得分就是100.

dynaTrace AJAX Edition假设所有images、css、js都来自同一个域，不得超过1个css，6个images，2个js。

如何得到这个数字的?

我们认为所有来自同一个域的css都可以合并到同一个文件中。

至少需要2个js文件，页面早期的js和延迟加载的js。

不是每一个图像都可以合并到同一个文件，6个图像比较合理——这样浏览器可以最佳利用其物理连接

 

 

同类文章：dynaTrace之二 —— JavaScript和AJAX性能最佳实践