[原创]提高页面loadtime的几个方法

Satellite 楼主

很久没写技术方面的东西，是因为在做了一段时间的技术以后我越发发现，学什么技术或者技术应该钻研到什么层次真的不是最重要的，最重要的是解决问题的方法和能力。所以以后如果再写技术类的文章，定要少些技术细节，多一些方法和思路，今天就给大家介绍几个提高页面装载时间的方法，都是我在工作当中实践出来的经验。

首先给大家列出几个阻碍loadtime提高的因素，有不足的欢迎补充：
1、页面大小；
2、页面连接数；
3、服务器抗压能力；
4、网络状况（包括带宽和网段等因素）；

一、页面大小
页面大小是指页面内容的字节数。
在同等网络环境下，页面越小自然下载时间越快，所以在合理范围内减少页面大小是可以优化下载速度的。而页面大小主要是由HTML的代码量来决定的（当然也可能包括一些css或者js的代码，不过主体还是HTML代码），要想减小页面的大小，就得根据W3C的标准来优化HTML代码结构，去除一些垃圾无意义的代码，前2年轰轰烈烈的web重构大致就是这个意思。如果你对web标准或者web重构不了解，可以去google一下这方面的内容，不过国内很多学习者对web重构的理解有偏差，单一地认为是用div+css取代table布局，这种观点就不必去理会了。

二、页面连接数
页面连接数是指浏览器从服务器上下载完当前页面以及其所需资源的过程中向服务器发出的请求次数。
举个例子，一个页面文件当中包括一张图片、一个外联的css文件和一个外联的js文件，那么完全下载完这个页面所需要对服务器发送的请求就是4个（当前页面html、图片、css和js各占一个连接数），该页面的连接数也就是4个。
服务器处理连接数是需要耗费资源和时间的，所以多次少取不如少次多取。
就好比方说你和你五个哥们一起去买车票，总共只有一个售票窗口，是5个人排队各买各的快还是一个人排队买5个人的快呢?答案很明显。
所以降低页面连接数是非常有必要并且非常有效的办法。
那么如果来降低页面连接数呢？这里有一些技巧，比如写css需要用到背景图片的时候，能用一张解决问题的绝不用两张，甚至最好不用图片，我本人就非常喜欢无图片的绿色环保的css代码。
还有就是能统一到一个文件里面的尽量统一到一个文件里面，比如js文件和css文件都没有必要外联，都可以吐到一个相应的html代码中间，让服务器一次性发送给浏览器，这样的好处有很多：首先可以减少页面连接数，其次可以避免由于网络问题造成的页面裸奔现象（没有css修饰的页面就是裸奔）和js功能函数没load完造成页面功能不完整的现象。
看到这里，有的哥们可能会问，把js和css代码都写在一个页面里面岂不是很不好维护么？web标准不是崇尚结构和表现分离，结构与行为分离么？然也， web标准确实是对的。但是把js和css代码与HTML搞在一起只是给浏览器看的，有很多的方法可以做到页面生成之前css、js和HTML都是完全分离的，而生成的页面却是三者的综合体。比如apache的页面拼装功能，或者smarty中的模版嵌套功能等。
另外，设置浏览器的页面缓存也是一个不错的办法，能非常有效地降低页面连接数，提高页面加载速度。当然这只是针对那些实时性不强的网站来说。

三、服务器抗压能力
服务器抗压能力通常指的是服务器所能承受的最大访问人数。
这是一个硬件指标，不过也可以通过对软件和页面的优化来提高服务器的抗压能力。
这里的服务器主要包括两项，一个是http的服务器（apache或者iis），还有一个是数据库服务器。
这是所说的优化主要是有效减少服务器的连接数、提高程序执行效率，比如静态化页面或者使用缓存可以减少数据库的压力，减少页面连接数可以减少http服务器的压力等。还可以通过安装一些软件或者模块来达到这个目的，比如zend的php加速引擎，以及apc等。

四、网络状况
网络状况指的是用户当前的网络环境。
比如是拨号用户还是宽带用户，带宽是512k还是1M等等，这些硬件指标就像通向你电脑的管道，管道越大，相同时间内下载的东西就越多，速度自然就越快了。
当然这个因素不是网站开发者可以去控制的。

以上就是我总结出来的几个提高页面loadtime的方法，有什么不足的地方还希望大家能补充一下，多多益善。

我的blog地址是http://www.achome.cn/blog
欢迎大家多来交流：）