前端性能优化黄金法则

Hegel_Gu 发布于2019-08-22 10:45 / 3118人阅读

摘要：前端优化是复杂的，针对方方面面的资源都有不同的方式。前端性能优化前端性能团队总结的条黄金定律的团队总结出了一系列可以提高网站速度的方法。提高性能的措施中最重要的方法就是使响应具有可缓存性。

前端是庞大的，包括 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 表达式（）

用代替 @import

避免使用滤镜

在研究Yahoo!的性能表现时，我们发现把样式表放到文档的内会使页面有步骤的加载显示。

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

对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。

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

前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。在IE中，页面底部@import和使用作用是一样的，因此最好不要使用它。

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就不支持）。

是不是感觉挺多的，这还只是优化方案的概括，细分起来还有很多细节。

好了，今天就到这儿，下篇文章见。 该文章部分知识网络整理

GPU云服务器云服务器前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91204.html

前端性能优化黄金法则

摘要：前端优化是复杂的，针对方方面面的资源都有不同的方式。前端性能优化前端性能团队总结的条黄金定律的团队总结出了一系列可以提高网站速度的方法。提高性能的措施中最重要的方法就是使响应具有可缓存性。前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?Tips...

zhangke3016 2019-08-02 15:56 评论0 收藏0
前端性能优化黄金法则

摘要：前端优化是复杂的，针对方方面面的资源都有不同的方式。前端性能优化前端性能团队总结的条黄金定律的团队总结出了一系列可以提高网站速度的方法。提高性能的措施中最重要的方法就是使响应具有可缓存性。前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?Tips...

coolpail 2019-08-30 13:13 评论0 收藏0
提高前端性能的黄金法则

摘要：虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要数据显示只有的最终用户响应时间花在了下载文档上。前端性能优化一味奉行最佳实践有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载...

keithyau 2019-08-19 17:54 评论0 收藏0
关于网站性能优化准则

打算现在开始在博客里写点东西，也能为自己看过的书学过的知识做一个归纳总结。这几日拜读了Steve Souders的《高性能网站建设指南这本书》，虽然这本书可能已经有些老了，但薄薄的一个小册子里提出的网站性能优化的准则还是非常有价值的。这些规则都有个共同点，就是用很小的工作就能获得很明显的性能提升，性价比极高。废话不多说了，总结一下书里的几点性能优化规则。首先有一点需要说明的是书中所写的性能黄金法...

Travis 2019-08-22 10:58 评论0 收藏0
开放封闭原则之模式的黄金法则

摘要：开放封闭原则应该算是这几个原则里面最容易理解的一个。另外，语句就是开放封闭原则的死敌这个是状态模式中的一个例子。处理开放封闭模式的特例我们都是人，不可能一开始都写出完美的代码。开放-封闭原则应该算是这几个原则里面最容易理解的一个。它的宗旨就是:如果你想扩展或者改变一个程序的功能，可以增加代码，但是不能改变程序的源码。如果，是对于那些码农来说，最快捷的办法就是改变源码，但是我们面向的是...

MasonEast 2019-08-19 17:29 评论0 收藏0