优化网页速度的解决方案

1. 网页速度优化

网站的加载速度是很多web工程师都面临的问题,对于一个网站来说,加快网站访问速度不但提高了用户体验,而且对于SEO也有很大的影响。网页的加载速度快了,搜索引擎蜘蛛抓取的页面也就多了,从而增加了收录、增长了流量。那么在网页速度优化方面应该从哪些方面入手?

1) 尽可能的减少页面中的dom元素,清除网页中一些冗余的代码。如果需要的化,我们可以把代码中的注释去掉,甚至空行空格之类的也去掉。这样可以加快浏览器的加载速度和渲染速度。

2) CSS Sprites,可以把网站中一些比较通用的图片进行合并,然后利用CSS背景定位技术来调用图片的不同部分,这样可以大大的减少HTTP的请求。

3) 为图片指定宽度与高度,为每一个图片都指定一个width属性与height属性,浏览器会预先留出既定的位置,图片下边的代码可以继续加载而不用等待。

4) 优化图片的大小,将每一张图片都保存成web所用格式,并将质量优化到50-65之间。色彩丰富的图片使用jpg格式,色彩单一的图片使用gif格式,需要设置透明度的图片使用png格式。

5) 使用浏览器缓存,为一些不经常变化的文件设置一个相对较长的过期时间,留在缓存中的文件就不用再向服务器发出HTTP请求了,这样减少了浏览器向服务器发出的HTTP请求数。

6) 在服务器端启用GZIP压缩,当启用了GZIP后,网站服务器向客户端传输数据之前,是经过压缩了的,从而减小了浏览器的负载量。

7) 将css样式表放在html页面头部进行预加载,尽量不要在样式中使用css表达式。

8) 将js代码放在html页面底部最后加载。

9) 尽量不要再html页面中插入iframe。

2. 网页加载及渲染

2.1. 网页加载顺序

1) IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

2) 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)

3) 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载,阻塞加载。

4) 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建。

5) 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

6) JS、CSS中如有重定义,后定义函数将覆盖前定义函数DOM树的情况,所以 就会阻塞其他的下载和呈现。

2.2. html页面加载解析流程

1) 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

2) 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件;

3) 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

4) 浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

5) 浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

6) 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

7) 浏览器发现了一个包含一行Javascript代码的标签,赶快运行它;

8) Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个

(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

9) 终于等到了的到来,浏览器泪流满面……

10) 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下标签的CSS路径;

11) 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

3. 网页速度优化工具

3.1. firefox插件firebug

1) Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件。

2) 它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。

3) Firebug从各个不同的角度剖析Web页面内部的细节层面,可以监控请求头、响应头、显示资源加载瀑布图,给Web开发者带来很大的便利。

3.2. yahoo开发工具yslow

1) 安装YSlow必须首先先安装 Firebug。

2) YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

3) YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。

3.3. page speed

1) Page Speed 是开源 Firefox/Firebug 插件。

2) Page Speed 对网站的网络服务器配置和前端代码执行若干测试。这些测试基于一组已知可增强网页性能的最佳实践。

3) 在网页上运行 Page Speed 的网站管理员会获得一组针对各网页的分数,以及有关如何改善网页性能的有用建议。

3.4. httpwatch

1) HttpWatch是强大的网页数据分析工具。

2) 它是集成在Internet Explorer工具栏。

3) HttpWatch 是一款能够收集并显示页页深层的信息。它能够在显示网页同时显示网页请求和回应的日志信息。甚至可以显示浏览器缓存和IE之间的交换信息。

4) 每一个HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。


相关推荐