前端性能优化-资源优化

奋进的技术人
237 阅读4分钟
一、HTML压缩
  • 使用在线工具压缩
  • 使用html-minifier等npm工具
二、CSS压缩
  • 使用在线工具进行压缩
  • 使用clean-css等npm工具
三、JS压缩与混淆
  • 使用在线工具进行压缩
  • 使用webpack对js在构建时压缩
四、CSS JS文件合并
  • 如果是若干小资源文件合并之后的资源同样很小，可以进行合并
  • JS文件合并之后没有变量名冲突等，同时服务于相同的模块，可以进行合并
  • 如果只是为了进行资源优化而合并则不建议强行合并。因为将所有资源都压缩到一个文件可能导致文件过大，短时间内无法在界面上进行渲染，导致用户体验不好，现在提倡的都是渐进式加载，重要的部分可以先加载，先呈现给用户，这样用户体验会好很多，而且现在有很多缓存的技术，这样的话文件修改了一点点就要缓存重新更新
五、图片优化的方案
  • 选择正确的图片格式
  • 选择合适大小的图片，不过大也不过小
  • 选择在不同的屏幕上都有合适的尺寸的图片
  • 根据实际的用途选择图片的压缩比例，对图片质量高压缩比例就可以小一些
  • 要有加载的优先级，重要的图片先加载（事实上所有的资源都有加载的优先级）
  • 懒加载
  • 利用一些自动化的工具进行优化
六、图片格式比较
  1. JPEG/JPG格式
  • 优点：色彩丰富，体积小
  • 使用场景：需要同时保证画质和色彩的场景，如轮播图等
  • 缺陷：因为压缩比高，所以对于有比较强纹理和边缘的图片会有锯齿感，如Logo就不太适合
  • 可以利用的工具：imagemin（可以对jpg图片进行压缩，或则转换成jpg图片）
  1. PNG图片
  • 优点：可以做透明的图片，色彩丰富程度和JPG不相上下，主要是弥补了jpg的一些缺点
  • 使用场景：适合做小图片，细节纹理这些图片可以用PNG做好
  • 缺陷：体积相对会大一些
  • 可以利用的工具：imagemin-pngquant(可以对图片进行极大的压缩，压缩比一般设置在60%~80%之间)
  1. WebP格式
  • 有PNG相近的质量，但压缩比更高
  • 谷歌开发的，目前应用还不是特别广泛
七、图片优化-图片加载优化

1.图片懒加载（lazy loading）

原生的图片懒加载方案：给img标签添加loading="lazy"属性，但是自定义和可扩展性不好

<img loading="lazy" src="" width="" height="" alt="" />

第三方图片懒加载方案

  • verlok/lazyload

  • yall.js

  • Blazy

  • react-lazy-load-image-component

2.使用渐进式图片

  • 图片加载默认使用基线加载方式，用户体验不好
  • 优点：体验好
  • 缺点：图片越大加载时间越长

渐进式图片解决方案：

  • progressive-image
  • ImageMagick
  • libjpeg
  • jprgtran
  • jpeg-recompress
  • imagemin

3.使用响应式图片

  • Srcset属性的使用
  • Sizes属性的使用
  • picture元素的使用：新标签，浏览器还不能很好的支持
// srcset属性即图片源的集合，根据不同的尺寸加载不同的图片

<img src="pic-200.jpg" sizes="100vw" srcset="pic-100.jpg 100w, pic-200.jpg 200w, pic-400.jpg 400w, pic-1000.jpg 1000w, pic-1800.jpg 1800w" alt="" />
八、字体优化
  • 字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
  • Flash Of Invisible Text(FOIT)：字体从看不见到看见之间闪烁的问题
  • Flash Of Unstyled Text(FOUT)：一开始是一种字体，加载完之后变成另一种字体的过程中闪烁的问题
  • FOIT和FOUT无法避免，因为资源加载需要时间

解决方案：使用font-display属性

  • 目前仅IE和Edge支持不好，其他浏览器兼容性都还可以

font-display样式属性的值：

  • auto：默认
  • block：本意是阻塞，有3s等待期，3s之后字体下载完再显示，如果3s之后还没下载完则先用默认字体代替，等字体下载完再替换
  • swap：本意替换，先用默认字体显示，等字体下载完再替换，但是如果字体文件很大，则一开始会有较长时间看起来不美观
  • fallback：对block的一种优化，将block的等待期缩减到100ms
  • optional：为手机端特别优化，一开始会有100ms的等待期，然后会根据对网络情况的判断选择字体，如果网络好则加载下载的字体，否则加载默认字体，但是一经确定就不会再更改了

字体的引入：

  • 使用CSS Font Loading API(eg: FontFace API)
@font-face {
    font-family: 'Long Cang';
    font-style: normal;
    font-weight: 400;
    src: local('Long Cang Regular'), url("http://"); // 字体加载的地址
    unicode-range: U+fee3, U+fef3, U+ff07; // 字符集
}
  • 使用AJAX + Base64 将字体嵌入css或则嵌入js

缺点：缓存问题，字体缓存依赖于css或则js的缓存，缓存变得不可控

注：内容根据慕课网@Mr_Max相关视频教程整理

avatar
文章
阅读
粉丝