前端面试题:如何进行前端的性能优化?

 一、DOM层面的优化

  1.减少重绘和重排

  2.使用事件委托

  3.函数的防抖与节流

  4.requestAnimationFrame(),将数据进行分割,分批次渲染,减少JS的连续运行时间

 二、HTTP网络层面的优化

  1.减少http请求次数

  2.资源和数据使用缓存

  3.DNS预解析处理

  4.图片的优化处理

 三、Vue层面的优化

  1.v-if 和 v-show的分场景使用

  2.computed 和 watch的分场景使用

  3.图片懒加载

  4.路由懒加载

  5.ui库插件的按需引入

  6.组件使用keep-alive 缓存

  7.事件的销毁

  8.服务端渲染SSR,预渲染

 四、webpack层面的优化

  1.使用webpack对图片进行压缩

  2.减少es6转为es5的冗余代码

  3.提取公共代码

  4.模板预编译

  5.提取组件的CSS

  6.优化SourceMap

  7.开启gzip压缩

  8.浏览器缓存

  9.CDN的使用

 

posted @ 2022-11-19 10:30  啊呀阿鱼呀  阅读(253)  评论(0编辑  收藏  举报