Front-end 前端优化总结

Posted 2020-12-19 roy1

一 减少请求数量 

　　a. 早期使用 gulp 合并 或者内嵌js，css， 现在用webpack。

　　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编码内嵌进来。

二  减少请求大小

     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布局，css选择器上少用层次选择器，查询效率低下

　　3.  数据结构和算法上去优化，比如用快排加速排序，用hash表空间换时间O（1），减少GC回收频率，比如for循环中大量new小对象。

        4. http2.0 http3.0彻底解决了队头阻塞等问题。