太狼文摘 记录 & 思辨

网站速度优化总结(译文)

The Web - 2010/12/5

    其实一直很想将看的书中的知识通过自己的博客记录下来,一来可以与大家分享一下,二来希望能够提高博客的点击率。

   话说这是本博客开博以来的第一片技术性博文,虽然不是原创,但还是要呼呼一下!

     网站优化经验:

  1. 减少HTTP请求数——每次用户打开一个网页的时候,后台相应其实很快,主要的时间花在了下载网页元素上了,即HTML、CSS、Javascript、图片等等。所以,1)减少不必要的HTTP的请求,例如用CSS圆角代替圆角图片,减少图片的使用;    2)合并文件,像CSS、js文件等尽量保持一个文件即可,针对大的图片,最好进行切片,然后采用样式表贴片定位的方式(CSS sprites)进行图片拼接       PS:网易招聘网站就是图片拼接的     3)内嵌图片    通常情况下,将图片使用data: URL Scheme 方式将图片嵌入到实际的页面中,但是这样增加了HTML文件的大小。所以,可以通过内嵌图像与样式表结合的方式减少HTML文件的大小并且减少HTTP的请求    4)优化缓存,对于没有变化的网页元素,用户再次访问的时候没有必要重新下载,直接读取浏览器缓存。额,技术层面,还是记录一下吧,虽然我不懂!!!技术层面,通过Expires Header可以告诉浏览器一个元素可以缓存的时间长度,例如 Expires: Thu, 15 Apr 2010 20:00:00 GMT。设定Etags可以帮助浏览器确定缓存中元素是否与服务器端的元素匹配。当然,这种方式的前提是用户曾经浏览过该网站并在浏览器中有相关的缓存文件。   HTTP/1.1 200 OK                                                                         Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

                                                                             ETag: “10c24bc-4ab-457e1c1f”

                                                                             Content-Length: 12195

  2. 使用内容分发网络(CDN,content delivery network)  用户与你网站服务器的接近程度会影响响应时间的长短,把网站内容分散到各个不同的地域位置上的服务器上可以加快下载速度。内容分发网络是由一系列分散到各个不同地理位置上的Web服务器组成的,他根据和用户在网络上的靠近速度来制定某台服务器响应用户的请求,例如,设定最少的网络条数(network hops)和响应最快的服务器会被选定的。当然,CDN是需要花钱的,大型公司可以租用或者自建CDN。 PS:其实我感觉这个CDN有点类似于镜像服务器了。例如,有时候QQ邮箱登陆很慢,它就会自动帮助我们测速并选择更好的服务器。而CDN这种烧钱的玩意儿,对于我们这种个人博客来说是天方夜谭!!!
  3. 通过GZip压缩网页元素。 从HTTP/1.1规范协议开始,网络客户端已经宣称通过在文件请求里添加 Accept-Encoding头文件对该功能进行支持。而服务器端则会根据客户端的要求对内容进行相关的操作,并在返回文件中添加Content-Encoding: gzip头文件的方式通知客户端。作为GNU项目的一员,Gzip通常可以将文件内容压缩70%。当然Apache服务器中有一些特殊的服务支持模块。通过JSMin和YUI Compressor等工具,可以通过移除一些不需要的元素将JS文件进一步压缩。当然Gzip不支持图片及PDF文件的压缩。另外,一般的大型网站会进行缩图处理,而不是将原指定图片直接进行更改。
  4. 把CSS样式表文件放在网页的页首head部分。因为浏览器是顺序加载解析HTML文档的,所以放在HEAD部分可以提高界面加载速度,保证顺序正常显示。
  5. 把JS脚本文件放在网页底部。  把脚本文件下载完毕之前,其后面的元素的顺序显示将被阻塞,将其放到网页底部可以使更多的页面内容被快速显示。脚本引起的另一个问题是她阻塞并行下载的操作。HTTP/1.1规范声明建议浏览器在每个主机名的并行下载数目都不应该超过两个。当你获取来自多个不同主机名的图片时,可以进行多于两个的并行下载操作。但是,当一个脚本文件被下载时,无论是够来此不同的主机,浏览器都不能够进行其他的并行下载操作。
  6. 将样式表和脚本放置到外部文件中。通常将样式表和脚本放到外部文件中,在首次浏览之后可以通过调用缓存来减少HTTP请求数,而且这样也为网站的代码重用带来了方便。同时将这些文件放置到网页HTML文件中,增加了网页的大小。
  7. 避免CSS表达式。  当然,CSS表达式(background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );)已经从IE8开始被废弃了。当用户对页面进行一个类似上下移动等微小的操作时,后台都需要对上述表达式进行求值运算,且次数远远超过了我们所能设想的程度。这种数千次的运算请求必定会影响页面的整体表现。
  8. 减少DNS的查询次数。 DNS(Domain Name System)就是将用户输入的域名与实际的网站IP进行一个一一的映射操作,而浏览器根据DNS返回的结果确定向那个IP发送HTTP请求。一般一次域名解析需要20~120毫秒。介绍不同域名的使用数量可以根本上有效减少DNS解析所花费的时间,但是每个域名有并行下载的限制,Yahoo!建议使用2~4个域名以获取DNS解析时间与并行下载数的平衡。
  9. 缓存Ajax
  10. 不要再HTML文件中拉伸图片
  11. 避免一些无用的图片空链接
  12. 减少DOM元素的数量
  13. 尽可能地降低Cookie文件的大小

   当然,其中有些地方我没有较细致地翻译,本身外国人写东西就娓娓道来,很罗嗦,同时有些内容个人感觉价值不是太大了,如果有兴趣的话可以原网站看详细的解释

(翻译自 Best Practices for Speeding Up Your Web Site



扫一扫分享到微信
分享到微信

无觅相关文章插件,快速提升流量