YSlow-23条军规

时间 2019-11-08

标签 yslow 军规繁體版

原文原文链接

1.减小HTTP请求次数

why
减小页面的 HTTP 请求次数是你首先要作的一步。这是改良首次拜访用户等候时间的最主要的方法。犹如 Tenni Theurer 的他的博客 Browser Cahe Usage – Exposed!中所说，HTTP 请求在无缓存状况下占去了 40%到 60%的响应时间。
how
改善响应时间的最简单途径就是减小组件的数量，并由此减小HTTP请求的数量。
- 图片地图：在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪一个位置。
- CSS Sprites ：减小图像请求的有效方法。把全部的背景图像都放到一个图片文件中，然后经过 CSS 的 background-image 和 background-position 属性来显示图片的不一样部分。
- 合并脚本和样式表：适当地把多个脚本合并为一个脚本，把多个样式表合并为一个样式表。

2.使用CDN

whyjavascript

CDN, Content Delivery Network 内容分发网络，其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。css

在很早的时候，是没有CDN的概念和需求的。那时候咱们网站所须要的javascript等文件，就是放在咱们的网站目录中，其实这也是一种内容交付的方式，并且每每仍是比较高效的。但直到有一天，咱们作了各类各样的网站，咱们就会发现另一个问题：就是针对同一个javascript文件，浏览器可能会缓存多个版本。
之因此会这样作，是由于浏览器是根据域(Domain)来缓存内容资源的，只要域不同，那么它就须要重复下载这些资源，并且使用一样的方式将它们缓存起来。
可是，这会带来一些小的问题：重复地下载，缓存这些一样的脚本文件是须要占用带宽和本地缓存文件空间的。
因而，人们想出来一个解决方法：既然浏览器是根据域来区分这些内容资源的，那么是否能够将这些内容都放在统一的一个域里面呢？这样就算是咱们有不少网站，咱们均可以使用一样的地址引用这些内容资源，那么就不会产生重复下载和缓存的问题了。html

how
一个最直接也是最简单的使用CDN的作法：若是你有不少站点，他们之间能够共享某些内容（例如javascript，css，image等），那么与其每一个站点放一份，就不如将他们统一地存在在一个地方，这样就能够减小下载的次数和缓存的体积了。
e.g. 在引用jquery.js的时候，你能够下载后，引用本地地址，也能够直接引用google CDN的内容。

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

3.避免空的src和href

why
空的src和href都会致使多余的HTTP请求，虽然不影响加载时间，可是会对服务器产生没必要要的流量和压力，严重的以致于影响整个网站的用户体验。
e.g.
在页面加载的过程当中，一个有着空src属性的img元素被JavaScript动态地赋值。这样作的问题是，在脚本执行以前元素就被浏览器渲染了（尤为是当你把脚本放到文档最后的时候）。因此浏览器依然会发起一个HTTP 请求，虽然它是一个空值。雅虎的团队指出，若是你将img的src留空，可能你的本意是暂时不要显示任何图片，但在不一样的浏览器其实仍是会有一些额外的请求发生。例如java
Internet Explorer makes a request to the directory in which the page is located.
Safari and Chrome make a request to the actual page itself.
Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
Opera does not do anything when an empty image src is encountered.node

e.g.
一样的问题也发生在href 这个属性上。有些时候，开发人员想用超连接来触发JavaScript的一个交互。这时问题就来了，当用户触发了“单击”操做，若是 href 是空的那么浏览器就向服务器发送一个HTTP 请求。jquery

how
避免空的src和herf值。
解决留空src属性的问题：
你能够将初始图片设置为一个很小的默认图片（这个图片设置永不过时），而不是留空。
解决留空href属性的问题：
一、给<a>标签以href属性，并不链接到实际的页面：

<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="void(0);"></a>
<a href="void(0)"></a>
<a href=";"></a>
<a href=""></a>

二、禁止跳转，并添加cursor:pointer样式ajax

<style>
    a{cursor: pointer}
</style>
<a>点击一</a>
<a onclick="doSomething()">点击二</a>

三、给a 标签建立一个带有描述信息的href 属性，并监控click事件调用preventDefault()函数。算法

<a href="#Something_De scriptive" id="my_id">Trigger</a>
<script>
    $("#my_id").click(function(e){
        e.preventDefault(); //取消单击事件的默认动做以阻止连接的跳转。
        //  其余的代码
})
</script>

优势：编程

让<a>够响应键盘事件并得到焦点（从而屏幕阅读器可以读出背后的内容，加强可访问性）
优雅降级，在网络链接不好，尚未加载到CSS的时候，<a>依然有手型与正常的link样式。

四、为文件头制定Expires

why
是内容具备缓存性
how
格式：
Expires = "Expires" ":" HTTP-date
e.g.
Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）
经过HTTP的META设置expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />

5.使用gzip压缩内容

whyjson

Gzip是一种流行的文件压缩算法，如今的应用十分普遍，尤为是在Linux平台。
当应用Gzip压缩到一个纯文本文件时，效果是很是明显的，大约能够减小70％以上的文件大小。这取决于文件中的内容。除了节省流量，改善用户的浏览体验外，另外一个潜在的好处是Gzip与搜索引擎的抓取工具备着更好的关系。
Gzip开启之后会将输出到用户浏览器的数据进行压缩的处理，这样就会减少经过网络传输的数据量，提升浏览的速度。
how
编辑 http.conf 文件

去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
  去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#
  去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#

文件末尾加上

<IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json #对指定的内容进行压缩，压缩方式为默认的一个方法
  </IfModule>

详情见：Apache2.4开启GZIP功能

六、把css放到顶部

why
提升渲染性能，避免浏览器重绘页面元素。
在HTML文件<body>中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。
1）浏览器阻塞渲染网页直到全部外部的样式表都已被下载。
2）（用<style>标记指定的）内联样式块可能会致使reflows和页面跳动。
所以，把外部样式表和内联样式块放在页面的<head>中是很重要的。经过确保样式表首先被下载和解析，可让浏览器逐步渲染页面。
how
将内联样式块和<link>元素从页面<body>移动到页面<head>中。

HTML 4.01规范（第12.3节）规定，始终把使用<link>标签的外部样式表放在<head>部分里。不要使用@import。还要确保您指定的样式有正确的顺序。

把<style>区块放在<head>部分里。

7.把JS放到底部

why
一、浏览器在加载JS时会阻塞浏览器的渲染操做，使页面加载时间更长，形成页面停滞。
二、dom操做在页面加载完毕以前可能出错。
how
将脚本定义或引用放置到<body>底部。
<script defer="defer"> defer 属性规定是否对脚本执行进行延迟，脚本将在页面完成解析时执行。

8.避免使用CSS表达式

why
- css表达式可能会运算不少遍。
- 更加符合标准。
- 更加有利于性能提高。
- 减小受攻击面。
how
为了实现动态的css，可使用JavaScript来控制。
e.g.

<script src="Scripts/jquery-2.0.0.min.js"></script>
<script>
    $(function () {
        $("body").css("background-color", (new Date()).getHours() % 2 ? "#B8D4FF" : "#F08A00");
    });
</script>

9.将CSS和JS放到外部文件中

why
一、提升了脚本文件和样式表的复用性。（无需再每一个页面中都定义一次）
二、减小了页面体积，能够提升页面加载速度。（脚本文件和样式表能够被浏览器单独缓存）
三、提升了脚本和样式表的可维护性。(这个虽然与性能无关，但其实也是很重要的)
缺点：由于有单独的文件，因此可能会增长额外的请求。这违背了减小HTTP请求的原则。
how

<link rel="stylesheet" href="style.css" type="text/css" />
<script src="myjs.js" type="text/javascript" />

10.权衡DNS查找次数

why
查找DNS是须要花费时间的，经验的总结是至少须要20毫秒左右的时间。在此期间，浏览器是没法下载其余任何内容资源的。因此浏览器会想办法对DNS的查找结果进行缓存。而除了浏览器的缓存以外，操做系统也会对DNS查询的结果作缓存。只不过，因为浏览器使用太过频繁，目前的主流浏览器都使用本身独有的缓存，而不使用操做系统的缓存。

不一样浏览器在缓存DNS的问题上也不尽相同（主要体如今时间上面）。
一、缓存时间较长，有利于重复利用DNS缓存，提升速度。
二、缓存时间较短，有利于及时地检测到目标站点的IP地址更新，以进行正确的访问。

how
一、因为DNS查找须要时间，并且只缓存必定时间，因此应该尽量地减小DNS查找的次数。
二、减小DNS查找次数，最理想的方法就是把因此的内容资源都放在同一个域（Domain）中，这样访问整个网站就只须要进行一次DNS查找，这样能够提升性能，节省响应时间。
三、HTTP/1.1中推荐客户端针对每个域只有必定数量的并行度（它的建议是2），那么就会出现下载资源的排队现象，这样就会下降性能。
四、折衷的作法：在一个网站里面使用至少2个域，但很少于4个域来提供资源。

11.精简CSS和JS

why
尽量减小这两种文件的体积，以便加快下载速度。
e.g.
一、去除没必要要的格式符、空白符、注释符。这个操做，能够理解为是一种格式化，虽然它操做的结果实际上是去除掉原始文件的那些格式。
二、模糊（obfuscation）处理JavaScript脚本源代码。
how
工具：
一、JSMin：能够对JavaScript进行最小化处理
二、YUI Compressor：能够对JavaScript进行压缩，也能够对CSS进行压缩（java工具）。在线版本 Online JavaScript/CSS/HTML Compressor
三、JSLint：检查脚本语法合法性工具
四、Absolute HTML Compressor：HTML最小化处理工具（主要是格式化）。

12.避免重定向

why
重定向的意思是，用户的原始请求（例如请求A）被重定向到其余的请求（例如请求B）。这是HTTP世界中原本就存在的技术和现象，它自己没有所谓的好和坏，它的存在也确实有其理由，为此HTTP协议中，规定了两个状态码来标识着中场景。他们分别是：
301 Moved Permanently，这个状态码标识用户所请求的资源被移动到了另外的位置，客户端接收到此响应后，须要发起另一个请求去下载所需的资源。
302 Found，这个状态码标识用户所请求的资源被找到了，但不在原始位置，服务器会回复其余的一个位置，客户端收到此响应后，也须要发起另一个请求去下载所需的资源。
目前咱们一直只要区分301和302便可。他们本质上的区别究竟是什么呢？301表示永久重定向，302表示临时重定向。
凡是访问地址中，没有带文件名后缀的（例如aspx，asp等等），服务器都会尝试解析为一个文件夹，自动加上一个路径斜线，而后再查找内部的默认页面。
重定向是没法彻底避免的，适当的使用重定向能为网站提供更好的功能。（例如本地化，用户体验等方面）。可是过多的进行重定向也确定会给网站性能带来显著的印象。
how
在定义连接地址的href属性的时候，尽可能使用最完整的、直接的地址。例如：
使用 www.cnblogs.com 而不是cnblogs.com
使用cn.bing.com而不是bing.com
使用www.google.com.hk而不是google.com
使用www.mysite.com/products/而不是www.mysite.com/products

13.删除重复的JS和CSS

why
在一个页面中重复引用一个脚本可能存在的问题：浏览器会重复下载并执行脚本文件。
how
对脚本进行有效的管理，并在编写页面的时候，仔细的进行引用。

14.配置ETags

why
ETag，全程为：Entity Tag，意思是实体标签，它属于HTTP协议的一部分，也就是全部的Web服务器都应该支持这个特性。它的做用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）请求的时候，比较ETag若是一致，则表示该资源并无被修改过，客户端（浏览器）可使用本身缓存的版本，避免重复下载。
它比last-modified date更具备弹性，例如某个文件在1秒内修改了10次，Etag能够综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减小Web应用带宽和负载。
另外，下面对比Expires、Cache-Control、ETag。

15.可缓存的AJAX

why

AJAX=Asynchronous JavaScript And XML，AJAX不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是与服务器交换数据并更新部分网页的艺术，在不从新加载整个页面的状况下。

因为AJAX其实也是须要发起请求，而后服务器执行，并将结果（一般是JSON格式的）发送给浏览器进行最后的呈现或者处理，因此对于网站设计优化的角度而言，咱们一样须要考虑对这些请求，是否能够尽量的利用到缓存的功能来提升性能。

how
对于AJAX而言，有一些特殊性，并非全部的AJAX请求都是能够缓存的。
一、POST的请求，是不能够在客户端缓存的，每次请求都须要发送给服务器进行处理，每次都会返回状态码200。（这里能够优化的是，服务器端对数据进行缓存，以便提升处理速度）
二、GET的请求，是能够（而且默认）在客户端进行缓存的，除非指定了不一样的地址，不然同一地址的AJAX请求，不会重复再服务器执行，而是返回304。
有的时候，咱们可能但愿GET请求不被缓存，有几种作法来达到这样的目的。
一、每次调用的时候，请求不一样的地址（能够在原始地址后面添加一个随机的号码）。
二、若是你所使用的是jquery的话，则能够考虑禁用AJAX的缓存。

$.ajaxSetup({ cache: false });

16.使用GET来完成AJAX请求

why
以前提过：
一、POST请求，不能使用客户端缓存
二、GET请求，可使用客户端缓存
这个意义上来说，使用GET会比POST而言，由于减小了请求数和数据的重复传输，有更好的一个性能表现。
在使用XMLHttpRequest（目前的AJAX都是基于它实现的）的时候，浏览器中的POST实现为两步走的过程，首先发送头部信息，而后再发送数据。但若是是使用GET的话，就只有一个TCP的包发送出去（除非有大量的Cookie），这样无疑能够提升性能。
【备注】一个TCP包的尺寸大约为1452字节。除此以外，显示的项目中，并非总能使用GET的，例如长度方面可能会有限制：The maximum URL length in IE is 2K, so if you send more than 2k data you might not be able to use GET.

17.减小DOM元素数量

why

DOM（Document Object Model，文档对象模型）
HTML DOM 定义了访问和操做 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。
减小页面的DOM元素数量，有助于减少页面体积，而且也下降了维护这份DOM树的成本。
how
一、避免不正确地使用服务器控件。
二、减小没必要要的内容（并非全部的内容都必须放在页面上面的）。
若是数据量大，能够考虑分页，或者按需加载

18.避免404

why

什么状况下会发生404错误

404 意味着Not Found，意思是说未找到资源。既然如此，那么至少会有两种缘由致使404错误：

该资源按理说是要有，但咱们没有提供。用户按照正常的方式来请求，因此资源找不到。
该资源原本就不存在，用户按照不正常的方式来请求，固然仍是找不到。

404会有什么影响
看不到的影响：有时候，404错误发生了，用户可能根本没有感受到。例如

例如请求favicon.ico文件，或者请求了某个不存在的脚本文件、样式表、图片文件，页面仍是会按照正常的方式进行呈现。
丢失的脚本文件、样式表、图片文件，会致使页面的某些行为、界面效果出现异常（也可能不是很明显）
最大的问题多是性能方面的影响。尤为是若是请求一个不存在的脚本文件，由于浏览器在请求脚本文件的时候，即使是返回404，它也会尝试去按照Javascript的方式解析响应中的内容。这无疑会增长不少处理的时间，而由于该文件不存在，因此这些都是无用功。

看获得的影响：

若是用户请求的某个页面不存在，那么他将收到明确的回应
默认状况下，他将收到一个标准的错误页面（请注意：很多用户会被这个页面吓到）
how
避免404错误发生的措施：
为网站提供favicon.ico。
在发布网站前的测试工做中，运行Link checker工具，确保全部连接都是可以访问到的。这个工具是W3C发布的，彻底免费，你值得拥有。
为了不用户收藏绝对地址（customer.aspx)，给后期更新带来隐患。能够考虑在设计阶段采用 Url Rewriting 或者 Routing 等技术来实现更加友好和灵活的地址（例如/Customer)，之后若是业务逻辑有变化，只须要修改一下路由规则便可。
第三条措施,一样能够尽量地减小用户手工输入地址出错的机会。

19.减小cookie的大小

why
若是对某个域(Domain)保存了Cookie，那么针对这个域的全部请求，都会发送这些全部的Cookie（哪怕当前请求根本用不着，例如针对图片的请求），大量的、重复的发送Cookie毫无疑问会增长网络的流量，并所以而下降请求被执行的性能。
how
从技术上上拉说，这个文件的内容是由网站控制的，它能够决定要写什么内容在里面，他也能够决定是否要加密。惟一的一个限制，这个文件的体积不容许超过4KB。

20.使用无cookie的域

why
好比图片 CSS 等，Yahoo! 的静态文件都在主域名之外，客户端请求静态文件的时候，减小了 Cookie的反复传输对主域名的影响。
只有访问主域名的时候才须要保存cookie，而cookie会自动地发送给当前域的全部请求。

21.不要使用滤镜

why
Filters这个功能是IE当年为了提供更加丰富的一些页面效果而设计出来的。
不只仅是别的浏览器可能不支持，IE从9.0版本开始也放弃了这方面的支持。

22.不要在HTML中缩放图片

why
有时获得的图片尺寸和具体显示尺寸不同，为了在网页中显示出但愿的尺寸，一般会经过下面的方法把图片进行缩放：

<img width="100" height="100" src="pic.jpg" alt="my pic"/>

浏览器下载到原始图片以后，若是原始尺寸与目标尺寸不符，就会须要对图片进行缩放（拉伸或者缩小），以便实现刚才所提到的目的。

how
咱们须要在网页中显示什么尺寸的图片，就请图片设计人员提供什么尺寸的图片，而不是在网页中进行缩放。

23.缩小favicon.icon并缓存

why
一、每一个网站都应该有该文件，浏览器在访问任何页面的时候，老是会尝试去请求这个文件（若是本地没有的话）。
二、该文件一般应该命名为favicon.ico ，若是但愿使用别的名称或者格式（例如PNG），则须要在页面的头部(Head)中定义引用（下面两句中的第一句是必须的）

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

三、该文件能够直接放在网站根目录，但也能够放在其余的主机，或者你想要的任何位置。若是不在默认的根目录下面，也是须要经过上面所提到的引用方式定义。

how
- 使它尽可能在1KB左右。想比较其余的格式（PNG,GIF等），该文件默认的格式为ico，这种文件一般较小。要建立favicon.ico文件，可使用 http://www.favicon.cc/ 提供的在线免费服务。
- 使它可以缓存。因为该文件使用很频繁，因此缓存显得很重要。对于这个文件而言，能够设置永不过时(或者过时时间长一些)。
- 将该文件放在单独的主机中，能够避免在请求该文件时发送cookie。