页面加载提速技术研究

摘要

页面访问速度是影响用户体验的关键因素。本文从页面技术实现角度入手，分析影响页面访问速度的原因，了解网页在加载过程当中需要的步奏，每个步奏花费多少时间以及如何影响整体页面加载速度。

对于人民网等国内主流媒体，应该从整体上考虑用户体验问题，在技术实现上采用创新技术，提高页面加载速度，增加用户体验。本文讨论异步加载技术、长连接（http/1.1）和压缩传输技术才对于页面访问速度的影响，优化现有Web服务的访问速度，解决访问中存在的瓶颈。

关键词：页面加载速度、异步加载、长连接、压缩传输

一、概述

网页的加载速度一直就是一个网站影响用户体验最关键的指标之一，提高页面的加载速度是提高网站用户体验最直接的方法。

在用户平时的网页浏览当中，实际上是将网页内容下载到本地硬盘，然后再用浏览器解释查看，以多媒体的形式展现在用户的电脑屏幕面前。

要研究如何提高网页的加载速度，必须研究页面加载的整体过程以及影响页面加载速度的原因。在影响页面下载时间花费上，可分为以下的几个部分。

1、下载网页布局。将网页整体布局下载到本地的快慢是影响页面显示速度重要因素，网页布局本身所占的空间越小，下载花费的时间就越短。

2、下载网页多媒体。丰富多彩的多媒体给用户带来了富客户端体验，网页中的多媒体都是依据网页布局当中的链接单独下载的，不同的图片在下载的过程当中是属于并行下载的关系。以上两条都是属于下载，影响用户下载速度的主要原因是网络速度。

3、将已下载的页面布局和图片渲染，显示到浏览器的窗口中，和用户机器硬件自身的处理（解析）能力紧密相关。

综上所述，排除带宽、硬件处理能力等因素的影响，为提升网络下载速度，选择适合页面加载文件规则的下载方式，以什么样的顺序渲染网页，都是我们分析页面加载提速问题的关键因素。

以上三个阶段中，前两个阶段对速度影响最大的，下面就以提高网页布局、多媒体下载主线，分析使用HTTP长连接、异步加载和压缩传输三种技术，对于提高网页的加载速度影响。

二、使用的技术及优劣

2.1 下载页面布局的步奏

网页布局的下载，是按照如下的顺序进行的。

浏览器发送一个HTTP请求到Web服务器。Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。HTTP响应通过互联网传送到浏览器。浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。JavaScript资源下载后，浏览器解析并执行它们。

 综合来说，用户需要下载HTML文件、CSS以及JavaScript文件，从而支撑页面结构的加载。

2.2  下载页面布局的优化

从页面设计的角度讲，提高页面访问速度，要求设计者尽量采用div＋css，方式，css太长会影响下载速度，css文件代码超过1000行，定义class或者id数量超过400个的一个css打开载入页面时间是2－3个css代码不超过500行的css文件速度的2倍左右。所以在页面布局设计时考虑用若干个css来代替单一css样式条会提高页面访问速度。

Web页面采用统一背景图片，让一个背景图片全网站通用，同一个背景，可能在不同的频道、位置采用不同的颜色填充，合成的一个通用的样式条模板，也是提高访问速度的一个途径。

现代网站大都按照图（流程图1）所示顺序进行页面加载，如何设计加载顺序，使操作顺序，不互相重叠。利用延时加载JavaScript、并行下载等优化技术解决效率低下问题。

Web服务器和浏览器的执行顺序造成的同步时间瓶颈是影响页面访问速度的一个重要因素。当Web服务器在生成一个页面的过程中，浏览器处于闲置状态，浪费其周期降低了使用效率。当Web服务器完成生成页面，并将其发送到浏览器，浏览器解析速度又成为显示页面性能瓶颈，而Web服务器对其无从帮助。

重叠Web服务器的生成时间与浏览器的渲染时间，用户不仅可以减少最终的时间延迟，也能使网页更早显示可见区域给用户，从而大大减少用户对延迟的感知。这就是通常所说的异步加载技术。

Web服务器的加载时间和浏览器的渲染时间重叠，对于提高访问速度非常有用，如Facebook这样内容丰富的网站。一个典型的Facebook的网页包含许多来源不同的数据资料：好友名单，好友动态，广告等。在传统的网页呈现模式的用户将不得不等到这些查询数据都返回并生成最终文件，然后将其发送到用户的电脑。任何一个查询延迟都将拖慢整个最终文件的生成。通过异步加载技术，加载速度将会成倍增加。

只用建立一次连接，便可以传输多个文件，省去了在多文件传输时耗费在TCP连接建立上的大量时间，效果等于“扩宽道路”。

伴随移动互联网的飞速发展，用户使用手机浏览器机会大大增加，手机（移动终端）由于显示屏大小的限制，访问网上资源，手机浏览器背景下的页面加载速度问题对于用户体验非常关键。依据手机用户的访问请求是与目标站点交互以获取目标页面，并转换所述目标页面以适于手机屏幕显示，因此将服务器目标页面划分并转换成适于手机屏幕显示的多个子页面；依据预设加载条件和用户的浏览操作信息（浏览习惯）依次预加载所述多个子页面中预设子页面以供用户浏览。

系统考虑页面加载方式、页面加载模板和服务器端与手机端转码问题是解决手机用户体验的关键问题。将服务器端目标页面划分为适于手机屏幕显示的多个子页面,根据用户的需要和预下载条件决定是否预下载后续的预设数量的子页面。通过控制预加载的内容篇幅既能保证浏览顺畅,同时还能节省流量为用户减少浏览网页的成本。

2.3  下载网页多媒体的优化

网页中的多媒体都是依据网页布局当中的链接单独下载的，不同的图片在下载的过程当中是属于并行下载的关系。

由于现在的网页因素很丰富，包括文字，图像，动画，音乐等等，打开一个网页就需要下载很多的文件，如何快速的建立多批次的文件下载以及如何同时最快速的下载多个文件。

而通常情况下，页面浏览者的网络环境是相对固定的，网络的传输速度难以得到较大的改变。那么减小传输的文件大小，就变得很直接，压缩传输就是利用这个原理，将需要传输的文件进行压缩，从而达到了减少传输量的作用（展开描述压缩传输）。

技术人员可以考虑并行批次下载以及对下载的文件进行压缩这两个方面，“扩宽路面”和“减少车流”两手抓的策略提高页面访问速度。

从“扩宽路面”这个角度上分析，在网络条件不变的情况下，加载多媒体文件最大的问题是文件过于的繁杂，TCP连接重复的建立。

众所周知，HTTP/1.0 的运作模式是由客户端与服务器端的三次握手的连接过程,在你来我往中建立连接，但完成任务后是，需要发回网络包来关闭建立的TCP连接。一个页面有很多小数据元素时，或者页面元素很多时，建立与关闭的网络包将充斥在网络中，肯定会对页面载入的速度有一定影响。

改良版(HTTP/1.1)终于提出了个持久连接的概念，简单而形象的描述就是一个绳(HTTP连接)上拴多个蚱蜢(多个请求)，在服务器端发送回响后并不马上关闭连接，优点是连接数少了，但维持连接对服务器端来说是需要消耗资源的，所以在配置Apache部分时可以酌情修改自己的KeepAlive Timeout,极大地减少了连接反复的建立与断开。

而从“减少车流”这个方面入手，就是要减少加载页面时需要传输的数据。

在浏览网页的时候，浏览器需要把网页上的内容，包括网页HTML，CSS，JS，FLASH和图片等下载到本地，然后把它们显示出来。如果网页上的内容是固定的，下载速度也不是能随意控制的，但下载的大小则可以控制，仅需在传送的过程中先把内容压缩一下即可。

在压缩传输的技术背景下，可以在传输同样内容的前提下，却只需要传输更少的数据，达到了“减少车流”的作用。

三、异步加载技术使用及对比

作为现在主流的异步加载技术，有一种很好的思路可以帮助我们完成对网页加载速度的提升。

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成为Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是对现有的服务网络基础过程的重新设计，但它却不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。

使用BigPipe技术，可以在现有的服务器以及客户端条件下，最大限度的提高网页在加载网页结构部分的加载效率。相比于传统的Ajax，BigPipe 比AJAX 有三个好处：

1. AJAX 的核心是XMLHttpRequest，客户端需要异步的向服务器端发送请求，然后将传送过来的内容动态添加到网页上。如此实现存在一些缺陷，即发送往返请求需要耗费时间，而BigPipe 技术使浏览器并不需要发送XMLHttpRequest 请求，这样就节省时间损耗。

2. 使用AJAX时，浏览器和服务器的工作顺序执行。服务器必须等待浏览器的请求，这样就会造成服务器的空闲。浏览器工作时，服务器在等待，而服务器工作时，浏览器在等待，这也是一种性能的浪费。使用BigPipe，浏览器和服务器可以并行同时工作，服务器不需要等待浏览器的请求，而是一直处于加载页面内容的工作阶段，这就会使效率得到更大的提高。

3. 减少浏览器发送端请求。对一个5亿用户的网站来说，减少了使用AJAX额外带来的请求，会减少服务器的负载，同样会带来很大的性能提升。

一般来讲，在页面比较大，而且比较复杂，样式表和脚本比较多的情况下，使用BigPipe 来优化输出页面是比较合适的。其中非常重要的一点是，BigPipe 并不改变浏览器的结构与网络协议，仅使用JS就可以实现，用户不需要做任何的设置，就会看到明显的访问时间缩短。

四、长连接与压缩传输

4.1 长连接的使用设计

HTTP是无状态的，也就是说，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。如果客户端浏览器访问的某个HTML或其他类型的 Web页中包含有其他的Web资源，如JavaScript文件、图像文件、CSS文件等；当浏览器每遇到这样一个Web资源，就会建立一个HTTP会话。

HTTP1.1和HTTP1.0相比较而言，最大的区别就是增加了持久连接支持(貌似最新的 http1.0可以显示的指定 keep-alive),但还是无状态的，或者说是不可以信任的。如果浏览器或者服务器在其头信息加入了这行代码   Connection:keep-alive   TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了带宽。实现长连接要客户端和服务端都支持长连接。如果web服务器端看到这里的值为“Keep-Alive”，或者看到请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接），它就可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。

要实现这一点， web服务器需要在返回给客户端HTTP头信息中发送一个Content-Length（返回信息正文的长度）头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小无论客户端浏览器 (Internet Explorer) 还是 Web 服务器具有较低的 KeepAlive 值，它都将是限制因素。例如，如果客户端的超时值是两分钟，而 Web 服务器的超时值是一分钟，则最大超时值是一分钟。客户端或服务器都可以是限制因素在header中加入 --Connection:keep-alive 在HTTp协议请求和响应中加入这条就能维持长连接。再封装HTTP消息数据体的消息应用就显的非常简单易用

新的问题出现了，如果前一个请求没完，后一个就肯定是在等待状态了，那么持久连接就是个等待状态的连接，而不是把时间花在数据的发送/接受上了。所以有时打开网页的速度和你和网络，服务器的压力，网络之外，还有一个原因，就是浏览器本身的并发。

基于HTTP/1.1的Pipelining很好的解决了这个问题，开启Pipelining，它可以在持久连接上再次提速，即浏览器在一个持久连接里一次给服务器端发送多个请求，而如果有缓存的话服务器端回个304就可告之浏览器此数据无更改，即可呈现给用户。

4.2 压缩传输的使用设计

在压缩的方法上，现行最常用的是Gzip传输。Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台。当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小。这取决于文件中的内容。

利用Apache中的Gzip模块，用户可以使用Gzip压缩算法来对Apache服务器发布的网页内容进行压缩后再传输到客户端浏览器。这样经过压缩后实际上降低了网络传输的字节数，最大的优点就是可以加快网页加载的速度。

网页加载速度加快的优点不言而喻，除了节省流量，改善用户的浏览体验外，另一个潜在的优点是Gzip与搜索引擎的抓取工具有着更好的关系。例如Google就可以通过直接读取gzip文件来比普通手工抓取更快地检索网页。在Google网站管理员工具（Google Webmaster Tools）中你可以看到，sitemap.xml.gz 是直接作为Sitemap被提交的。

而这些优点并不仅仅限于静态内容，PHP动态页面和其他动态生成的内容均可以通过使用Apache压缩模块压缩，加上其他的性能调整机制和相应的服务器端缓存规则，这可以大大提高网站的性能。因此，对于部署在Linux服务器上的PHP程序，在服务器支持的情况下，往往都开启使用Gzip Web压缩。

使用Gzip这样的技术，可以在传输同样内容的前提下，却只需要传输更少的数据，达到了“减少车流”的作用。

在长连接和网页压缩传输，这两者之间是不冲突的，从不同的两个方面优化了网页的加载速度，如果同时使用，必将会达到“扩宽道路”和“减少车流”的作用，众所周知，这样的效果叠加不是简单的加和，而是平方的关系。将对网页的加载速度有更不行的改变。

五、技术性能简单测试与分析

5.1  异步加载技术——BigPipe性能分析

BigPipe技术现在使用最广的是社交网站facebook，他们针对BigPipe做了数据对比。

下图是传统模式和BigPipe性能数据比较图，数据是75%用户对一个页面中最重要的内容（例如：新闻动态被认为是在Facebook主页上最重要的内容）的感知延迟时间。收集数据方式是加载Facebook主页50次并且禁用浏览器缓存。该图显示BigPipe使用户在大多数浏览器中感受到的延迟减少了一半。

 (Facebook主页的延迟时间对比)

值得一提的是BigPipe是从微处理器的流水线中得到启发。然而，他们的流水线过程之间存在一些差异。例如，虽然大多数阶段BigPipe只能操作一次Pagelet，但有时多个Pagelets的CSS和JavaScript下载却可以同时运作，这类似于超标量微处理器。BigPipe另一个重要区别是，用户实现了从并行编程引入的“障碍”概念，所有的Pagelets要完成一个特定阶段，如多个Pagelet显示区，它们都可以进行进一步JavaScript下载和执行。

5.2  http1.1长连接性能简单测试

为了了解http 1.1 中的长连接功能，理想的环境中，对性能的影响，所以做了简单测试，以下是测试结果。

未使用长连接

01 02 03 04 05 06 07 08 09 10 11

Concurrency Level: 200 Time taken for tests: 7.016 seconds Complete requests: 30000 Failed requests: 0 Write errors: 0 Total transferred: 134524481 bytes HTML transferred: 122884096 bytes Requests per second: 4275.85 [#/sec] (mean) Time per request: 46.774 [ms] (mean) Time per request: 0.234 [ms] (mean, across all concurrent requests) Transfer rate: 18724.15 [Kbytes/sec] received

使用长连接

01 02 03 04 05 06 07 08 09 10 11 12

Concurrency Level: 200 Time taken for tests: 5.006 seconds Complete requests: 30000 Failed requests: 0 Write errors: 0 Keep-Alive requests: 30000 Total transferred: 135338747 bytes HTML transferred: 123486848 bytes Requests per second: 5992.49 [#/sec] (mean) Time per request: 33.375 [ms] (mean) Time per request: 0.167 [ms] (mean, across all concurrent requests) Transfer rate: 26400.24 [Kbytes/sec] received

由以上对比结果可知，在理想的环境中，如果打开长连接，响应的延迟明显的降低，传输时间明显缩短。虽然只是一个很简单的连接测试，但仍体现出了长连接对于性能的提升。

5.3  压缩传输性能分析

GZIP压缩的比率往往在3到10倍，也就是本来90k大小的页面，采用压缩后实际传输的内容大小只有28至30K大小，这可以大大节省服务器的网络带宽，同时如果应用程序的响应足够快时，网站的速度瓶颈就转到了网络的传输速度上，因此内容压缩后就可以大大的提升页面的浏览速度。（注：服务器发来的response响应里有一个字段content-encoded entitybody(gzip)，标识了压缩后和压缩前的页面大小）

在实际应用中，并不需要对网站所有文件都进行压缩，只需要对静态文件进行压缩就可以了，包括js、css及html文件。对其他文件进行压缩并不会对WEB性能有太多的改观，并且对网站开启GZIP功能是需要牺牲部分服务器性能的。对于FLASH文件来说开启GZIP压缩之后还会影响其效果。检查网页是否进行GZIP压缩过，可以使用FireFox的YSlow插件。

六、总结

通过以上的技术，用户在页面加载的不同阶段，使用互不干扰的技术，包括异步加载技术、长连接（http/1.1）和压缩传输技术，可大大缩短了页面加载的时间。

利用这些技术，使得用户平时所看到的网页，得以最快速度呈现出来。同时，现在各大搜索引擎都将网站的加载速度列入了网站搜索排名的计算因素中，更快的加载速度更利于用户搜索到目标网站。因此提高服务器端服务和应用内容的用户加载速度，对于基于新闻类的综合网络服务运营商来讲非常重要。同时，考虑目前智能手机在国内迅猛发展态势，智能手机的内容推送设计模式对于用户体验来讲也是非常重要的。