- 今天学到一个单词,flamingo 火烈鸟 英 /fləˈmɪŋɡəʊ/ 美 /fləˈmɪŋɡoʊ/
听到这个发音第一时间就想到了海贼王的多弗朗明哥,原来他的名字和造型就是源于火烈鸟,有点意思1 赞 · 5 评论 - 软考差2分,谁能懂我现在的痛?
软考中级2科,每科45分通过,结果我考了43分……
人生目前为止,除了驾驶证补考了3次通过,其它什么证都没考通过!我痛哭流涕!1 赞 · 14 评论 - 如何提高前端应用的性能?
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**:使用 `Terser` 压缩 JS,`CSSNano` 压缩 CSS,`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**(Webpack/Rollup):移除未使用的代码。
- **图片优化**:使用 WebP/AVIF 格式,`sharp` 或 `imagemin` 压缩图片。
#### **2. 减少 HTTP 请求**
- **合并文件**:CSS/JS 打包成单个文件(但避免过大)。
- **使用雪碧图(CSS Sprites)** 减少小图标请求。
- **HTTP/2 多路复用** 提升并发加载效率。
#### **3. 缓存策略**
- **强缓存(Cache-Control: max-age)**:静态资源设置长期缓存。
- **协商缓存(ETag/Last-Modified)**:减少重复传输。
- **Service Worker**:离线缓存关键资源(PWA)。
#### **4. 代码优化**
- **防抖/节流**:减少高频事件(如 `resize`、`scroll`)的触发频率。
- **虚拟列表(Virtual Scrolling)**:大数据列表只渲染可见区域(React `react-window`)。
- **Web Workers**:将耗时计算移出主线程。
#### **5. 渲染优化**
- **减少重排(Reflow)**:使用 `transform`/`opacity` 代替 `top`/`left` 动画。
- **懒加载(Lazy Load)**:图片/组件按需加载(`IntersectionObserver`)。
- **代码分割(Code Splitting)**:动态加载路由组件(React `React.lazy`)。
#### **6. 工具检测**
- **Lighthouse**:分析性能评分。
- **WebPageTest**:多地点/设备测试加载速度。
- **Chrome DevTools Performance**:定位渲染瓶颈。2 赞 · 2 评论