前端性能优化的几种方式
- 浏览器缓存
- 防抖、节流
- 资源懒加载、预加载
- 开启Nginx gzip压缩
三个方面来说明前端性能优化
一. webpack优化与开启gzip压缩
- babel-loader用include或exclude来帮我们避免不必要的转译,不转译node_modules中的文件,其次在缓存当前转译的js文件,设置
loader: 'babel-loader?cacheDirectory = true' - 文件采用按需加载等等
- 具体的做法非常简单,只需要你在你的
request headers中加上这么一句:accept-encoding: gzip - 图片优化,采用svg图片或者字体图标
- 浏览器缓存机制,它又分为强缓存和协商缓存
二. 本地存储 --- 从Cookie到Web Storage , IndexedDb. 说明一下SessionStorage和localStorage的区别和优缺点
三. 代码优化
- 事件代理
- 事件的节流和防抖
- 页面的回流和重绘
- EventLoop事件循环机制
- 代码优化等等
