前端面试题-资源优化

资源的压缩与合并

为什么要压缩与合并

• 减少http请求数量
• 减少请求资源大小

HTML压缩

• 使用在线工具进行压缩
• 使用html-minifier等npm工具

CSS压缩

• 使用在线工具进行压缩
• 使用clean-css等npm工具

JS压缩与混淆

• 使用在线工具进行压缩
• 使用Wabpack对JS在构建时压缩

CSS JS文件合并

• 若干小文件
• 无冲突，服务相同的模块

图片优化

图片格式比较

• JPEG/JPG图片
  • 优点：高压缩比、画质保存
  • 场景：首屏轮播
  • 缺点：纹理边缘锯齿感模糊
  • 工具：imagemin
• PNG图片
  • 优点：透明、线条纹理边缘细腻程度
  • 场景：图标、logo
  • 缺点：体积较大
  • 工具：imagemin-pngquant
• WebP图片
• 兼容性差

图片加载

• 原生的图片懒加载方案
• 第三方图片懒加载方案
  • lazyload
  • yall.js
  • Blazy
• 使用渐进式图片
  • progressive-image
  • ImageMagick
  • libjpeg
  • jpegtran
  • jpeg-recompress
  • imagemin
• 使用响应式图片
  • srcset属性的使用
  • sizes属性的使用
  • picture的使用

字体优化

FIOT和FOUT

• 字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
• Flash Of Invisible Text
• Flash Of Unstyled Text

使用font-display

• auto
• block
• swap
• fallback
• optional

Webpack应用监测与分析

• stats分析与可视化图 – https://alexkuz.github.io/webpack-chart/
• webpack-bundle-analyzer进行体积优化（source-map-explorer含百分比）
• speed-measure-webpack-plugin速度分析