码迷,mamicode.com
首页 > 其他好文 > 详细

Front-end 前端优化总结

时间:2020-07-28 22:42:17      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:set   使用   回收   url   base64编码   ast   去掉空格   渲染路径   strong   

一 减少请求数量 

  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 前端优化总结

标签:set   使用   回收   url   base64编码   ast   去掉空格   渲染路径   strong   

原文地址:https://www.cnblogs.com/roy1/p/13393882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!