影响网页加载速度的因素有哪些及优化方案

网页打开速度是影响用户体验的首要因素。

硬件因素包括：服务器端、客户端和网速。服务器端主要包括：服务器的地 域，是否双线，处理能力等等；客户端的因素主要包括：用户的硬件配置、用户使用的浏览器、是否有恶意插件病毒等等；网速当然也是一个制约网页打开速度的重 要因素。

硬件因素的改进有其先天的障碍，比如：我们不能强制用户使用多大的带 宽，或者要求用户使用某种浏览器等。相对于网站的所有者或者开发者来说，可以选择双线、高处理能力、近地域的服务器。

软件因素是指：制作网站采用的不同技术。主要包括：

第一：页面是动态还是静态。动态页面.jsp或者.asp等等ASP、PHP、JSP等程序实现了网页信息的动态交互，运行起来的确非 常方便，因为它们的数据交互性好，能很方便地存取、更改数据库的内容，使网站“动”起 来，如：论坛、留言板等。但是这类程序必须先由服务器执行处理后，生成HTML页面，然后再“送”往 客户端浏览，这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序，网页显示速度肯定会慢。

第二：页面的HTML代 码量。浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘，再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比 重，所以，网页本身所占的空间越小，那么浏览速度就会越快。

第三：对图片的处理。包括图片采用的格式、图片的数量、图片的大小等。根 据图片的清晰度要求、大小透明度等等分别设置不同的图片格式如jpg、gif、png，可以适当的减少图片的大小；图片的大小和代码量 一样，因为loading量 的不同会影响网页的打开速度；图片的数量是影响页面打开速度关键因素，首先：图片数量多了，需要的的loading量必然增大；其次：最重要的是，浏览器每次下载图片都要去服务器提 交一次请求，服务器响应后找到相应的图片地址，才会把图片下载到本地硬盘。图片数量越多，需要服务器请求的链接也就越多，会给服务器造成较大的压力，速度 会明显变慢。

第四：CSS/JS的 代码量和引入方式。CSS（控制页面的显 示，JS用于制作页面的动态 效果，同样需要用户下载到机器上后再被浏览器解析执行。CSS/JS代码量也会影响网页的打开速度。而一直被大家忽视的引入方式，也是影响网速重要原因，引入方式的不同关系到解析代码中的无用代码比 例，无用代码引入越多，解析越慢。不同的引入方式也关系到整站的代码量、后期优化工作量等。

第五：HTML制作采用的技术。用Table布局和用Div布局的同一页面，使用Table布局的页面比使用Div布局的页面打开速度要慢很多，并且用户体验差。原因是，Table布局的页面只有在整个Table里的内容都loading完成时才一下显示出来，而用Div布局的页面会逐块显示。因此用Div布局的同一页面能留住更多的用户。

解决方案：

1.采用背景图合并。背景图合并技术是一门DIV+CSS的熟练使用和PS合图相结合的技术。通过精确到1px的CSS设置，使用PS合成背景图片，特别是小图合并，在完全不改变原来效果的情况下，大量减少页面需loading图片数量，从而大幅降低了服务器的压力，提高页面的打开速度。

2.外部引入CSS样式。采用这种方法，最能体现DIV+CSS中的内容与显示分离的思想。我们可以通过一个CSS文件控制多个不同的页面，对于整站而言，减少了大量的代码；同时，修改一个CSS文件就可以改变多个页面的显示效果，因此这种方式也是最易 改版维护的方法；最后，因为直接写在页面的样式控制CSS最少， 所以这种方法也是页面代码最简洁的方法，有利于前后端人员之间的配合。

3.用div+css布局，不要用table布局.

Div+Css布局方法相对于前两种来 说已经比较普及，优势也是对比使用Table布局而言。主要有以下的特点：

（1）大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
     （2.）结构清晰，容易被搜索引擎搜索到。是 做SEO的基础技术。
     （3.）缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
     （4）强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样 式等等。
     （5）CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
     （6）提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增 加更多的用户而不需要建立独立的版本。
     （7）可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
     （8）更好的控制页面布局。
     （9）表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未 来网页无效的可能。
     （10）更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的 内容，并可能给你一个较高的评价(ranking)。
     （11）Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
     （12）Table布局中， 垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
     （13）以前一些非得通过图 片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
     （14）使页面的字体变得更 漂亮，更容易编排，使页面真正赏心悦目。
     （15）你可以轻松地控制页 面的布局 。
     （16）你可以将许多网页的风格格式同时更新，不用再一页一页 地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

4.根据需求的不同使用不同的图片格式。

图片影响网页打开速度主要从三个方面：图片的数量、图片的大小、图片的颜色种类。常见格式有.jpg,.gif,.png。Png格式支持半透明，我们在需要半透明的情况下使 用，并且同时要注意ie6里 不兼容的情况。Jpg的颜色 值较多，一般是照片、广告图等较大效果较突出的图片使用的格式。Gif颜色值较少，最多支持256种颜色，一般是小图、边角、背景灯图片采用的格式。另外我们可以通过设置图片的质量来改变图片的大小，同样影响页面的打开速度。

5.删除冗余代码。

手写代码和用工具生成的代码又很大的不同，用工具生成的代码往往有好多的冗余无用的代码，用table布局实现同一效果 的代码量也比DIV+CSS实 现的代码量大很多。所以最好手写代码。

6.优化精简代码。例：CSS代码精简写法：把background-color，background-position，background-image等合成一个background来设置。把padding-top，padding-right，padding-bottom，padding-left合成一个padding来使用

7.动态效果尽量使用js而不用flash。

8.使用对系统压力较小的算法。