前端性能优化黄金法则

时间  2019-12-09
标签 前端 性能 优化 黄金 法则 栏目 系统性能 繁體版
原文   原文链接

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各类各样的资源。前端优化是复杂的，针对方方面面的资源都有不一样的方式。那么，前端优化的目的是什么 ?Tips:我的博客排版、UI更佳；地址：https://haonancx.github.io/

Optimization-main

  • 从用户角度而言，优化可以让页面加载得更快、对用户的操做响应得更及时，可以给用户提供更为友好的体验。前端

  • 从服务商角度而言，优化可以减小页面请求数、或者减少请求所占带宽，可以节省可观的资源。git

  • 总之，恰当的优化不只可以改善站点的用户体验而且可以节省至关的资源利用。github

前端性能优化 - Yahoo前端性能团队总结的35条黄金定律

Yahoo 的Excetional Performance 团队总结出了一系列能够提升网站速度的方法。能够分为 7大类 35条（包括内容、服务器、CSS、JavaScript、Cookie、图片、移动应用）。

内容部分

  • 尽可能减小 HTTP 请求web

  • 减小 DNS 查找express

  • 避免跳转浏览器

  • 缓存 Ajax缓存

  • 推迟加载性能优化

  • 提早加载服务器

  • 减小 DOM 元素数量cookie

  • 用域名划分页面内容

  • 使 frame 数量最少

  • 避免404错误

  1. 合并文件是经过把全部的脚本放到一个文件中来减小 HTTP请求的方法。

  2. CSS Sprites是减小图像请求的有效方法。

  3. 缓存 DNS查找能够改善页面性能。

  4. 跳转是使用 301和 302代码实现的（可是要记住跳转会下降用户体验）。

  5. 为了提升性能，优化 Ajax响应是很重要的。提升 Ajxa性能的措施中最重要的方法就是使响应具备可缓存性。

  6. 你能够仔细看一下你的网页，问问本身“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构能够稍后再加载？预加载和后加载看起来彷佛偏偏相反，但实际上预加载是为了实现另一种目标。预加载是在浏览器空闲时请求未来可能会用到的页面内容（如图像、样式表和脚 本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，所以能够大大改善访问速度。

  7. 一个复杂的页面意味着须要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。好比当你增长一个事件句柄时在500和5000个 DOM元素中循环效果确定是不同的。

  8. 把页面内容划分红若干部分可使你最大限度地实现平行下载。

  9. 使iframe的数量最小，ifrmae元素能够在父文档中插入一个新的HTML文档。了解iframe的工做理而后才能更加有效地使用它，这一点很重要。

  10. HTTP请求时间消耗是很大的，所以使用HTTP请求来得到一个没有用处的响应（例如404没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。

服务器部分

  • 使用内容分发网络

  • 为文件头指定 Expires 或 Cache-Control

  • Gzip压缩文件内容

  • 配置ETag

  • 尽早刷新输出缓冲

  • 使用 GET 来完成 AJAX 请求

  • 避免空的图像来源

  1. 用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不一样地域位置的服务器上能够加快下载速度。

  2. 为文件头指定Expires或Cache-Control，这条守则包括两方面的内容： 对于静态内容：设置文件头过时时间Expires的值为“Never expire”（永不过时）；对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。

  3. 网络传输中的HTTP请求和应答时间能够经过前端机制获得显著改善。的确，终端用户的带宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。可是还有其余因素影响着响应时间。经过减少HTTP响应的大小能够节省HTTP响应时间。

  4. Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等）。增长ETag为实体的验证提供了一个比使用“last-modified date（上次编辑时间）”更加灵活的机制。

  5. 当用户请求一个页面时，不管如何都会花费200到500毫秒用于后台组织HTML文件。（尽早刷新输出缓冲）。

  6. Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，而后才发送数 据。所以使用GET最为恰当，由于它只需发送一个TCP包（除非你有不少cookie）。IE中URL的最大长度为2K，所以若是你要发送一个超过2K的 数据时就不能使用GET了。

CSS部分

  • 把样式表置于顶部

  • 避免使用 CSS 表达式（）

  • 用 <link> 代替 @import

  • 避免使用滤镜

  1. 在研究Yahoo!的性能表现时，咱们发现把样式表放到文档的<head /内部彷佛会加快页面的下载速度。这是由于把样式表放到<head />内会使页面有步骤的加载显示。

  2. 避免使用CSS表达式（Expression），CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。

  3. 对于拥有较大浏览量的首页来讲，有一种技术能够平衡内置代码带来的HTTP请求减小与经过使用外部文件进行缓存带来的好处。

  4. （削减JavaScript和CSS）精简是指从去除代码没必要要的字符减小文件大小从而节省下载时间。消减代码时，全部的注释、不须要的空白字符（空格、换行、tab缩进）等都要去掉。

  5. 前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。在IE中，页面底部@import和使用<link>做用是同样的，所以最好不要使用它。

  6. IE独有属性AlphaImageLoader用于修正7.0如下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的 呈现而且冻结浏览器。在每个元素（不只仅是图片）它都会运算一次，增长了内存开支，所以它的问题是多方面的。

JavaScript部分

  • 把脚本置于页面底部

  • 使用外部 JavaScript 和 CSS

  • 削减 JavaScript 和 CSS

  • 剔除重复脚本

  • 减小DOM访问

  • 开发智能事件处理程序

  1. 脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每一个主机名的并行下载内容不超过两个。一个常常用到的替代方法就是使用延迟脚本。

  2. 在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种状况并很少见。对于美国前10大网站的调查显示其中有两家存在重复引 用脚本的状况。有两种主要因素致使一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。

  3. 使用JavaScript访问DOM元素比较慢，所以为了得到更多的应该页面，应该作到：缓存已经访问过的有关元素，线下更新完节点以后再将它们添加到文档树中，避免使用JavaScript来修改页面布局，有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

  4. 有时候咱们会感受到页面反应迟钝，这是由于DOM树元素中附加了过多的事件句柄而且些事件句病被频繁地触发。这就是为何说使用event delegation（事件代理）是一种好方法了。

Coockie部分

  • 减少Cookie体积

  • 对于页面内容使用无coockie域名

  1. coockie 是经过HTTP文件头来在web服务器和浏览器之间进行交流的。去除没必要要的coockie，使coockie体积尽可能小以减小对用户响应的影响，注意在适应级别的域名上设置coockie以便使子域名不受影响；设置合理的过时时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

  2. 对于页面内容使用无coockie域名，当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会作任何地使用。所以他们只是由于某些负面因素而建立的 网络传输。全部你应该肯定对于静态内容的请求是无coockie的请求。建立一个子域名并用他来存放全部静态内容。

Image 部分

  • 优化图像

  • 优化 CSS Spirite

  • 不要在 HTML 中缩放图像

  • favicon.ico 要小并且可缓存

  1. 优化图像和CSS Spirite，在Spirite中水平排列你的图片，垂直排列会稍稍增长文件大小；Spirite 中把颜色较近的组合在一块儿能够下降颜色数，理想情况是低于256色以便适用PNG8格式；

  2. favicon.ico是位于服务器根目录下的一个图片文件。它是一定存在的，由于即便你不关心它是否有用，浏览器也会对它发出请求，所以最好不要返回一 个404 Not Found的响应。

7、 Mobile部分

  • 保持单个内容小于25K

  • 打包组件成复合文本

  1. 保持单个内容小于25K，这条限制主要是由于iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。因为单纯gizp压缩可能达不要求，所以精简文件就显得十分重要。

  2. 打包组件成复合文本，把页面内容打包成复合文本就如同带有多附件的Email，它可以使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要肯定用户代理是否支持（iPhone就不支持）。

是否是感受挺多的，这还只是优化方案的归纳，细分起来还有不少细节。

expression-1

好了， 今天就到这儿，下篇文章见。

该文章部分知识网络整理

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程