Appearance
项目优化
🚀 前端页面性能优化
资源加载
1. 减少请求数与体积
合并与压缩：合并小文件如CSS Sprites，压缩/删除代码注释，以及在服务端开启Gzip压缩。
图片优化：使用WebP格式、使用雪碧图、压缩图片、懒加载等技术。
2.利用高效网络与缓存
CDN加速与HTTP/2： 利用CDN分布资源，减少延迟；启用HTTP/2协议，实现多路复用，提高并发性能。
强缓存策略：设置Expires或Cache-Control头，利用浏览器缓存静态资源，减少重复请求。
渲染与执行
1.优化关键渲染路径
避免阻塞渲染：将CSS放在
<head>中以保证首屏样式，将JS脚本放在<body>末尾或使用async/defer属性，防止阻塞页面解析。关键CSS内联：将首屏渲染所必需的关键CSS样式直接内嵌在HTML中，避免因请求外部CSS文件而延迟渲染。
2.减少运行时开销
DOM操作优化: 避免频繁操作DOM，将多次DOM操作合并为一次；使用文档片段（DocumentFragment）批量操作DOM，减少重绘重排次数。
事件节流与防抖: 对scroll、resize等高频事件使用节流（throttle）或防抖（debounce），避免函数过度调用。
使用事件委托: 利用事件冒泡机制，将事件监听器绑定在父元素上，统一处理子元素的事件，减少内存占用。
⚙ 打包构建优化
重绘和回流
回流：当渲染树种的一部分或者全部元素因尺寸、布局、隐藏等属性改变而需要重新进行构建，这个过程称为回流（Reflow），也叫重排。回流会导致浏览器重新计算元素的位置和大小，从而影响页面的渲染性能。
重绘：当元素的外观属性（如颜色、背景色、可见性）发生改变，但不影响其布局时，浏览器会执行重绘（Repaint）。重绘的代价小于回流，因为它不需要重新计算几何属性。
优化要点
1. 减少回流：避免频繁操作样式，最好一次性更改（如通过el.style.cssText或修改CSS类名）。减少直接操作DOM，尤其是在循环中。对于复杂动画，使用position: absolute或fixed使其脱离文档流。先隐藏元素（display: none），进行多次修改，然后再显示。
2. 减少重绘：利用浏览器的事件循环机制，将多次DOM读写操作合并（Vue/React的异步更新队列已帮我们做了很多优化）。注意那些会触发回流或重绘的CSS属性（如offsetTop, scrollTop等），避免频繁读取。
相关注释
多路复用
HTTP/2 允许在同一个TCP连接上同时发送多个请求和响应，而不是像HTTP/1.1那样每个请求都需要建立一个新的连接。这大大提高了并发性能，减少了延迟。