网络层面
网络层面的性能优化，无疑是如何让资源体积更小加载更快。
- 构建策略：基于构建工具(webpack/Rollup/Parcel/esbuild/Vite/Gulp)
- 图像策略：基于图像类型(JPG/PNG/SVG/WebP/Base64)
- 分发策略：基于内容分发网络(CDN)
- 缓存策略：基于浏览器缓存(强缓存/协商缓存)
缓存策略
该策略主要围绕浏览器缓存做相关处理，同时也使接入成本最低的性能优化策略。其显著减少网络传输所带来的损耗，提升网页访问速度，是一种很值得使用的性能优化策略。 通过下图可知，为了让浏览器缓存发挥最大作用，该策略尽量遵循以下五点就能发挥浏览器缓存最大作用。
- 考虑拒绝一切缓存策略：Cache-Control:no-store
- 考虑资源是否每次向服务器请求：Cache-Control:no-cache
- 考虑资源是否被代理服务器缓存：Cache-Control:public/private
- 考虑资源过期时间：Expires:t/Cache-Control:max-age=t,s-maxage=t
- 考虑协商缓存：Last-Modified/Etag
渲染层面
渲染层面的性能优化，无疑是如何让代码解析更好执行更快。因此笔者从以下五方面做出建议。
- CSS 策略：基于 CSS 规则
- DOM 策略：基于 DOM 操作
- 阻塞策略：基于脚本加载
- 回流重绘策略：基于回流重绘
- 异步更新策略：基于异步更新
CSS 策略
避免出现超过三层的嵌套规则 避免为 ID 选择器添加多余选择器 避免使用标签选择器代替类选择器 避免使用通配选择器，只对目标节点声明规则 避免重复匹配重复定义，关注可继承属性
DOM 策略
缓存 DOM 计算属性 避免过多 DOM 操作 使用 DOMFragment 缓存批量化 DOM 操作
阻塞策略
脚本与 DOM/其它脚本的依赖关系很强：对<script>设置 defer 脚本与 DOM/其它脚本的依赖关系不强：对<script>设置 async
回流重绘策略
缓存 DOM 计算属性 使用类合并样式，避免逐条改变样式 使用 display 控制 DOM 显隐，将 DOM 离线化
异步更新策略
在异步任务中修改 DOM 时把其包装成微任务