web性能优化规则

时间 2019-12-13

标签 web 性能优化规则栏目 HTML 繁體版

原文原文链接

一、减小HTTP请求

why

减小响应时间。javascript

how

CSS Sprites
合并样式脚本
内联图片（使用data:URL模式能够在web页面中包含图片但不须要额外的HTTP请求）

二、使用内容发布网络（CDN）

why

浏览器是根据域(Domain)来缓存内容资源的，只要域不同，那么它就须要重复下载这些资源，并且使用一样的方式将它们缓存起来。css

带来的问题：重复地下载，这会占用网络资源和缓存空间。html

how

若是有不少站点，它们之间能够共享某些内容（例如javascript，css，image等），那么与其每一个站点放一份，就不如将他们统一地存在在一个地方，这样就能够减小下载的次数和缓存的体积了。java

如：引用jquery cdnjquery

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

三、添加Expires头

why

使内容具备缓存性web

how

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）ajax

经过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" />

上述设置仅为举例，实际使用其一便可。这样写的话仅对该网页有效，对网页中的图片或其余请求无效，并不会作任何cache。浏览器

四、压缩组件

why

减少文件体积，提高页面加载速度缓存

how

压缩脚本和样式表

五、样式置顶

why

放在底部可能会出现白屏，会阻塞页面的逐步呈现

注意：使用link，不使用@import（可能出现白屏，以及下载组件无序性）

六、脚本置底

why

页面既能够逐步呈现，也能够提升资源下载的并行度

最差状况：放在顶部

会阻塞后面内容的呈现
会阻塞其它组件的下载

七、避免使用CSS表达式

why

表达式可能会运算不少遍、影响页面性能

how

实现动态CSS可使用javascript控制

$(function () {
    $("dom").css("background-color",(new Date()).getHours()%2?"#EEE":"#BBB");
});

八、使用外链JavaScript和CSS

why

提升样式和脚本复用性

注意：纯粹而言，内联速度比外链快，由于外链额外增长了http请求，可是因为浏览器缓存，当多页面引用了同一个样式表或脚本文件时，反而减小了HTTP请求，实现复用。

how

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

九、减小DNS查找

why

查找DNS是须要花费时间的，一般浏览器在查找给定的IP地址要花费20～120毫秒的时间，在DNS完成查找以前，浏览器没法从主机名下载任何东西。

how

最理想的状况：只使用一个主机名，既减小了DNS查找，又最大化了并行下载。（只针对页面组件不多（1个或2个）的状况）

更现实的状况：使用2个，但很少于4个主机名，这样在减小DNS查找和容许高度并行下载之间作出了比较好的均衡。

十、精简JavaScript和CSS

why

减少文件大小，改善加载时间

how

从代码中移除没必要要的字符（包括空格、注释、换行符等）
精简JS代码可以使用JSMin
精简CSS代码，合并相同的类，移除不使用的类，使用缩写，如“#EEEEEE”写成“#EEE”，“0px”写成“0”。

十一、避免重定向

why

重定向是指用户的原始请求从新转向到了其它请求

301 Moved Permanently：这个状态码标识用户所请求的资源被移动到了另外的位置，客户端接收到此响应后，须要发起另一个请求去下载所需的资源。

302 Found：这个状态码标识用户所请求的资源被找到了，但不在原始位置，服务器会回复其余的一个位置，客户端收到此响应后，也须要发起另一个请求去下载所需的资源。

目前咱们一直只要区分301和302便可。他们本质上的区别究竟是什么呢？301表示永久重定向，302表示临时重定向。

how

在定义连接地址的href属性的时候，尽可能使用最完整的、直接的地址。例如：
使用 www.google.com 而不是google.com
使用cn.xxxx.com而不是xxxx.com
使用www.google.com.hk而不是google.com
使用www.site.com/products/而不是www.site.com/products

十二、移除重复脚本

why

重复脚本损伤性能：没必要要的HTTP请求及执行JS所浪费的时间

how

确保脚本只被加载一次。使用模块化工具如requireJS或seaJS管理脚本。

1三、配置ETag（实体标签）

它的做用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）请求的时候，比较ETag若是一致，则表示该资源并无被修改过，客户端（浏览器）可使用本身缓存的版本，避免重复下载。

服务器检测缓存组件和原始服务器组件匹配的方式

若是缓存组件过时了或者用户明确地从新加载了页面，浏览器在重用以前必须首先检查它是否有效。这称做一个条件GET请求。虽然浏览器必须产生这个http请求，可是仍比简单地下载全部已过时的组件效率高。若是浏览器组件是有效的（相互匹配）原始服务器则不会返回整个组件，而是返回304 not modifed状态码。

检测匹配有两种方式

比较最新修改日期

第一次请求响应

————>
GET /i/xx.jpg HTTP 1.1
HOST www.xxx.com
<————
HTTP 1.1 20 OK
Last-Modified:true .12 dec 2015 03:03:09 GMT
Content-Length:1024

第二次请求响应

————>
GET /i/xx.jpg HTTP 1.1
HOST www.xxx.com
If-Modified-Since:True,12 dec 2015 03:03:09 GMT
<————
HTTP 1.1 304 not modifed

比较实体标签

实体是咱们以前提到的组件的另外一种称呼。ETag是惟一标识了一个组件的一个特定版本的字符串，必须带上引号。这种为验证明体提供了更为灵活的机制——能够根据user-agent,accept-language头而改变。

第一次请求响应

————>
GET /i/xx.jpg HTTP 1.1
HOST www.xxx.com
<————
HTTP 1.1 20 OK
Last-Modified:true .12 dec 2015 03:03:09 GMT
ETag:"10c34ba-8ba-abds3b3"
Content-Length:1024

第二次请求响应

————>
GET /i/xx.jpg HTTP 1.1
HOST www.xxx.com
If-Modified-Since:True,12 dec 2015 03:03:09 GMT
If-None-Match:"10c34ba-8ba-abds3b3"
<————
HTTP 1.1 304 not modifed

ETag带来的问题

若是部署在服务器场环境中，配置不当的话，可能每一个服务器会对相同的资源生成不同的ETag，这样就增长了重复下载的可能性。

ETag的优点和特色

能够更加精确地判断资源是否被修改，由于它不是一个时间值，而是对时间通过处理的一个长整型数值（固然具体算法咱们目前还不得而知）。
浏览器发起新请求时须要包含 If-None-Match。

1四、使Ajax可缓存

why

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

how

对于AJAX而言，有一些特殊性，并非全部的AJAX请求都是能够缓存的。

POST的请求，是不能够在客户端缓存的，每次请求都须要发送给服务器进行处理，每次都会返回状态码200。（这里能够优化的是，服务器端对数据进行缓存，以便提升处理速度）
GET的请求，是能够（而且默认）在客户端进行缓存的，除非指定了不一样的地址，不然同一地址的AJAX请求，不会重复再服务器执行，而是返回304。

有的时候，咱们可能但愿GET请求不被缓存，有几种作法来达到这样的目的。

每次调用的时候，请求不一样的地址（能够在原始地址后面添加一个随机的号码）。
若是你所使用的是jquery的话，则能够考虑禁用AJAX的缓存。

$.ajaxSetup({ cache: false });

1五、使用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.

1六、减小DOM元素数量

why

DOM（Document Object Model）文档对象模型

HTML DOM 定义了访问和操做 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。
减小页面的DOM元素数量，有助于减少页面体积，而且也下降了维护这份DOM树的成本。

how

一、避免不正确地使用服务器控件。
二、减小没必要要的内容（并非全部的内容都必须放在页面上面的）。

若是数据量大，能够考虑分页，或者按需加载

1七、避免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)，之后若是业务逻辑有变化，只须要修改一下路由规则便可。

第三条措施,一样能够尽量地减小用户手工输入地址出错的机会。

1八、减小Cookie的大小

why

若是对某个域(Domain)保存了Cookie，那么针对这个域的全部请求，都会发送这些全部的Cookie（哪怕当前请求根本用不着，例如针对图片的请求），大量的、重复的发送Cookie毫无疑问会增长网络的流量，并所以而下降请求被执行的性能。

how

从技术上说，这个文件的内容是由网站控制的，它能够决定要写什么内容在里面，他也能够决定是否要加密。惟一的一个限制，这个文件的体积不容许超过4KB。

1九、使用无Cookie的域

why

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

20、不要使用滤镜

why

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

2一、不要在HTML中缩放图片

why

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

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

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

how

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

2二、缩小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。

2三、避免空的src和href

why

空的src和href都会致使多余的HTTP请求，虽然不影响加载时间，可是会对服务器产生没必要要的流量和压力，严重的以致于影响整个网站的用户体验。

例子：
在页面加载的过程当中，一个有着空src属性的img元素被JavaScript动态地赋值。这样作的问题是，在脚本执行以前元素就被浏览器渲染了（尤为是当你把脚本放到文档最后的时候）。因此浏览器依然会发起一个HTTP 请求，虽然它是一个空值。

雅虎的团队指出，若是你将img的src留空，可能你的本意是暂时不要显示任何图片，但在不一样的浏览器其实仍是会有一些额外的请求发生。

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

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样式

<style type="text/css">
　　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样式。

参考：YSlow团队的23条“Web性能最佳实践和规则”+《高性能网站建设指南》