Front-end 前端优化总结

前端优化的维度其实非常多，使用不同的前端框架（React / Vue），还可以做针对性的优化。实际工作中，应该根据问题的具体表现，分析出性能瓶颈，从业务和技术的角度，找出优化方案，本文主要从一些基础公共的视角去分享一些优化点。

一 减少请求数量 

　　a. 早期使用 gulp 合并 或者内嵌js，css， 现在用webpack打包压缩，treeshaking等。

　　b. 使用浏览器缓存，http1.0 （expired, last-modified,  if-modifed-since）, http1.1（cache-control ETag, if-none-match）

       c. code split + 按需加载 或者动态加载， 首页只加载当前需要的，react.lazy(()=>import('./pdfView.js')), import('../a.js'), react-loader 库

　　d. css中使用雪碧图 （css sprites），background-(posizition repeact)做定位，把多个图片合成在一起，当然对于一些比较小的图片，也可以urlEncode base64编码内嵌进来，它的问题是多个图片资源整合为一个大图片后，其中一个小图元需要更新，就要重新生成大图片，加载一个大的雪碧图，且http2/3 不适合合并多个资源这个优化技巧。

二  减少请求大小

     a. 压缩 去掉空格，注释，可能还有些混淆策略，比如把长方法名替换为短方法名。

　 b.  通过TreeShaking, 过滤掉没用，或者没有使用的代码，这里有CSS和JS的代码，CSS需要单独插件配合。

　 c. 对图片进行压缩，image-loader

三 减少重排  重绘，因为它会占用渲染进程中主线程的时间，且在整个渲染流水线的前期，渲染路径最长。

　a. OffsetWidth/Height  ClientWidth/Height ScroolWidth  避免使用，或者缓存到变量中给多次使用。

　b. 多个css属性操作，对一个字符串操作后，一次性赋值给class

　c. 利用css3中的transform等属性，单独分层，利用GPU和硬件加速手段。

四 其他

     a.  使用多个服务器存一些图片等静态资源, CDN做缓存，摆脱浏览器对单个服务器资源请求个数限制，比如chrome是6个，这样也可以减少了Cookie传输。

　 b. html + css使用上注意，比如少用原生的table布局（层次复杂，容易一个微小的cell变动就导致整个table需要重绘），css选择器上少用层次选择器，查询效率低下

　 c.  数据结构和算法上去优化, 大量循环.递归，比如用快排加速排序，用hash表空间换时间O（1），减少GC回收频率，比如for循环中大量new小对象，短路语句优先执行

　 d. 从JS对象层面去优化，复用隐藏类（chrome中是map对象，它主要是存属性内容的偏移量，快速拿出值）等，少动态对一个对象增加和删除属性，这样会导致当前隐藏类失效，需要重新构建。

     e. 使用更高版本的http协议，如http2.0解决应用层面的队头阻塞， http3.0使用基于UDP的QUIK协议彻底解决了队头阻塞等问题。

　 f. 比如大列表的渲染,大量dom的渲染

　 g.大量图片的加载,过多资源的请求

     h. 编写的组件过于庞大 层级过深,依赖模块过多

     i.用字体图标代替图片

     j. 过大的第三方库能不能换成轻量级的,代码中有没有很耗时的操作循环和递归,过多的分支条件语句,能不能改写以提高执行效率,简化复杂的组件逻辑,减少不必要的依赖,是否有杀鸡用了牛刀的操作

      // to do， there may be many items to optimize your front-end code