获得徽章 0
赞了这篇沸点
如何提高前端应用的性能？
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **图片优化**：使用 `WebP` 格式，`ImageOptim` 压缩，`srcset` 适配不同分辨率。
- **Tree Shaking**：移除未使用的 JS/CSS（Webpack/Rollup 支持）。
#### **2. 减少 HTTP 请求**
- **合并文件**：合并小文件（如多个 CSS/JS 合并）。
- **使用雪碧图（CSS Sprites）**：减少小图标请求。
- **内联关键 CSS/JS**：首屏关键代码内联，减少阻塞渲染。
#### **3. 缓存优化**
- **强缓存（Cache-Control）**：`max-age=31536000` 长期缓存静态资源。
- **协商缓存（ETag/Last-Modified）**：减少重复下载。
- **Service Worker**：离线缓存（PWA 方案）。
#### **4. 代码执行优化**
- **防抖/节流**：减少高频事件（如 `scroll`、`resize`）触发次数。
- **虚拟列表（Virtual Scrolling）**：大数据列表只渲染可见区域（React `react-window`）。
- **Web Workers**：复杂计算移出主线程。
#### **5. 渲染优化**
- **减少重排/重绘**：使用 `transform` 替代 `top/left` 动画。
- **GPU 加速**：`will-change` 或 `transform: translateZ(0)` 提升动画性能。
- **懒加载（Lazy Load）**：图片/组件按需加载（`IntersectionObserver`）。
#### **6. 现代前端优化**
- **代码拆分（Code Splitting）**：动态加载路由组件（React `React.lazy`）。
- **预加载（Preload/Prefetch）*
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **图片优化**：使用 `WebP` 格式，`ImageOptim` 压缩，`srcset` 适配不同分辨率。
- **Tree Shaking**：移除未使用的 JS/CSS（Webpack/Rollup 支持）。
#### **2. 减少 HTTP 请求**
- **合并文件**：合并小文件（如多个 CSS/JS 合并）。
- **使用雪碧图（CSS Sprites）**：减少小图标请求。
- **内联关键 CSS/JS**：首屏关键代码内联，减少阻塞渲染。
#### **3. 缓存优化**
- **强缓存（Cache-Control）**：`max-age=31536000` 长期缓存静态资源。
- **协商缓存（ETag/Last-Modified）**：减少重复下载。
- **Service Worker**：离线缓存（PWA 方案）。
#### **4. 代码执行优化**
- **防抖/节流**：减少高频事件（如 `scroll`、`resize`）触发次数。
- **虚拟列表（Virtual Scrolling）**：大数据列表只渲染可见区域（React `react-window`）。
- **Web Workers**：复杂计算移出主线程。
#### **5. 渲染优化**
- **减少重排/重绘**：使用 `transform` 替代 `top/left` 动画。
- **GPU 加速**：`will-change` 或 `transform: translateZ(0)` 提升动画性能。
- **懒加载（Lazy Load）**：图片/组件按需加载（`IntersectionObserver`）。
#### **6. 现代前端优化**
- **代码拆分（Code Splitting）**：动态加载路由组件（React `React.lazy`）。
- **预加载（Preload/Prefetch）*
展开
评论
1
赞了这篇沸点
如何提高前端应用的性能？
### **前端性能优化核心方案**
#### **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**：定位渲染瓶颈。
### **前端性能优化核心方案**
#### **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
赞了这篇文章
赞了这篇文章
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
老婆被公司裁员了，三个月试用期，明天就转正的，上周五谈话说她试用期考核不合格不予转正，要她一天内办理离职；周六陪老婆去公司搬东西办手续，结果公司居然想开自愿离职证明文件并且表示如果不签的话就不给发放还未结算的工资和加班费，关于考核问题公司只是凭一张主观的不合格理由通知，我们一一驳回了那些理由，公司也没有其他证明材料证明不通过原因，坚持不开具真实合法的离职证明文件，随即报警了，派出所出警了过来协商说这个事情要找劳保局，并且给了一个地址和电话，周一老婆自己去了劳保局，到了现场发现那个地址是劳动关系矛盾调解中心，问询了相关情况和文件后表示公司存在违法行为，又让我老婆自己去仲裁或者找劳动监察大队去申请；
展开
59
8
赞了这篇文章
赞了这篇文章
![[猪头]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_100.6adf5c8.png)
JYM，遇到个echart问题，求帮忙~
第一张图是使用echart的line图画出来的类似甘特图组件，其中的yAxis.type设置了category类型，xAxis.type也是category类型，出问题了；当series.data有数据是null或者是undefined的时候，正常情况下是不画这部分区域的，因为两个轴都设置了category，只要series.data长度和xAxis.data的长度一致时就会画满当前行，又没办法过滤掉null值，因为这些值可能出现在任意位置上；用甘特图写的话不好处理每一个日期的tooltip效果，所以用了echart；将yAxis改成value类型的话Y轴样式又控制不了，包括splitNumber分割长度和显示位置，如图2，3是改成value的效果
测试配置链接
codesandbox.io
第一张图是使用echart的line图画出来的类似甘特图组件，其中的yAxis.type设置了category类型，xAxis.type也是category类型，出问题了；当series.data有数据是null或者是undefined的时候，正常情况下是不画这部分区域的，因为两个轴都设置了category，只要series.data长度和xAxis.data的长度一致时就会画满当前行，又没办法过滤掉null值，因为这些值可能出现在任意位置上；用甘特图写的话不好处理每一个日期的tooltip效果，所以用了echart；将yAxis改成value类型的话Y轴样式又控制不了，包括splitNumber分割长度和显示位置，如图2，3是改成value的效果
测试配置链接
codesandbox.io
展开
评论
点赞
赞了这篇文章
JYM，有什么甘特图组件能支持一个任务有多个不同的开始结束时间，展示在同一行，比如Project#1中有除了图片一条数据，4月9日-4月12日也有数据，每个不同的时间范围用不同的颜色区分
8
2