web性能治理

为面试吹牛做功课

1、现状分析

1. LCP统计上报不准确(Largest Contentful Paint)
2. 应该为banner图片
3. SSR HTML文档过大（内联图片占比较大，包括SVG，base64）
4. js体积过大，需要加载4MB多JS资源，会对加载造成巨大压力，
   加载后也容易导致long task 影响TTI，
   lighthouse 代码使用率分析，未运行代码使用率占比超过50%
5. 静态资源过多，静态资源再内网环境加载时间接近3S，HTTP同域名并发限制
   导致资源排队时间长

技术方案

1. LCP上报元素校准
2. 懒加载静态资源
3. 图片sprite
4. SVG图片生成，利用des 和use生成SVG sprite
5. 外链SVG图片资源，可以利用缓存
6. 图片压缩typing

优化SSR

1. 将内联的svg+base64图片外链
2. 将非首屏做成CSR
3. CSR内容是否涉及SEO

2、渲染性能治理

渲染性能关注1.滚动 2.动画 3.用户交互改变页面展示
不包括 页面刷新加载渲染 CRP、白屏等问题

渲染性能指标fps <30算卡顿 <=20算严重卡顿
其他指标包括cpu gpu 内存 layer数 DOM元素个数

内存、cup、GPU 指标

1、使用raf代替setTimeout/setInterval更新DOM

raf保证frame0时刻开始执行，而settimeout在中间某个时刻执行，导致高概率掉帧

2、清查复杂计算逻辑

1. 移动web worker
2. 拆成组合小任务，raf一次执行
3. js主线程执行，阻塞后续DOM更新过程，主线程阻塞导致对用户无响应
4. 滚动、动画中，需要小雨3-4ms

3. 长任务数：1（快速滚动时）

https://web.dev/debounce-your-input-handlers/#debunce_your_scroll_handlers
requestAnimationFrame 优化scroll 滚动事件4

composite layers

合成耗时长，导致长任务，不是js
参考连接
https://james-priest.githun.io/udacity-nanodegree-mws
/course-notes/borwers-rendering-optimization

4、 耗性能的css属性

1. fiter 影响paint composite
2. box-shadow 影响paint
3. linear-gradient
4. border-radius
5. 没必要的层级过深的后代选择器

5、合成层，持续渲染

合成层，持续渲染，导致掉帧，
为防止爆炸层，在提升为合成层的元素上，建议加载z-index
防止overlap引起的层提升
清查提升合成层的必要性，避免层爆炸

The best to create a new layer is to use the will-change
work in chrome Opera firefox
will create a new compositor layer
.will-change{
	will-change:trasform;
}


Safari 和 mobile safari
.will-change:{
	transform:translateZ(0)
}
1
2
3
4
5
6
7
8
9
10
11
12

其他

1. UI库去重，2套组件库
2. icon编译优化，默认将所有图标静态资源打包，资源体积MB级别
3. 改为按需加载，首页图表静态资源预计由MB级别降到KB以内
4. webpack的静态资源引入，require会引入所有,改为import
   资源归纳到最近的文件夹