性能优化
2017-02-24 本文已影响0人
周花花啊
概念
1、常见性能优化方法有哪些？给出不少于5条实际可行的方案
主要从四大方面考虑：文件要小、网速要快、请求要少、服务器方面。
具体措施有：
1、减少 HTTP 的请求次数。
- 请求网页资源时，对每个 html，css，js 和图像文件都会发送一个 HTTP 请求，如果页面加载了大量 CSS、JavaScript 和图像文件，就会因请求数过多而造成用户体验变差。
- 解决方案：
- 如果有多个 CSS 文件，合并为一个 CSS 文件。
- 如果有多个 JavaScript 文件，合并为一个 JavaScript 文件。
- 小图标通过 CSS Sprite 进行合并。
2、网速方面可以使用内容分发网络 CDN（Content Delivery Network）。
- 简单的静态资源服务器，将一些静态资源放在CDN上；
- CDN可以根据地理位置，将用户导向距离用户最近的服务器节点。从而使内容传输得更快、更稳定，但需要相当的费用支出。
3、将 CSS 和 JavaScript 的引用放在正确的位置。
- CSS 文件会阻止渲染，但通常不会阻止下载。
- JavaScript 文件会阻塞下载，并会在下载之后立即执行，而不顾 DOM 是否加载完毕。
- 解决方案：
- 将样式表放置在头部，可使页面样式正常显示。
- 将 JavaScript 的引用放在 body最后面，以避免阻塞其他内容的下载，并保证执行时 DOM 已加载完毕。
4、使用外部的 CSS 和 JavaScript 文件。
- 尽管内联比外部文件响应更快且外部文件会增加 HTTP 请求的个数，但使用外部文件可以使相同 CSS／JavaScript 文件可为多个 HTML 文件复用。
频繁使用但不常改动的外部文件可使用缓存方案，从而减少 HTTP 请求数。 - 解决方案：
- 将内联的 CSS 和 JavaScript 代码放置到外部文件中。
- 可复用的代码整合放置到同一文件中。
5、压缩文件（文件内容的压缩）：
- 压缩可以极大地减少文件的体积，从而减少文件传输的时间。
- 解决方案：
- 对于 CSS 和 JavaScript 文件，可以通过去除注释、空白字符和替换变量名等办法进行压缩。
- 对于图像，可以使用工具通过一定的压缩算法进行压缩。
6、后端可以使用 Gzip 压缩（数据流的压缩）。
- 使用 Gzip 时，服务器端在传输前会对所传输的内容进行 Gzip 压缩，从而减小传输文件的体积，浏览器在接收到文件之后先进行解压缩，然后渲染和执行文件。
7、为文件头指定 Expires 或 Cache-Control
- 二者都是通过使用缓存来减少 HTTP 的请求数量，并减小 HTTP 的响应大小来达到让页面加载更快的目的。
- 如果 Web 服务器开启了 Expires 模块，则会在响应头中提供一个时间值，指明资源在本地的过期时间，在这个时间之前，当再次需要加载该资源时，就可直接使用缓存中的数据，而不需再次发送 HTTP 请求。
- 使用 Cache-Control 可克服 Expires 头因指定特定时间而要求服务器和客户端时钟严格同步的限制。通过指定 max-age，提供一个秒数值，如果相同的资源距离上次请求的时间少于这个数值，则使用缓存的版本，从而避免额外的 HTTP 请求。
- 解决方案：
- 静态资源（包括但不限于图像）可使用 Expires 头。
- 经常更新的动态资源推荐使用 Cache-Control。
