跳到主要内容

资源加载优化

工程化与静态文件层面怎么优化？​

  • 工程化: 最小化、混淆、分块;
  • 静态文件: 使用 CDN、静态资源本地缓存、开启 gzip;

HTML 与 JS 怎么优化？​

  • HTML: 减少 DOM 层级、使用响应式图片/视频、使用 SSR;
  • JS:
    • 减小入口文件体积与执行时间;
    • 用 preload 配合 as 预加载;
    • 用 import() 动态加载;
    • 减少第三方代码;
    • 用 async/defer 异步或延迟加载;
    • 放在 HTML 底部;

CSS 怎么优化？​

  • 压缩 CSS;
  • 用 preload 配合 as 预加载;
  • 关键 CSS 内联;
  • 合理使用选择器: 避免过多选择器, 避免通配符选择器与属性选择器;
  • 放在 HTML 底部, 或用 JS 动态加载;