优化网页速度的解决方案

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等格式。