前端性能优化准则

[xuexueq]

前端优化的目的是什么

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

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

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

1. 内容部分

• 尽量减少 HTTP 请求(每个请求需要建立tcp连接，而tcp连接的建立需要三次握手，是需要资源消耗和时间消耗的)
• 减少 DNS 查找
• 避免跳转(避免重定向)
• 缓存 Ajax
• 推迟加载
• 提前加载
• 减少 DOM 元素数量
• 用域名划分页面内容
• 使 frame 数量最少
• 避免404错误

1. 合并文件是通过把所有的脚本放到一个文件中来减少 HTTP请求的方法。
2. CSS Sprites是减少图像请求的有效方法。
3. 缓存 DNS查找可以改善页面性能。
4. 跳转是使用 301和 302代码实现的（但是要记住跳转会降低用户体验）。页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要200毫秒不等的时间开销（无缓存），为了保证用户尽快看到页面内容，要尽量避免页面重定向。==给网址结尾加上反斜杠==：有没有反斜杠的意义在于该url是指向一个文件还是一个目录，例如：https://github.com/xuexueq/blog 指向的是网站根目录下一个名为blog的文件；https://github.com/xuexueq/blog/ 指向的是网站根目录下一个名为blog的目录。在网址末尾加了反斜杠是能加快网站载入，因为网址末尾加了反斜杠会直接告知浏览器现在指向的是一个目录，浏览器就能直接读取该目录下如index或home等默认文件。而没有加上反斜杠时浏览器首先会尝试读取根目录下的一个文件，如果没有该文件再查找一个与该文件同名的目录，最后才读取目录下的默认文件。这样一来加上反斜杠就会加快网站加载速度。对于网站所在的服务器，网址没有加上反斜杠会给服务器增加一个查找是否有同名文件的过程，这明显会增加服务器的负担，当然这个影响并不会很大，但如果你的网站的直接流量很大，那么给url末尾加上反斜杠便能较大的减轻服务器的负担了。
5. 为了提高性能，优化 Ajax响应是很重要的。提高 Ajxa性能的措施中最重要的方法就是使响应具有可缓存性。
6. 你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚 本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。
7. 一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个 DOM元素中循环效果肯定是不一样的。
8. 把页面内容划分成若干部分可以使你最大限度地实现平行下载。使用静态资源分域存放来增加下载并行数,浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以利用多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数，缩短页面资源加载的时间。通常根据多个域名来分别存储 JavaScript、CSS 和图片文件。
9. 使iframe的数量最小，ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它，这一点很重要。
10. HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2. 服务器部分

• 使用内容分发网络
• 为文件头指定 Expires 或 Cache-Control
• Gzip压缩文件内容
• 配置ETag
• 尽早刷新输出缓冲
• 使用 GET 来完成 AJAX 请求
• 避免空的图像来源

利用 CDN 网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间。

3. CSS部分

• 把样式表置于顶部
• 避免使用 CSS 表达式（）
• 用 代替 @import
• 避免使用滤镜
• 尽量避免使用<table>、<iframe>

1. 避免使用 CSS import 引用加载 CSS：CSS 中的 ＠import 可以从另一个样式文件中引入样式，但应该避免这种用法，因为这样会增加 CSS 资源加载的关键路径长度，带有 ＠import 的 CSS 样式需要在 CSS 文件串行解析到 @import 时才会加载另外的 CSS 文件，大大延后 CSS 渲染完成的时间。
2. 尽量避免在选择器末尾添加通配符:CSS 解析匹配到 渲染树的过程是从右到左的逆向匹配，在选择器末尾添加通配符至少会增加一倍多计算量。
3. <table> 内容的渲染是将 table 的 DOM 渲染树全部生成完并一次性绘制到页面上的，所以在长表格渲染时很耗性能，应该尽量避免使用它，可以考虑使用列表元素
   代替。尽量使用异步的方式动态添加 iframe，因为 iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析。

4. JavaScript部分

• 把脚本置于页面底部(推荐使用异步 JavaScript 资源)
• 使用外部 JavaScript 和 CSS
• 削减 JavaScript 和 CSS
• 剔除重复脚本
• 减少DOM访问
• 开发智能事件处理程序

1. 异步的 JavaScript 资源不会阻塞文档解析，所以允许在浏览器中优先渲染页面，延后加载脚本执行。例如 JavaScript 的引用可以设置defer 或 async，也可以使用模块化加载机制来实现。使用 async 时，加载和渲染后续文档元素的过程和 main.js 的加载与执行是并行的。使用 defer 时，加载后续文档元素的过程和 main.js 的加载是并行的，但是 main.js 的执行要在页面所有元素解析完成之后才开始执行。
2. 在 HTML 文件中引用外部资源可以有效利用浏览器的静态资源缓存;
3. 消除阻塞渲染的 CSS 及 JavaScript：对于页面中加载时间过长的 CSS 或 JavaScript 文件，需要进行合理拆分或延后加载，保证关键路径的资源能快速加载完成。
4. 减少 DOM 元素数量和深度:HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
5. 尽量减少使用JS动画: JS 直接操作 DOM 极容易引起页面的重排

5. Coockie部分(减少 Cookie 的大小并进行 Cookie 隔离)

• 减小Cookie体积
• 对于页面内容使用无coockie域名

1. coockie 是通过HTTP文件头来在web服务器和浏览器之间进行交流的。去除不必要的coockie，使coockie体积尽量小以减少对用户响应的影响，注意在适应级别的域名上设置coockie以便使子域名不受影响；设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
2. 对于页面内容使用无coockie域名，当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的 网络传输。所有你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。

6. Image 部分

• 优化图像
• 优化 CSS Spirite
• 不要在 HTML 中缩放图像
• favicon.ico 要小而且可缓存

在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。

7. Mobile部分

• 保持单个内容小于25K
• 打包组件成复合文本
• 首屏数据请求提前，避免 JavaScript 文件加载后才请求数据
• 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
• meta dns prefetch 设置 DNS 预解析
• 资源预加载

为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。

References

前端性能优化最佳实践
再谈前端优化——从实际项目优化说起