高级前端-页面性能优化

JS和CSS的压缩与混乱

1. 无效字符删除

2. 剔除注释

3. 代码语义缩减和优化

4. 代码优化（代码不易看懂）

图片相关优化

1. 雪碧图
2. svg > webp > png > jpg
3. 图片压缩
4. inline-image

浏览器对同一个域名的并发加载数量有限制，所以通常静态资源需要多个cdn域名

CSS的link放在header中，js的script放到body最后

一次加载过多资源的时候，可以对图片进行懒加载，需要体验图片加载0ms响应的话，可以使用预加载，预加载有几种方式，ajax请求/image load/img src display: none ajax通常有跨域问题，因为资源文件都是放在cdn上的，所以会进行降级处理

重绘和回流通常会影响性能，所以对于频繁重绘和回流的元素要进行分层，常用的制造layer的方式有：transform: translateZ(0) / will-change: transfrom

layer不能滥用，需要结合实际业务场景，否则过多的layer反而会影响页面的加载

根据业务情况，使用浏览器存储功能

1. cookie

2. localstorage + sessionstorage

3. indexdb

4. pwa + service worker

service worker的功能：

1. http请求的拦截，可以用cookiestorage做静态资源缓存，在无网络情况下，页面也可以展示，做离线页面

2. 与主线程通信，在service worker中执行耗时的任务，执行完成后，把执行结果传回主线程，传回主线程页面的时候，可以通过client区分页面

-- 陆续更新中