前端优化手段

路由懒加载  组建懒加载 分包 dll打包抽离  骨架屏 虚拟滚动 分帧渲染 分片渲染  web worker 长任务  preload prefetch 图片懒加载 图片压缩  精灵图 svg canvas base64

动画用requestAnimationFrame替代setTimeout setInterval  requestAnimationFrame是GUI引擎 setTimeout setInterval是js引擎

浏览器缓存 强缓存弱缓存 cdn部署 dns查询优化  gzip brotli nginx开启压缩  http2  keep-alive  请求合并  

1.提升单次脚本的执行速度，避免长任务占用主线程，可以使页面快速响应交互

2.避免大的内连脚本，解析和编译都会占用主线程

3.减少javascript文件大小，提高下载速度

<meta http-equiv="x-dns-prefetch-control" content="on" /> ​

<link rel="dns-prefetch" href="https://s.google.com/" >

css上

• content-visibility
• contain
• will-change