前端性能优化黄金法则
wufan0 2019-06-21
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?Tips:个人博客排版、UI更佳；地址：https://haonancx.github.io/
从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端性能优化 - Yahoo前端性能团队总结的35条黄金定律
Yahoo 的Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条（包括内容、服务器、CSS、JavaScript、Cookie、图片、移动应用）。
内容部分
尽量减少 HTTP 请求
减少 DNS 查找
避免跳转
缓存 Ajax
推迟加载
提前加载
减少 DOM 元素数量
用域名划分页面内容
使 frame 数量最少
避免404错误
合并文件是通过把所有的脚本放到一个文件中来减少 HTTP请求的方法。
CSS Sprites是减少图像请求的有效方法。
缓存 DNS查找可以改善页面性能。
跳转是使用 301和 302代码实现的（但是要记住跳转会降低用户体验）。
为了提高性能，优化 Ajax响应是很重要的。提高 Ajxa性能的措施中最重要的方法就是使响应具有可缓存性。
你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚 本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。
一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个 DOM元素中循环效果肯定是不一样的。
把页面内容划分成若干部分可以使你最大限度地实现平行下载。
使iframe的数量最小，ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它，这一点很重要。
HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。
服务器部分
使用内容分发网络
为文件头指定 Expires 或 Cache-Control
Gzip压缩文件内容
配置ETag
尽早刷新输出缓冲
使用 GET 来完成 AJAX 请求
避免空的图像来源
用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
为文件头指定Expires或Cache-Control，这条守则包括两方面的内容： 对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）；对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
网络传输中的HTTP请求和应答时间可以通过前端机制得到显著改善。的确，终端用户的带宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。但是还有其他因素影响着响应时间。通过减小HTTP响应的大小可以节省HTTP响应时间。
Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等）。增加ETag为实体的验证提供了一个比使用“last-modified date（上次编辑时间）”更加灵活的机制。
当用户请求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件。（尽早刷新输出缓冲）。
Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数 据。因此使用GET最为恰当，因为它只需发送一个TCP包（除非你有很多cookie）。IE中URL的最大长度为2K，因此如果你要发送一个超过2K的 数据时就不能使用GET了。
CSS部分
把样式表置于顶部
避免使用 CSS 表达式（）
用 <link> 代替 @import
避免使用滤镜
在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head /内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。
避免使用CSS表达式（Expression），CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。
（削减JavaScript和CSS）精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。
前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的 呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
JavaScript部分
把脚本置于页面底部
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。一个经常用到的替代方法就是使用延迟脚本。
在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在重复引 用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。
使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：缓存已经访问过的有关元素，线下更新完节点之后再将它们添加到文档树中，避免使用JavaScript来修改页面布局，有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。
有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。
Coockie部分
减小Cookie体积
对于页面内容使用无coockie域名
coockie 是通过HTTP文件头来在web服务器和浏览器之间进行交流的。去除不必要的coockie，使coockie体积尽量小以减少对用户响应的影响，注意在适应级别的域名上设置coockie以便使子域名不受影响；设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
对于页面内容使用无coockie域名，当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的 网络传输。所有你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。
Image 部分
优化图像
优化 CSS Spirite
不要在 HTML 中缩放图像
favicon.ico 要小而且可缓存
优化图像和CSS Spirite，在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；Spirite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个404 Not Found的响应。
七、 Mobile部分
保持单个内容小于25K
打包组件成复合文本
保持单个内容小于25K，这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。
打包组件成复合文本，把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要确定用户代理是否支持（iPhone就不支持）。
是不是感觉挺多的，这还只是优化方案的概括，细分起来还有很多细节。
