当前位置: 代码迷 >> Web前端 >> 怎么提高网页速度
  详细解决方案

怎么提高网页速度

热度:190   发布时间:2012-10-24 14:15:58.0
如何提高网页速度
1.适当压缩图片,选择合适的图片类型(jpg,gif,png);
a.jpg图片适合色彩丰富或使用了过渡色的图像,选择适当的压缩比,通常仅降低5%的优化度,却可以大大降低图片的k数。
b.gif图片适合于色彩简单无过渡色的图像,经过fireworks优化过的gif图可以获得较理想的k数。
c.png图片适用于对图像质量要求较高或需要透明效果的图片。

2.标明图片宽度和高度
<img src="xxx.jpg" width="100" height="100" alt="pic" />
这样书写图片可以降低浏览器解析页面时的负担,显示标明宽高,即使在图片未被加载的情况下也能补足应占据的空间,不会破坏页面布局

3.整合背景图
将页面背景图整合到一张大图中,减少页面请求数,对于背景图较多的页面,可显著提高网页打开速度。

4.不使用多层嵌套的表格
在需要使用表格的情况下,尽可能减少表格的嵌套层数,层数越多浏览器打开页面速度越慢
5.css样式简写
尽可能使用样式的简写形式。
6. 合并css和js文件并压缩。
(工具:YUI compressor、JSMIN)

7.对于指向目录的链接,网址后加斜杠"/"
比如 “http://www.seo-china.net” 应写为http://]http://www.seo-china.net/

8.尽量使用统一的域来请求图片和其它外部文件 www.seo-china | image.seo-china | image2.seo-china | mobile.seo-china ...
比如现在页面中有很多的请求来自image.seo-china.net/TLimages , image2.seo-china.net/TLimages 和 www.seo-china.net/TLimages ,其实在页面中可以只采用一种域名,因为浏览器在多个域之间频繁切换请求是极消耗时间的!
在测试中分别建立了两个引入4个外部js文件的html页面,其中一个采用统一的image.seo-china.net作为外部文件的请求域名,另一个为四个请求制定了不同的请求域名,结果是采用统一域名的页面的平均读取时间为0.5秒,最高2秒,而非统一请求域的页面平均为1.5秒,最高达6秒,
测试虽不精确,但结果是明显的。

9.优化广告代码的后显方式。
现在的广告基本采用后显方式,但是广告数量多时会向服务器产生较多的请求,建议研究更高效的广告显示方式。

10. 尽量将样式写在页面上。
两点好处:(1) 减少请求数 (2)杜绝了页面裸奔的情况
对于文章页这类静态化的页面,为了便于维护样式,建议使用include的方式引入页面样式,兼顾了效率和维护性。

11.为<link>和<script>标签添加type属性

12.加入特殊meta标签,使兼容IE7
<meta http-equiv="X-UA-Compatible" content="IE=7" />

13.相同域的请求尽量放在一起。
例如:下面B的写法就要好于A
A.
<link href="http://www.seo-china.net/c1.css />
<link href="http://www.phplovers.com/c2.css />
<link href="http://www.seo-china.net/c3.css />
<link href="http://www.phplovers.com/c4.css />
B.
<link href="http://www.seo-china.net/c1.css />
<link href="http://www.seo-china.net/c2.css />
<link href="http://www.phplovers.com/c3.css />
<link href="http://www.phplovers.com/c4.css />
  相关解决方案