网页载入速度优化

作者: JerryHouse 分类: web 发布时间: 2015-12-29 10:22 ė 6网页载入速度优化已关闭评论

要优化网页的载入速度,首先要知道从用户发起请求到页面被完全展现依次经历了哪些步骤:1)域名解析 2)建立http链接 3)浏览器发送http请求 4)服务器返回页面内容 5)浏览器接收页面,下载静态资源,例如:图片,CSS,JS 5)浏览器进行渲染,页面载入缓慢时应该对依次对这些环节进行检查。
1. 域名解析和网络链接检查
DNS服务器将域名映射为IP地址,浏览器通过IP地址和服务器建立链接,这一过程耗费的时间在20-120ms。通过ping命令可以方便的查看域名解析是否正确,网络连接是否正常以及网络时延,如果有问题,需要联系相应的服务商。
虽然浏览器会缓存域名解析的,但是用户首次访问网站时缓存不会命中,因此如果在页面资源中使用太多不同的域名,也会增加DNS解析时间,从而降低页面载入速度。
2. 服务器返回页面内容
通过浏览器中的开发者工具可以方便的查看页面资源载入的先后顺序和花费的时间,例如图1是访问www.dcharm.com的网络请求时序分析。其中www.dcharm.com所在行是服务器返回页面内容所花费的时间,剩余是浏览器载入其他静态资源的时间。如果服务器返回页面内容所花费的时间很长,那么应该想办法提高服务性能,例如:数据缓存,页面静态化,数据库索引优化,数据库读写分离,数据库拆分,服务化等优化技术。
开发者工具图1
给定网络传输速度,对响应内容进行压缩可以大大减少传输数据大小,从而达到缩短网络传输时间的目的。Gzip是目前最流行也最有效的压缩技术,能够减少70%左右的数据大小,并且90%的浏览器都支持gzip。
3.静态资源下载
按照雅虎的调查,页面载入时间的80%用在了载入静态资源:图片,CSS文件,JS文件,Flash等,因此优化静态资源载入时间最能改进页面载入速度。
用户距离资源服务器的物理距离会影响到资源载入时间,距离越近,则载入越快,使用CDN技术可以很好地减少静态资源载入时间。
浏览器可以缓存http请求结果,缓存命中时浏览器直接使用缓存中的结果而不用再次发起http请求。web服务器应该在响应请求头部告诉浏览器哪些资源是可以被缓存的,可以缓存多少时间,当缓存命中时可以大大减少资源载入时间。
除了压缩以外,另一种减少CSS文件或者JS文件数据大小的方式就是减少文件中的注释,空格符,换行符等不必要的字符,目前jquery的发布就采取这种形式。常用的去除CSS文件或者JS文件不必要的字符的工具是YUI Compressor。
http本身是无状态的,因此很多网页使用cookies来保存用户的登录状态或者个性化信息,cookie中的内容通过http头部在浏览器和服务器之间进行交换,因此尽可能的减小cookie中存储的内容可以降低页面载入时间。如果静态资源和页面内容在同一个域名下,浏览器访问静态资源时也会在请求中带上cookie中的内容,因此静态资源需要使用与web服务不同的域名。
在给定展示效果的前提下,适当调整图片的尺寸和对图片进行压缩。例如商品列表页使用的图片尺寸往往要小于商品详情页的图片尺寸。
4.渲染
将CSS文件放在页面的头部可以使得页面看起来载入更快,因为这样浏览器可以先渲染部分内容,而不是等到整个页面都载入以后再进行渲染。不要一次载入页面中所有的图片,而只是载入用户焦点所在区域的图片,因为很多时候用户不会往下拉,即使图片被载入了,用户还是不会看到。

本文出自 dcharm,转载时请注明出处及相应链接。

本文永久链接: http://www.dcharm.com/?p=510

Ɣ回顶部