雅虎十四条 - 14个优化网站性能提升网站访问速度的技巧

时间  2021-01-30
标签 javascript php css html 前端 java node linux web 面试 栏目 网站开发 繁體版
原文   原文链接

14个优化网站性能提升网站访问速度的技巧


又叫“雅虎十四条”，想起一年前那个懵懂的我，大四傻乎乎的跑到大学城面试前端，那个时候觉得寒暑假看了两套CSS的视频，就很牛B了，出发先还把视频温了一下，嗯嗯，这是滑动门，嗯嗯这是绝对定位，嗯嗯这是浮动清除 雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧 ……

当时是彪叔面试个人，当时我还不知道那我的，全身黑漆漆的，黑色T-shirt，黑色皮肤，黑色帽子，黑色墨镜，还有点黑色胡渣的人，就是 彪叔 ，补作了试题后支支吾吾的跟他谈了一下，发现彻底不行，第一个问题是“雅虎十四条”是什么？而后我蒙了，pardon? 听都没听过，接着就阵亡了，回家后发了篇日志在QQ空间，不过当时也是只知其一;不知其二，今天看了一成天，把它贴出来跟你们分享：

相信互联网已经愈来愈成为人们生活中不可或缺的一部分。ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能。好比Google机会已经把最基本的office应用都搬到了互联网上。固然便利的同时毫无疑问的也使页面的速度愈来愈慢。本身是作前端开发 的，在性能方面，根据yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是能够优化的。javascript

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧
 

以上是一张web2.0页面的生命周期图。工程师很形象地讲它分红了“怀孕，出生，毕业，结婚”四个阶段。若是在咱们点击网页连接的时候可以意识到 这个过程而不是简单的请求-响应的话，咱们即可以挖掘出不少细节上能够提高性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的 一个讲座，感受收获很大，想在blog上作个分享。php

相信不少人都听过优化网站性能的14条规则。更多的信息可见developer.yahoo.comcss

1. 尽量的减小 HTTP 的请求数 [content]html

2. 使用 CDN（Content Delivery Network） [server]前端

3. 添加 Expires 头(或者 Cache-control ) [server]java

4. Gzip 组件 [server]node

5. 将 CSS 样式放在页面的上方 [css]linux

6. 将脚本移动到底部（包括内联的） [javascript]web

7. 避免使用 CSS 中的 Expressions [css]面试

8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]

9. 减小 DNS 查询 [content]

10. 压缩 JavaScript 和 CSS (包括内联的) [javascript] [css]

11. 避免重定向 [server]

12. 移除重复的脚本 [javascript]

13. 配置实体标签（ETags） [css]

14. 使 AJAX 缓存 

在firefox下有一个插件yslow，集成在firebug中，你能够用它很方便地来看看本身的网站在这几个方面的表现。

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧
 

这是对用yslow对个人网站西风坊测评的结果，很遗憾，只有51分。呵呵。中国各大网站的分值都不高，刚测了一下，新浪和网易都是31分。而后 yahoo(美国)的分值确实97分!可见yahoo在这方面做出的努力。从他们总结的这14条规则，已经如今又新增长的20个点来看，有不少细节咱们真 得是怎么都不会去想，有些作法甚至是有些“变态”了。

 

第一条、尽量的减小 HTTP 的请求数 (Make Fewer HTTP Requests )


http请求是要开销的，想办法减小请求数天然能够提升网页速度。经常使用的方法，合并css，js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。固然或许将css，js文件拆分多个是由于css结构，共用等方面的考虑。阿里巴巴中文站当时的作法是开发时依然分开开发，而后在后台 对js，css进行合并，这样对于浏览器来讲依然是一个请求，可是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面，而不是外部引用。由于首页的访问量太大了，这么作也能够减小两个请求数。而事实上国内的不少门户都是这么作的。

而css sprites是指只用将页面上的背景图合并成一张，而后经过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样作的。有兴趣的能够看下淘宝和阿里巴巴的背景图。

http://www.csssprites.com/ 这是个工具网站，它能够自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。

 

第二条、使用CDN(内容分发网络): Use a Content Delivery Network

 

说实话，对于CDN这一块本身并非很了解，简单地讲，经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，经过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，杭州的用户访问近杭州服务器上的内容，北京的访问 近北京服务器上的内容。这样能够有效减小数据在网络上传输的时间，提升速度。更详细地内容你们能够参考百度百科上对于CDN的解释。Yahoo!把静态内 容分布到CDN减小了用户影响时间20%或更多。

CDN技术示意图：

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧
 


CDN组网示意图：

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧
 


第三条、 添加Expire/Cache-Control 头：Add an Expires Header

 

如今愈来愈多的图片，脚本，css，flash被嵌入到页面中，当咱们访问他们的时候势必会作许屡次的http请求。其实咱们能够经过设置 Expires header 来缓存这些文件。Expire其实就是经过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不须要常常修 改的，作了缓存之后这样浏览器之后就不须要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。一个典型的HTTP 1.1协议返回的头信息：

HTTP/1.1 200 OK

Date: Fri, 30 Oct 1998 13:19:41 GMT

Server: Apache/1.3.3 (Unix)

Cache-Control: max-age=3600, must-revalidate

Expires: Fri, 30 Oct 1998 14:19:41 GMT

Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT

ETag: “3e86-410-3596fbbc”

Content-Length: 1040

Content-Type: text/html

其中经过服务器端脚本设置Cache-Control和Expires能够完成。

如，在php中设置30天后过时：

如下为引用的内容：

<!--pHeader("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 30;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);-->

也能够经过配置服务器自己完成，这些偶就不是很清楚了，呵呵。想了解跟多的朋友能够参考http://www.web-caching.com/

据我了解，目前阿里巴巴中文站的Expires过时时间是30天。不过时间也有过问题，特别是对于脚本过时时间的设置仍是应该仔细考虑下，否则相应 的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。之前作[suggest项目] 的时候就遇到过这个问题。因此，哪些应该缓存，哪些不应缓存仍是应该仔细斟酌一番。

 

第四条、启用Gzip压缩：Gzip Components

 

Gzip的思想就是把文件先在服务器端进行压缩，而后再传输。这样能够显著减小文件传输的大小。传输完毕后浏览器会 从新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不只浏览器能够识别，并且各大“爬虫”也一样能够识别，各位seoer能够放下心了。并且gzip的压缩比例很是大，通常压缩率为85%，就是 说服务器端100K的页面能够压缩到25K左右再发送到客户端。具体的Gzip压缩原理你们能够参考csdn上的《gzip压缩算法》 这篇文章。雅虎特别强调， 全部的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点咱们网站作得不错，是一个A。之前咱们的首页也并非A，由于首页上还有不少广告代码投放的js，这些广告代码拥有者的网站的js没有通过gzip 压缩，也会拖累咱们网站。

以上三点大多属于服务器端的内容，本人也是粗浅地了解而已。说得不对的地方有待各位指正。


第五条、将css放在页面最上面 ( Put Stylesheets at the Top)

 

将css放在页面最上面，这是为何?由于 ie，firefox等浏览器在css所有传输彻底以前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。层叠即意味这后面的css能够覆盖前面的css，级别高的css能够覆盖级别低的css。在[css之!important] 这篇文章的最下面曾简单地提到过这层级关系，这里咱们只须要知道css能够被覆盖的。既然前面的能够被覆盖，浏览器在他彻底加载完毕以后再去渲染无疑也是 合情合理的不少浏览器下，如IE，把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以避免重画页面元素，那用户只能看到空白页 了。Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能须要重画，这致使闪烁问题。因此咱们应该尽快让css加载完毕

顺着这层意思，若是咱们再细究的话，其实还有能够优化的地方。好比本站上面包含的两个css文件，<linkrel=“stylesheet” rev=“stylesheet”href=“http://www.space007.com/themes/google/style/google.css” type=“text/css” media=“screen”/> 和<link rel=“stylesheet” rev=“stylesheet” href=“http://www.space007.com/css/print.css”type=“text/css” media=“print” />。  从media就能够看出第一个css是针对浏览器的，第二个css文件是针对打印样式的。从用户的行为习惯上来将，要打印页面的动做必定是发生在页面页面 显示出来以后的。因此比较好的方法应该是在页面加载完毕以后再动态地为这张页面加上针对打印设备的css，这样又能够提升一点速度。(哈哈)


第六条、将script放在页面最下面 (Put Scripts at the Bottom )

 

将脚本放在页面最下面的目的有那么两点： 一、 由于防止script脚本的执行阻塞页面的下载。在页面loading的过程当中，当浏览器读到js执行语句的时候必定会把它所有解释完毕后在会接下来读下 面的内容。不信你能够写一个js死循环看看页面下面的东西还会不会出来。(setTimeout 和 setInterval的执行有点相似于多线程，在相应的响应时间以前也会继续下面的内容渲染。)浏览器这么作的逻辑是由于js随时可能执 行 location.href或是其余可能彻底中断此页面过程的函数，即如此，固然得等他执行完毕以后再加载咯。因此放在页面最后，能够有效减小页面可 视元素的加载时间。 二、脚本引发的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每一个主机的并行下载数不超过2个(IE只能为2个，其余浏览器如ff等都 是默认设置为2个，不过新出的ie8能够达6个)。所以若是您把图像文件分布到多台机器的话，您能够达到超过2个的并行下载。可是当脚本文件下载时，浏览 器不会启动其余的并行下载。

固然对各个网站来讲，把脚本都放到页面底部加载的可行性仍是值得商榷的。就好比阿里巴巴中文站的页面。不少地方有内联的js，页面的显示严重依赖于此，我认可这和无侵入脚本的理念相差甚远，可是不少“历史遗留问题”却不是那么容易解决的。


第七条、避免在CSS中使用Expressions (Avoid CSS Expressions )

 

不过这样就多了两层无心义的嵌套，确定很差。还须要一个更好的办法。


第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )

 

这点我想仍是很容易理解的。不只从性能优化上会这么作，用代码易于维护的角度看也应该这么作。把css和js写在页面内容能够减小2次请求，但也增 大了页面的大小。若是已经对css和js作了缓存，那也就没有2次多余的http请求了。固然，我在前面中也说过，有些特殊的页面开发人员仍是会选择内联 的css和js文件。


第九条、减小DNS查询 (Reduce DNS Lookups)

 

在 Internet上域名与IP地址之间是一一对应的，域名(kuqin.com)很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络 上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工做称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束以前，浏览器不会下载该域名下的任何东西。因此减小dns查询的时间能够加快页面的加载速度。yahoo的建议一个页面所包含的域 名数尽可能控制在2-4个。这就须要对页面总体有一个很好的规划。目前咱们这点作的很差，不少打点的广告投放系统拖累了咱们。


第十条、压缩 JavaScript 和 CSS (Minify JavaScript )

 

压缩js和css的左右很显然，减小页面字节数。容量小页面加载速度天然也就快。并且压缩除了减小体积之外还能够起到必定的保护左右。这点咱们作得 不错。经常使用的压缩工具备JsMin、YUI compressor等。另外像http://dean.edwards.name/packer/还给咱们提供了一个很是方便的在线压缩工具。你能够在 jQuery的网页看到压缩过的js文件和没有压缩过的js文件的容量差异：

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧
 

固然，压缩带来的一个弊端就是代码的可读性没了。相信不少作前端的朋友都遇到过这个问题：看Google的效果很酷，但是去看他的源代码倒是一大堆 挤在一块儿的字符，连函数名都是替换过的，汗死!本身的代码也这样岂不是对维护很是不方便。全部阿里巴巴中文站目前采用的作法是在js和css发布的时候在 服务器端进行压缩。这样在咱们很方便地维护本身的代码。


第十一条、避免重定向 (Avoid Redirects )

 

不久前在ieblog上看到过《Internet Explorer and Connection Limits》 这篇文章，好比 当你输入http://www.kuqin.com/ 的时候服务器会自动产生一个301服务器转向 http://www.kuqin.com/ ，你看浏览器的地址栏就能看出来。这种重定向天然也是须要消耗时间的。固然这只是一个例子，发生重定向的缘由还有不少，可是不变的是每增长一次重定向就会 增长一次web请求，因此因该尽可能减小。


第十二条、移除重复的脚本 (Remove Duplicate Scripts )

 

这点我想不说也知道，不只是从性能上考虑，代码规范上看也是这样。可是不得不认可，不少时候咱们会由于图一时之快而加上一些或许是重复的代码。或许一个统一的css框架和js框架能够比较好的解决咱们的问题。小猪的观点很对，不只是要作到不重复，更是要作到可重用。


第十三条、配置实体标签(ETags) (Configure ETags )

 

这点我也不懂，呵呵。在inforQ上找到一篇解释得比较详细的说明《使用ETags减小Web应用带宽和负载》，有兴趣的同窗能够去看看。

 

第十四条、使 AJAX 缓存 (Make Ajax Cacheable )

 

ajax还要去缓存?作ajax请求的时候每每还要增长一个时间戳去避免他缓存。It’s important to remember that “asynchronous” does not imply “instantaneous”.(记住“异步”不是“瞬间”这一点很重要)。记住，即便AJAX是动态产生的并且只对一个用户起做用，他们依然能够被缓 存。


目前能作到的就是关于css方面的，拼图，压缩减小冗余，合理书写分类，让我们css在YSlow显示都是"A"，至于服务器类的，来日方长，我们慢慢学……只要有热情在，早晚都会学到手……


后补一下，由于如今十四条已经扩展了不少，在这篇文章上面能够看到详细的分析：

http://uicss.cn/yslow/#more-12319

在Yslow上面能够看到有23条之多，看下图：

雅虎十四条 <wbr>- <wbr>14个优化网站性能提升网站访问速度的技巧

  1. 减小HTTP请求次数
    合并图片、CSS、JS，改进首次访问用户等待时间。
  2. 使用CDN
    就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
  3. 避免空的src和href
    当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL做为它们的属性值，从而把页面的内容加载进来做为它们的值。测试
  4. 为文件头指定Expires
    使内容具备缓存性。避免了接下来的页面访问中没必要要的HTTP请求。
  5. 使用gzip压缩内容
    压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。
  6. 把CSS放到顶部
  7. 把JS放到底部
    防止js加载对以后资源形成阻塞。
  8. 避免使用CSS表达式
  9. 将CSS和JS放到外部文件中
    目的是缓存，但有时候为了减小请求，也会直接写到页面里，需根据PV和IP的比例权衡。
  10. 权衡DNS查找次数
    减小主机名能够节省响应时间。但同时，须要注意，减小主机会减小页面中并行下载的数量。
    IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。因此新浪会搞N个二级域名来放图片。
  11. 精简CSS和JS
  12. 避免跳转
    同域：注意避免反斜杠 “/” 的跳转；
    跨域：使用Alias或者mod_rewirte创建CNAME（保存域名与域名之间关系的DNS记录）
  13. 删除重复的JS和CSS
    重复调用脚本，除了增长额外的HTTP请求外，屡次运算也会浪费时间。在IE和Firefox中无论脚本是否可缓存，它们都存在重复运算JavaScript的问题。
  14. 配置ETags
    它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具备弹性，例如某个文件在1秒内修改了10次，Etag能够综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减小Web应用带宽和负载
  15. 可缓存的AJAX
    “异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
  16. 使用GET来完成AJAX请求
    当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，而后才发送数据。所以使用GET获取数据时更加有意义。
  17. 减小DOM元素数量
    是否存在一个是更贴切的标签可使用？标签语义化，避免滥用无心义标签
  18. 避免404
    有些站点把404错误响应页面改成“你是否是要找***”，这虽然改进了用户体验可是一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript的连接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 做JavaScript代码来执行。
  19. 减小Cookie的大小
  20. 使用无cookie的域
    好比图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减小了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。
  21. 不要使用滤镜
    png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg
  22. 不要在HTML中缩放图片
  23. 缩小favicon.ico并缓存
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程