前端优化

分请求，渲染，代码，屏幕，安全

一、请求优化

1. 减少HTTP请求

   • 打包工具合并CSS/JS文件，字体图标代替图片图标。

2. 资源压缩与优化

   • 使用现代图片格式，使用srcset和<picture>标签实现响应式图片。
   • 压缩图片，压缩CSS/JS。
   • 配置好Tree Shaking移除未使用的代码

3. 缓存

   • 使用Service Worker做离线缓存（PWA）。利用浏览器本地存储非敏感数据。

4. 静态资源CDN托管

二、渲染优化

1. 减少重排（Reflow）和重绘（Repaint）

   • 避免频繁操作DOM。
   • 使用CSS3动画（transform/opacity）替代top/left等属性。
   • 对频繁触发的操作（如scroll/resize）进行防抖/节流。

2. 渲染路径优化（首屏）

   • 延迟加载非关键资源（如loading="lazy"属性对图片和iframe）。
   • 内联关键CSS/JS（Critical CSS/JS）减少首屏渲染阻塞。
   • 使用preload/prefetch预加载关键资源。

3. 代码分割与懒加载

   • 按需动态导入加载代码（React.lazy + Suspense，Vue异步组件）

三、代码优化

1. HTML优化

   • 使用语义化标签（如<header>、<article>）提升SEO。
   • 减少无意义的DOM节点。

2. CSS优化

   • 减少选择器复杂度（如避免div > a > span嵌套）。
   • 使用CSS变量或者封装原子类（减少重复代码）。
   • 启用GPU加速的属性（如will-change属性）。

3. JavaScript优化

   • 避免全局变量污染
   • 耗时循环实现上用效率更高的方式和算法
   • 使用Web Workers处理耗时任务（避免阻塞主线程）。

四、屏幕优化

1. 响应式设计

   • 使用媒体查询（@media）适配不同屏幕。
   • 使用REM/VW单位实现弹性布局。

2. 触控滚动优化

   • 避免点击延迟（touch-action属性）。
   • 优化滚动体验（如-webkit-overflow-scrolling: touch）。

3. 弱网优化

   • 使用骨架屏（Skeleton Screen）提升加载感知。
   • 优先加载核心内容，异步加载次要模块。

4. 用户体验优化

   • 添加加载动画或进度条。
   • 提供友好的错误提示和降级方案。

五、其他优化

1. 安全优化

   • 启用HTTPS。
   • 设置CSP（内容安全策略）防止XSS攻击。