Front-end 前端优化总结

Posted roy1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Front-end 前端优化总结相关的知识,希望对你有一定的参考价值。

一 减少请求数量 

  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彻底解决了队头阻塞等问题。

  

  

 

  

以上是关于Front-end 前端优化总结的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化总结

前端性能的优化总结

前端开发代码结构及性能优化大总结

前端性能优化归纳总结

前端优化总结

前端优化总结