性能优化的点

悠悠 2022-05-28 07:24 213阅读 0赞

**性能优化的目的：**无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。

优化的点可以从下面几点来讲，主要是对后台的优化比较多：

**1、减少网络请求数量：减少请求的文件数**

**基本原理：**在**浏览器与服务器进行通信**时，主要是**通过 HTTP 进行通信**。浏览器与服务器需要经过**三次握手**，每次握手需要花费大量时间。而且**不同浏览器对资源文件并发请求数量有限**（[不同浏览器允许并发数][Link 1]），一旦 **HTTP 请求数量**达到**一定数量**，资源请求就存在**等待状态**，这是很致命的，因此**减少 HTTP 的请求数量**可以很大程度上对网站性能进行优化。

**以下是可以减少HTTP请求数量的几种方法：**

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

**存在的问题**：如何对图标进行分类；图标位置不好控制（很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；我们常常会1px的尝试，调整）；不利于维护（新增图标不得不修改整个图，有时候为了保证某一类型的在一块区域，不得不调整其他图标的位置。）；.放大缩小，图片失真

B、合并 CSS 和 JS 文件：现在**前端有很多工程化打包工具**，如：grunt、gulp、webpack等。为了**减少 HTTP 请求数量**，可以通过这些工具**再发布**前**将多个 CSS 或者 多个 JS 合并成一个文件**。

C、采用 lazyLoad：俗称懒加载，可以控制网页上的**内容**在一开始**无需加载，不需要发请求**，**等到用户操作真正需要的时候**立即加载出内容。这样就控制了**网页资源一次性请求数量**。

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

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

A、遵循原则：**主要文件**放在 **head 内部**，**次要文件**放在 **body 底部**。一般情况下都是 **CSS 在头部，JS 在底部**。

**3、利用浏览器缓存**

**基本原理**：浏览器缓存分**强缓存和协商缓存**，他们是将**网络资源存储在本地**，等到下次请求该资源时，如果里面有该资源缓存，就不需要到服务器重新请求该资源，直接在本地读取该资源。

A、强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header（通用消息头被用于在http 请求和响应中通过指定指令来实现缓存机制）。

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

**4、使用CDN**

**基本原理**：CDN的全称是Content Delivery Network，即[内容分发网络][Link 2]。

**CDN的定义**：其基本思路是**尽可能避开互联网上**有可能影响**数据传输速度和稳定性**的**瓶颈和环节**，使内容传输的**更快、更稳定**。通过**在网络各处放置**[**节点服务器**][Link 3]所构成的在现有的互联网基础之上的一层智能[虚拟网络][Link 4]，CDN系统能够实时地根据[网络流量][Link 5]和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息**将用户的请求重新导向离用户最近的服务节点上**。其目的是使**用户可就近取得所需内容**，解决 **Internet网络拥挤的状况**，提高**用户访问网站的响应速度**。

**5、减少重排（Reflow）**

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

**减少 Reflow的方法之一：**如果需要在 DOM 操作时**添加样式**，尽量使用 **增加 class 属性**，**而不是通过 style 操作样式**。

**6、减少 DOM 操作**

**基本原理**：如果说要对统一节点操作的话，可以先将访问到的节点用一个变量保留下来。下次访问该节点的时候，直接通过该变量访问；如果不用变量保存该节点的话，那么每次访问该节点，都需要在DOM树中搜素一遍，相当耗时；同时，用id访问元素节点比用类名访问元素节点要快，因为在一个html文档中只有一个节点，而同名的className可以出现多次，当用id查找元素的时候，只要找到该节点就会停止在DOM数中查找元素；但是用className去查找的话，就会对DOM数的所有的节点都遍历过一次，这相当的耗时。

**7、图标使用 IconFont 替换**

**A、兼容性良好**。现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)

**B、****使用方便；开发人员直接调用样式**，不用为了background-position:准确定位看瞎眼睛

**D、****利于维护**，新增，修改，删除图标方便，各个图标之间相对独立

** E、****体积很小，请求速度快**，可以带来比较好的用户体验

** F、****矢量图**，放大，拉伸不会失真

**8、 js代码优化 **

A、比如要访问一个数组的全部元素，在for循环中，预先将数组的长度用一个变量保存，比每次访问元素时都要计算数组长度的写法的效率要高；

B、用id去访问元素节点比用className去访问元素节点的写法效率高，因为用id访问时，只要找到元素就停止在DOM上查找；而用className去查找元素则要对DOM所有节点都访问一遍。

C、多次对同一节点操作，可以将该节点用一变量保存，下次访问的时候，直接获取变量的 值，而不需要在遍历一次DOM树

9、**前端的动画优化**

比如css3的transform变幻和transition过渡，移动端方面对这两个支持非常好

[Link 1]: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/
[Link 2]: http://zsvalue.com/201405/foundation-of-cdn-%E3%80%8Acdn%E6%8A%80%E6%9C%AF%E8%AF%A6%E8%A7%A3%E3%80%8Bnote/
[Link 3]: https://baike.baidu.com/item/%E8%8A%82%E7%82%B9%E6%9C%8D%E5%8A%A1%E5%99%A8
[Link 4]: https://baike.baidu.com/item/%E8%99%9A%E6%8B%9F%E7%BD%91%E7%BB%9C
[Link 5]: https://baike.baidu.com/item/%E7%BD%91%E7%BB%9C%E6%B5%81%E9%87%8F