1. 犀牛前端部落首页
  2. 前端面试题

前端面试题-资源优化

资源的压缩与合并

为什么要压缩与合并

  • 减少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应用监测与分析

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4318.html

发表评论

登录后才能评论