前端性能优化-资源方面

1.为什么要压缩/合并

1.减少http请求数量

2.减少请求资源大小

3.压缩

1.html/css压缩

在线工具压缩,插件html-minifier-terser,clean-css压缩

2.js压缩与混淆

webpack对js进行压缩

4.合并

css/js文件合并，虽然减少http请求，但是后续的解析出不同逻辑会很麻烦

js文件之间没有冲突

且如果有些js文件可以后续再加载实现懒加载减少首屏渲染时间的话，我们就不合并 需要的内容先加载 后续的内容后续加载

且有缓存问题，你js全部合并再一起，那么一个文件变化将整个文件都不能用缓存

2.图片优化 其实图片文件比js什么文件大很多

1.选择正确的图片格式 不同格式有不同的优缺点

2.图片尺寸大小要合适 我们不要用过大尺寸的图片再网络上传输 然后再代码里再去设置宽高 因为尺寸大，size也大

3.适配不同屏幕的尺寸，不同屏幕返回不同的尺寸

4.图片压缩 但是要在图片精致之间权衡

5.图片资源优先级 重要的先加载

6.懒加载 即第5点的解决方法

7.利用工具实现以上几点

1.图片格式

jpg:进行啦很好的压缩，体积小，但是色彩比又很好，缺点:纹理和边缘会有锯齿感 比如logo

png:有很好纹理和边缘，色彩很好，但是体积大，

webp:比png提交小 但是优点和png一样，兼容性不大好，因为是谷歌提出的

2.图片加载

1.懒加载

原生：增加属性loading=’lazy’ 但是要浏览器支持 但是扩展性不好

插件:react:lazy-load-image-component;vue：v-lazy

2.渐进式图片

图片加载有两种 一种是从模糊逐渐变清晰 另一种是行扫描从上到下，第一种就叫渐进式图片，可以向美工要或者用插件生成渐进式图片

缺点:等待时间长 优点P:比行扫描好点

3.响应式图片

不同屏幕尺寸显示不同大小图片，我们得向美工要不同尺寸的图片

1.srcset,sizes属性

浏览器会根据屏幕宽度，加载srcset某个图片，一次只会加载一个图片 不会加载所有的

2.picture标签 浏览器不一定支持 也是用srcset来实现

3.字体优化

1.font-display属性:auto,block,swap.fallback,optional

黑色表示不显示字体，红色表示显示默认字体,蓝色表示字体下载好啦显示该字体

2.字体引入*

@font-face:src:’xxx’ 从哪里加载

unicode-range:拆分字符集，因为所有汉字字符集很大，有效拆分只有使用到才会加载这个字符集

3.ajax+base64

base64对字体转码 然后嵌套到css/js里