浅谈网站性能以前端性能优化

最近项目慢慢走上正轨，需求趋于平稳，这才想起须要对整站进行性能优化。通过一段时间的学习，结合如今项目的实际性能状况，发现确实有许多地方能够进行优化。因而就开始了个人前端性能优化之旅。如下内容仅为我的理解，若是本内容你们以为哪里写的不对，望你们指出，供一块儿讨论。

浅谈网站性能以前端性能优化

性能优化的目的无非是减小用户流量消耗，提高用户首屏体验，提高用户访问速度，让用户专一内容自己。

前端性能优化

1. 减小 HTTP 请求数量

   • 基本原理：在浏览器与服务器进行通讯时，主要是经过 HTTP 进行通讯。浏览器与服务器须要通过三次握手，每次握手须要花费大量时间。并且不一样浏览器对资源文件并发请求数量有限（不一样浏览器容许并发数），一旦 HTTP 请求数量达到必定数量，资源请求就存在等待状态，这是很致命的，所以减小 HTTP 的请求数量能够很大程度上对网站性能进行优化。

     1. CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减小 HTTP 请求的一种解决方案，能够经过 CSS background 属性来访问图片内容。这种方案同时还能够减小图片总字节数，节省命名词汇量（由命名多张图片文件变成一张，哈哈哈）。

     2. 合并 CSS 和 JS 文件：如今前端有不少工程化打包工具，如：grunt、gulp、webpack等。为了减小 HTTP 请求数量，能够经过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。

     3. 采用 lazyLoad：俗称懒加载，能够控制网页上的内容在一开始无需加载，不须要发请求，等到用户操做真正须要的时候当即加载出内容。这样就控制了网页资源一次性请求数量。

2. 控制资源文件加载优先级

   • 基本原理：说到这里就须要知道浏览器加载 HTML 内容的原理，浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应连接内容，为了第一时间展现页面给用户，就须要将 CSS 提早加载，不要受 JS 加载影响。

     1. 遵循原则：主要文件放在 head 内部，次要文件放在 body 底部。通常状况下都是 CSS 在头部，JS 在底部。

3. 利用浏览器缓存

   • 基本原理：浏览器缓存分强缓存和协商缓存，他们是将网络资源存储在本地，等待下次请求该资源时，若是命中就不须要到服务器从新请求该资源，直接在本地读取该资源。

     1. 强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。

     2. 协商缓存：经过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。

4. 使用 CDN

   • 基本原理：CDN的全称是Content Delivery Network，即内容分发网络。

5. 减小重排（Reflow）

   • 基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的全部其它结点的 visibility 属性，这也是 Reflow 低效的缘由。若是 Reflow 的过于频繁，CPU 使用率就会急剧上升。

     1. 减小 Reflow，若是须要在 DOM 操做时添加样式，尽可能使用 增长 class 属性，而不是经过 style 操做样式。

6. 减小 DOM 操做

7. 图标使用 IconFont 替换

花絮

在开始提笔写这篇博客前就遇到了一个很棘手的问题，这篇博客标题叫什么，思考了一会，我内心冒出了三个答案：

1. 浅谈网站性能优化

   • 第一个标题网站性能优化，一看标题能够理解为是讲网站性能，并且是对网站进行优化，描述的是一种解决方案，然而网站性能包括的太多了，超出了个人知识范畴，因此放弃。

2. 浅谈网站性能以前端性能优化

   • 第二个标题正适我怀，答题归纳了我本期博客内容，既有性能介绍，又有前端性能优化解决方案。

3. 浅谈前端性能优化

   • 第三个标题前端性能优化，心想这不就是我要写的内容嘛，等我写完内容发现，不对，我写的内容不只仅是解决方案，好包括的其余内容，因此放弃。

以上内容仅为我的理解，若是本内容你们以为哪里写的不对，望你们指出，供一块儿讨论，点击此处更多文章。

来源：http://www.javashuo.com/article/p-vxzpzzaf-dt.html