前端性能优化黄金法则

前端庞大，包括HTML、CSS、Javascript、Image、Flash等各种资源，前端优化复杂，各个方面都有不同的方法资源。那么，前端优化的目的是什么？Tips：个人博客排版，更好的UI；地址：https://haonancx.github.io/从用户的角度出发，优化可以让页面加载更快，用户的操作响应更及时，可以为用户提供更友好的体验。从服务商的角度来看，优化可以减少页面请求的次数，或者减少请求占用的带宽，可以节省可观的资源。总之，适当的优化不仅可以提升网站的用户体验，还可以节省可观的资源利用率。前端性能优化——雅虎前端性能团队总结的35条黄金法则雅虎ExcetionalPerformance团队总结了一系列可以提高网站速度的方法。它可以分为7大类35项（包括内容、服务器、CSS、JavaScript、cookies、图像、移动应用程序）。尽量减少内容部分的HTTP请求减少DNS查找避免跳转缓存Ajax延迟加载提前加载减少DOM元素的数量使用域名来划分页面内容尽量减少帧数避免404错误合并文件通过将所有脚本放在一个文件中来减少HTTP请求的方法。CSSSprites是减少图像请求的有效方法。缓存DNS查找可以提高页面性能。重定向是使用301和302代码实现的（但请记住，重定向会降低用户体验）。要提高性能，优化Ajax响应很重要。提高Ajxa性能的最重要措施之一是使响应可缓存。你可以好好看看你的网页，问问自己“页面渲染时必须先加载哪些内容？哪些内容和结构可以稍后加载？预加载和后加载看似相反，但实际上预加载使用的是加载实现另一个目的，预加载就是在浏览器空闲的时候请求以后可能用到的页面内容（比如图片，样式表，脚本），使用这种方式，当用户想要访问下一个页面时，最页面上的内容已经加载到缓存中，因此可以大大提高访问速度，复杂的页面意味着需要下载更多的数据，也意味着JavaScript遍历DOM的效率更慢。例如，当你添加一个事件循环遍历500和5000个DOM元素时，处理起来肯定不一样。将页面内容分成几个部分可以让你最大化并行下载。最小化iframe的数量，ifrmae元素可以在父文档中插入一个新的HTML文档。为了更有效地使用它，了解iframe的工作原理很重要。HTTP请求是耗时的，所以使用HTTP请求得到无用的响应（比如404页面未找到）是完全没有必要的，只会降低用户体验，没有任何好处。服务器部分使用CDN为文件头指定Expires或Cache-Control。Gzip压缩文件内容配置ETag以尽早刷新输出缓冲区。使用GET完成AJAX请求。将您的网站内容分布在多个位于不同地理位置的服务器上可以加快下载速度。为文件头指定Expires或Cache-Control。这个规则包括两个方面：对于静态内容：设置文件头的过期时间，设置Expires的值为“Neverexpire”（永不过期）；对于动态内容：使用适当的Cache-Control标头来帮助浏览器发出条件请求。前端机制可以显着改善网络传输中的HTTP请求和响应时间。实际上，最终用户的带宽、Internet提供商、与对等交换点的距离等不在网站开发者的判断范围内。但是还有其他因素会影响响应时间。可以通过减小HTTP响应的大小来节省HTTP响应时间。实体标签（ETags）（entitytags）是网络服务器和浏览器使用的一种机制，用来判断浏览器缓存中的内容是否与服务器中的原始内容匹配（“实体”就是所谓的“内容”，包括图片、脚本、样式表等）。添加ETag为实体验证提供了比使用“最后修改日期”更灵活的机制。当用户请求页面时，在后台组织HTML文件需要200到500毫秒。（尽早刷新输出缓冲区）。雅虎！Mail团队发现，在使用XMLHttpRequest时，浏览器中的POST方法是一个“两步”过程：先发送文件头，再发送数据。所以使用GET是最合适的，因为它只需要发送一个TCP数据包（除非你有很多cookie）。IE中的URL最大长度为2K，所以如果要发送超过2K的数据，就不能使用GET。CSS部分将样式表放在顶部避免使用CSS表达式()使用而不是@import避免使用过滤器研究Yahoo!performance，我们发现把stylesheet放在文档的中会导致页面逐步加载显示。避免使用CSS表达式（Expressions），这是一种强大（但危险）的动态设置CSS属性的方式。InternetExplorer从版本5开始支持CSS表达式。对于页面浏览量高的主页，有一种技术可以平衡内置代码带来的HTTP请求减少和通过使用外部文件进行缓存的好处。（减少JavaScript和CSS）缩小是指通过从代码中删除不必要的字符来减少文件大小以节省下载时间。减少代码时，必须删除所有注释、不必要的空白字符（空格、换行符、制表符缩进）等。之前最好的实现提到CSS要放在最上面，方便有序的加载和渲染。在IE中，页面底部的@import与使用效果相同，最好不要使用。IE独有属性AlphaImageLoader用于修正7.0以下版本显示的PNG图片半透明效果。此过滤器的问题在于它会停止呈现内容并在浏览器加载图像时冻结浏览器。它为每个元素（不仅仅是图像）执行一次，增加了内存开销，因此它的问题是多方面的。JavaScript部分将脚本放在页面底部使用外部JavaScript和CSS减少JavaScript和CSS以删除重复的脚本减少DOM访问开发智能事件处理程序脚本的问题在于它阻止了页面的并行下载。HTTP/1.1规范建议浏览器为每个主机名同时下载不超过两个。一种常用的替代方法是使用延迟脚本。在同一页面中重复引用JavaScript文件会影响页面的性能。您可能认为情况并非如此。对美国排名前10的网站进行的一项调查显示，其中有两个网站存在重复脚本。有两个主要因素导致脚本被重新引用的奇怪现??象：团队规模和脚本数量。使用JavaScript访问DOM元素比较慢，所以为了获取更多的页面，应该：缓存已经访问过的相关元素，离线更新节点然后添加到文档树中，避免使用JavaScript修改页面Layout，有关这方面的更多信息，请参阅JulienLecomte关于YUI主题的文章“高性能Ajax应用程序”。有时我们会觉得页面没有响应，是因为DOM树元素附加了太多的事件处理程序，一些事件语句被频繁触发。这就是为什么使用事件委托是个好主意。Cookie部分减小了Cookie的大小。对于页面的内容，它使用无coockie的域名。Cookie通过HTTP文件头在Web服务器和浏览器之间进行通信。去掉不需要的coockie，尽量减小coockie的大小，减少对用户响应的影响，注意在适配级别的域名上设置coockie，以免子域名受到影响；设置合理的到期时间。较早的Expire时间和不太早清除cookie将改善用户的响应时间。为页面内容使用无cookie的域名。当浏览器请求静态图片并在请求中发送一个cookie时，服务器不会使用任何这些cookie。因此，它们只是由于某些不利因素而产生的网络传输。您应该确保对静态内容的请求是无coockie请求。创建一个子域并使用它来托管所有静态内容。图像部分优化图像优化CSSSprite不要缩放HTMLfavicon.ico中的图像保持小且可缓存优化图像和CSSSprite，在Spirit中水平排列图像，垂直方向略微增加文件大小；在Spirit中将颜色更接近的组合可以减少颜色的数量，理想情况下少于256色，以便应用PNG8格式；favicon.ico是位于服务器根目录中的图像文件。它必须存在，因为即使你不关心它是否有用，浏览器也会对它提出请求，所以最好不要返回404NotFound响应。7、Mobile部分，保持单个内容小于25K。将组件打包成复合文本，保持单个内容小于25K。这个限制主要是因为iPhone无法缓存大于25K的文件。请注意，这是指解压后的大小。由于简单的gizp压缩可能达不到要求，因此对文件进行精简非常重要。将组件打包成复合文本，将页面内容打包成复合文本，就像带有多个附件的电子邮件，它允许您在一个HTTP请求中获取多个组件（记住：HTTP请求非常奢侈）。当你使用这个规则时，首先要判断用户代理是否支持它（iPhone不支持）。是不是感觉很多？这只是优化方案的一个总结，细分的时候还有很多细节。好了，今天就到这里，下篇文章见。本文部分知识网络整理