前端性能优化

前端性能优化的手段

减少 http 请求

1. base64 处理图片
2. 减少重定向
3. 使用缓存
4. 不使用 css 的 @import

减少资源太小(压缩)

1. webpack

压缩 html HtmlWebpackPlugin 配置 minify

压缩 css optimize-css-assets-webpack-plugin

压缩 js mode: ‘production’ (自动使用 terser-webpack-plugin)

2. 开启 gzip 编码

开发模式下：webpack-dev-server 配置 compress: true

生产模式下：服务端配置，如 express 使用 compression 中间件

优化网络连接

1. 内容分发网络 CDN

根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

2. DNS 预解析

DNS 预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

方法是在 head 标签里面写上几个 link 标签

<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">

对以上几个网站提前解析 DNS，由于它是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间

优化资源加载

1. 资源加载位置

通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用

CSS文件放在head中

JS文件放在body底部，或者使用 defer/async

2. 资源加载时机

按需加载

懒加载与预加载

减少重绘回流

1. 避免使用层级较深的选择器

2. 防抖节流

3. DocumentFragment

让DOM操作发生在内存中，而不是页面上；可以实现离线更新

4. 事件代理
5. 动画 GPU 加速

性能更好的API

1. requestAnimationFrame来替代setTimeout和setInterval
2. 使用IntersectionObserver来实现图片可视区域的懒加载

webpack优化

1. treeshaking 去除无用代码

2. 文件缓存

hash chunkhash contenthash