前端的性能优化（针对内容方面）

时间 2019-11-07

标签前端性能优化针对内容方面栏目系统性能繁體版

原文原文链接

性能优化

减小Http请求:

1.尽可能减小HTTP请求数　　80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各类组件：图片，样式表，脚本，Flash等等。减小组件数必然可以减小页面提交的HTTP请求数。这是让页面更快的关键。css

2.减小页面组件数的一种方式是简化页面设计。但有没有一种方法能够在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。html

3.合并文件是经过把全部脚本放在一个文件中的方式来减小请求数的，固然，也能够合并全部的CSS。若是各个页面的脚本和样式不同的话，合并文件就是一项比较麻烦的工做了，但把这个做为站点发布过程的一部分确实能够提升响应时间。前端

4.CSS Sprites是减小图片请求数量的首选方式。把背景图片都整合到一张图片中，而后用CSS的background-image和background-position属性来定位要显示的部分。web

5.图像映射能够把多张图片合并成单张图片，总大小是同样的，但减小了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用，好比导航条。给image map设置坐标的过程既无聊又容易出错，用image map来作导航也不容易，因此不推荐用这种方式。跨域

6.行内图片（Base64编码）用data: URL模式来把图片嵌入页面。这样会增长HTML文件的大小，把行内图片放在（缓存的）样式表中是个好办法，并且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。浏览器

7.减小页面的HTTP请求数是个起点，这是提高站点首次访问速度的重要指导原则。缓存

减小DNS查找:

1.域名系统创建了主机名和IP地址间的映射，就像电话簿上人名和号码的映射同样。当你在浏览器输入www.yahoo.com的时候，浏览器就会联系DNS解析器返回服务器的IP地址。DNS是有成本的，它须要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成以前，浏览器没法从主机名下载任何东西。性能优化

2.DNS查找被缓存起来更高效，由用户的ISP（网络服务提供商）或者本地网络存在一个特殊的缓存服务器上，但还能够缓存在我的用户的计算机上。DNS信息被保存在操做系统的DNS cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有独立于操做系统的本身的cache。只要浏览器在本身的cache里还保留着这条记录，它就不会向操做系统查询DNS。服务器

3.IE默认缓存DNS查找30分钟，写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟，能够用network.dnsCacheExpiration配置项设置。(Fasterfox把缓存时间改为了1小时 P.S. Fasterfox是FF的一个提速插件)网络

4.若是客户端的DNS cache是空的（包括浏览器的和操做系统的），DNS查找数等于页面上不一样的主机名数，包括页面URL，图片，脚本文件，样式表，Flash对象等等组件中的主机名，减小不一样的主机名就能够减小DNS查找。

5.减小不一样主机名的数量同时也减小了页面可以并行下载的组件数量，避免DNS查找削减了响应时间，而减小并行下载数量却增长了响应时间。个人原则是把组件分散在2到4个主机名下，这是同时减小DNS查找和容许高并发下载的折中方案。

避免重定向重定向用301和302状态码，下面是一个有301状态码的HTTP头：

1.HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 　　浏览器会自动跳转到Location域指明的URL。重定向须要的全部信息都在HTTP头部，而响应体通常是空的。其实额外的HTTP头，好比Expires和Cache-Control也表示重定向。除此以外还有别的跳转方式：refresh元标签和JavaScript，但若是你必须得作重定向，最好用标准的3xxHTTP状态码，主要是为了让返回按钮能正常使用。

2.牢记重定向会拖慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的全部东西，页面没法渲染，组件也没法开始下载，直到HTML文档被送达浏览器。

3.有一种常见的极其浪费资源的重定向，并且web开发人员通常都意识不到这一点，就是URL尾部缺乏一个斜线的时候。例如，跳转到http://astrology.yahoo.com/as...://astrology.yahoo.com/astrology/的301响应（注意添在尾部的斜线）。在Apache中能够用Alias，mod_rewrite或者DirectorySlash指令来取消没必要要的重定向。

4.重定向最多见的用途是把旧站点链接到新的站点，还能够链接同一站点的不一样部分，针对用户的不一样状况（浏览器类型，用户账号类型等等）作一些处理。用重定向来链接两个网站是最简单的，只须要少许的额外代码。虽然在这些时候使用重定向减小了开发人员的开发复杂度，但下降了用户体验。一种替代方案是用Alias和mod_rewrite，前提是两个代码路径都在相同的服务器上。若是是由于域名变化而使用了重定向，就能够建立一条CNAME（建立一个指向另外一个域名的DNS记录做为别名）结合Alias或者mod_rewrite指令。

让Ajax可缓存:

1.Ajax的一个好处是能够给用户提供即时反馈，由于它可以从后台服务器异步请求信息。然而，用了Ajax就没法保证用户在等待异步JavaScript和XML响应返回期间不会很是无聊。在不少应用程序中，用户可以一直等待取决于如何使用Ajax。例如，在基于web的电子邮件客户端中，用户为了寻找符合他们搜索标准的邮件消息，将会保持对Ajax请求返回结果的关注。重要的是，要记得“异步”并不意味着“即时”。

2.要提升性能，优化这些Ajax响应相当重要。最重要的提升Ajax性能的方法就是让响应变得可缓存，就像在添上Expires或者Cache-Control HTTP头中讨论的同样。下面适用于Ajax的其它规则：

3.Gzip组件减小DNS查找压缩JavaScript 避免重定向配置ETags 　　咱们一块儿看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通信录，以便实现自动完成功能。若是用户从上一次使用以后再没有修改过她的通信录，并且Ajax响应是可缓存的，有还没有过时的Expires或者Cache-Control HTTP头，那么以前的通信录就能够从缓存中读出。必须通知浏览器，应该继续使用以前缓存的通信录响应，仍是去请求一个新的。能够经过给通信录的Ajax URL里添加一个代表用户通信录最后修改时间的时间戳来实现，例如&t=1190241612。若是通信录从上一次下载以后再没有被修改过，时间戳不变，通信录就将从浏览器缓存中直接读出，从而避免一次额外的HTTP往返消耗。若是用户已经修改了通信录，时间戳也能够确保新的URL不会匹配缓存的响应，浏览器将请求新的通信录条目。

4.即便Ajax响应是动态建立的，并且可能只适用于单用户，它们也能够被缓存，而这样会让你的Web 2.0应用更快。

延迟加载组件:

能够凑近看看页面并问本身：什么才是一开始渲染页面所必须的？其他内容均可以等会儿。

1.JavaScript是分隔onload事件以前和以后的一个理想选择。例如，若是有JavaScript代码和支持拖放以及动画的库，这些均可以先等会儿，由于拖放元素是在页面最初渲染以后的。其它能够延迟加载的部分包括隐藏内容（在某个交互动做以后才出现的内容）和折叠的图片。

2.工具可帮你减轻工做量：YUI Image Loader能够延迟加载折叠的图片，还有YUI Get utility是一种引入JS和CSS的简单方法。Yahoo!主页就是一个例子，能够打开Firebug的网络面板仔细看看。

3.最好让性能目标符合其它web开发最佳实践，好比“渐进加强”。若是客户端支持JavaScript，能够提升用户体验，但必须确保页面在不支持JavaScript时也能正常工做。因此，在肯定页面运行正常以后，能够用一些延迟加载脚本加强它，以支持一些拖放和动画之类的华丽效果。

预加载组件:

预加载可能看起来和延迟加载是相反的，但它其实有不一样的目标。经过预加载组件能够充分利用浏览器空闲的时间来请求未来会用到的组件（图片，样式和脚本）。用户访问下一页的时候，大部分组件都已经在缓存里了，因此在用户看来页面会加载得更快。

实际应用中有如下几种预加载的类型：

1.无条件预加载——尽快开始加载，获取一些额外的组件。google.com就是一个sprite图片预加载的好例子，这个sprite图片并非google.com主页须要的，而是搜索结果页面上的内容。条件性预加载——根据用户操做猜想用户将要跳转到哪里并据此预加载。在search.yahoo.com的输入框里键入内容后，能够看到那些额外组件是怎样请求加载的。提早预加载——在推出新设计以前预加载。常常在从新设计以后会听到：“这个新网站不错，但比之前更慢了”，一部分缘由是用户访问先前的页面都是有旧缓存的，但新的倒是一种空缓存状态下的体验。能够经过在将要推出新设计以前预加载一些组件来减轻这种负面影响，老站能够利用浏览器空闲的时间来请求那些新站须要的图片和脚本。

减小DOM元素的数量:

一个复杂的页面意味着要下载更多的字节，并且用JavaScript访问DOM也会更慢。举个例子，想要添加一个事件处理器的时候，循环遍历页面上的500个DOM元素和5000个DOM元素是有区别的。

1.大量的DOM元素是一种征兆——页面上有些内容无关的标记须要清理。正在用嵌套表格来布局吗？仍是为了修复布局问题而添了一堆的<div>s？或许应该用更好的语义化标记。

2.YUI CSS utilities对布局有很大帮助：grids.css针对总体布局，fonts.css和reset.css能够用来去除浏览器的默认格式。这是个开始清理和思考标记的好机会，例如只在语义上有意义的时候使用<div>，而不是由于它可以渲染一个新行。

3.DOM元素的数量很容易测试，只须要在Firebug的控制台里输入：

document.getElementsByTagName(‘*’).length

4.那么多少DOM元素才算是太多呢？能够参考其它相似的标记良好的页面，例如Yahoo!主页是一个至关繁忙的页面，但只有不到700个元素（HTML标签）。

跨域分离组件:

1.分离组件能够最大化并行下载，但要确保只用不超过2-4个域，由于存在DNS查找的代价。例如，能够把HTML和动态内容部署在www.example.org，而把静态组件分离到static1.example.org和static2.example.org。

后续还会整理，目前对性能的优化先写这么多........