前端常规的性能优化手段
2023 javascript css http网页性能优化是经常会被询问的一个点。
网络优化策略
减少 HTTP 请求
合并 JS，合并 CSS，使用 CSS sprite。
使用 HTTP 缓存
使用强制缓存可以不走网络请求，直接走本地缓存数据来加载资源。
使用协商缓存可以减少数据传输，当不需要更新数据时可通知客户端直接使用本地缓存。
使用 HTTP/2.0
使用 HTTP/2.0 的功能，多路复用，首部压缩，服务器推送等。
CDN
静态资源上 CDN，CDN 能非常有效的加快网站静态资源的访问速度。
压缩
gzip 压缩，html 压缩，JS 压缩，CSS 压缩，图片压缩
浏览器渲染优化策略
关键渲染路径的优化
在 JS 或者其他方式进行修改 DOM 后，浏览器会进行：
DOM 构建 -> CSSOM 构建 -> 合成渲染树 -> 布局 -> 绘制
Reflow 重排：重排在 Chrome Performance 中叫做布局，通常添加或删除元素、修改元素大小、移动元素位置、获取位置信息都会触发页面的重排，因为重排可能会改变元素的大小位置等信息，这样的改变会影响到页面大量其它元素的大小位置信息，会耗费掉大量的性能，所以在实际应用中我们应该尽可能的减少重排
Repaint 重绘：重绘在 Chrome Performance 中叫做绘制，通常样式改变但没有影响位置时会触发重绘操作，重绘性能还好，但我们也需要尽量减少重绘，如果需要做一些动画，我们尽量使用 CSS3 动画，CSS3 动画只需要在初始化时绘制一次，之后的动画都不会触发重绘操作。
静态文件的优化策略
CSS
- 将样式表放到页面顶部
- 避免 css 表达式
JavaScript
- 将脚本放到页面底部
- 使用 webworker 解决复杂运算，避免复杂运算阻塞主线程，webworker 线程位于渲染进程
- 使用事件委托，能减少事件绑定个数
浏览器储存优化策略
Cookie
cookie 在过期之前一直有效，最大储存大小为 4k，限制字段个数，不适合大量的数据储存，每次请求会携带 cookie，主要用来做身份校验。
优化方式：
- 需要合理设置 cookie 有效期
- 根据不同子域划分 cookie 来减少 cookie 传输
- 静态资源域名和 cookie 域名采用不同域名，避免静态资源请求携带 cookie。