前端性能优化综合分析

一，性能问题的简单分析、直接表现、根本原因

简单分析：

首先，一个完整的页面主要由两部分组成，一是UI，二是数据。如果按照MVC架构，或是数据与表现分离的思想，还可以细分成三部分。一是通过html(结构)+css(表现)渲染出来的UI层(view)，二是通过http来完成的数据层(model)，三是将数据填充到view或者DOM操作的控制层(controller)。

于是，一次完整的页面加载就可以分成三部分工作，一是view渲染(UI)，二是数据加载(http)，三是数据填充到view或更改(DOM操作)。其中只要有一个环节出问题，都有可能造成性能问题。

综上所述，我们可以总结出三个主要可能造成性能问题的环节：UI渲染、http请求、DOM操作。

总而言之，要优化性能问题，就需要对可能造成性能问题的环节逐个击破。

直接表现：

1，页面加载时间过长

2，卡顿、闪现、页面结构错乱等现象

根本原因：

1，DOM结构复杂

2，过度或不恰当的DOM操作

3，http请求过多、请求时间过长、请求异常(中断、无响应、请求错误)等情况

下面，针对以上可能造成性能问题的环节，进行逐个优化。

二，性能优化之——DOM结构优化

1，保证简洁、清晰的html结构，减少或避免多余的html标签

2，使用HTML5的web语义化标签，保证结构清晰，同时利于seo

3，避免过于复杂的DOM结构，避免过度嵌套

4，采用SPA(单页应用)模式开发，动态按需加载

三，性能优化之——DOM操作优化

1，理解DOM操作：

为什么DOM操作会引起性能问题？

首先，每次DOM操作，页面DOM结构通常都有可能会被改变，浏览器一旦检测到DOM结构发生改变，就会进行全局的重绘，相当于每次DOM操作都对页面重新渲染了一遍。

因此DOM操作的过程其实是页面不断重复渲染的过程，如果这个过程很复杂，或者操作频繁，或逻辑错误，就会造成性能问题。

可是，DOM操作是不可避免的，于是我们优化的思路是减少DOM操作频率。

2, 减少DOM操作的方法：

(1) 使用innerHTML属性替代DOM操作

innerHTML不会进行全局的重绘，而是局部重绘，因此对性能影响较小。

(2) 使用react、vue等性能较好的框架

这类框架都对DOM操作进行过特殊处理，性能较好。以react为例，react内部将虚拟DOM、diff算法、innerHTML三者结合起来处理DOM操作，避免了用户直接操作DOM。

(3) 避免或减少使用jquery等DOM操作库

四，性能优化之——http优化

http性能优化方法：优化静态资源和api请求。

(一) 理解http请求

1，理解http请求的类型

http请求分两大类，一类是静态资源请求，另一类就是api请求(请求后台接口)。

(1) 静态资源请求

所谓静态资源请求，就是页面加载时从服务器下载html、css、js、图片等静态资源文件。

(2) api请求

所谓api请求，就是请求后台的接口所发出的http请求。如下图:

简而言之，http性能优化，其实是对静态资源(html、css、js、图片)和api请求的优化。

2，理解http请求带来的性能问题：

如果你理解http工作原理，那应该知道每次http请求过程的复杂性，代价是很高的。
因此，如果出现http请求过多、请求时间过长、请求异常(中断、无响应、请求错误)等都有可能会对性能造成影响。

下面就针对http请求的优化方案展开讲解。

(二) 静态资源优化

静态资源有html、css、js、图片等类型。因此要对它们进行分门别类地优化。

如果请求的静态资源过多、过大、或不存在等，都可能会造成性能问题。

静态资源优化的办法，就是对静态资源进行切割、合并、压缩等处理，以达到缩小静态资源体积、减少静态资源请求次数等目标，以实现快速完成http请求的过程。

下面对静态资源优化，分门别类来讲解。

1，html结构优化

(1) 保证简洁、清晰的html结构，减少或避免多余的html标签(2)     使用HTML5的web语义化标签，结构清晰且利于seo(3) css文件在head中引入，js文件放在body底部引入，这样做可以防止阻塞。另外如果有需要提前加    载的js，请在window.onload方法中处理。 解释： 浏览器加载js文件时其他一切渲染活动都会停止，直到js文件下载完成， 如果把js文件放头部       加载，就会造成阻塞，也就是加载js时会阻止页面渲染。 因此通常js文件需要放body底部加       载，等页面渲染完成后再加载js文件。

2，css优化

(1) 使用gulp、webpack等构建工具，对css进行合并、压缩等处理，以缩小css文件体积(2) 如果你的应用css样式很庞大，可拆分成多个css文件，并做压缩处理，避免单个css文件过大(3) 如果使用webpack，推荐使用extract-text-webpack-plugin之类的插件将css样式抽离出来，防止其随js一起打包(4) 如果使用react、vue等框架，推荐使用css-modules、css in js等css模块化解决方案。(5) 使用sass/less等预编译处理方案(后期不推荐使用，推荐使用css模块化方案)(6) 尽量减少或避免使用内联样式(7) 对于一些需要复杂计算的样式，比如box-shadow、import等，减少使用。(8) 使用css3动画时，请开启GPU硬件加速。

3，js优化

(1) 使用gulp、webpack等构建工具进行合并、压缩处理，以缩小js文件体积和数量(2) 使用webpack构建时，推荐拆分成2-3个js文件进行打包，并开启压缩，防止单个js文件过大(3) 使用webpack构建时，推荐使用tree-shaking、prepack插件优化js代码构建，缩小体积(4) 使用innerHTML替代DOM操作，防止页面不断重复地全局渲染(5) 使用react、vue等高性能UI构建框架，避免直接操作DOM。(6) 使用jslint等js语法检查工具，优化js代码

4，图片资源优化

(1) 图片合并——对小图进行sprite(雪碧图)处理(2) 图片压缩——缩小图片体积(3) 图片大小——做图时避免单个图片过大，最好能控制在500k以内(个人觉得应该控制在200k)

静态资源优化推荐的工具：gulp、webpack、fis3

(三) api请求优化

api请求，也就是请求后端工程师编写的后台接口，如果请求过程中出现中断、挂起(无响应)、响应超时、响应时间过长等问题，使得客户端长时间获取不到数据，页面得不到数据填充，也会造成性能影响。

api请求优化主要从两方面入手，一是客户端做http请求异常处理，二是后端接口优化。

1，http请求异常处理

(1) 请求超时处理——timeout   当http请求超过限定的时间后中断请求，给予用户相应的提示。(2) 错误处理   根据不同的响应错误给予用户相应的提示。

2，后端接口优化

(1) 避免无响应的情况发生(2) 避免过度操作复杂的逻辑(3) 避免过度的嵌套查询(4) 与前端约定好一套响应规则，包括响应状态码、数据格式、消息提示等等(5) 服务器开启gzip压缩、以及服务器缓存

四，其他优化

      1，服务器缓存   善用缓存，只加载初始化或有更新状态的资源，对无更新状态的资源则返回已缓存的结果。   这样可实现快速响应请求、减少服务器带宽占用和资源浪费。   对于资源的更新，可对资源添加时间戳或随机字符串的形式来处理，可参考gulp、webpack     版本控制实现  2，客户端缓存——cookie、WebStorage   客户端可对http请求的结果进行缓存，在数据无更新的状态下，可直接使用已缓存的结果，   而不用再次发出多余的http请求。这对于一些不变或更新频率较低的数据尤为实用。   客户端缓存的方案主要有cookie、WebStorage、Application Cache。善用它们可提高   你的应用的性能。 3，使用cdn存储静态资源        使用cdn服务器存储图片、文件、音频/视频等静态资源文件，这样可避免过多占用服务器带   宽和服务器磁盘空间。   若配置有不同地域多节点cdn服务器，可实现就近节点传输，加快http请求速度。

转载：https://zhuanlan.zhihu.com/p/27249923