码迷,mamicode.com
首页 > Web开发 > 详细

优化网页速度的解决方案(转载)

时间:2015-07-19 17:48:48      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:

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

优化网页速度的解决方案(转载)

标签:

原文地址:http://www.cnblogs.com/xg1010831107/p/optimization.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!