qing'zh

缓存性能优化

1. 共享缓存
   

2. 浏览器缓存（私有缓存）

   

   

   

   

   
   

   
   

渲染性能优化

浏览器渲染进程

1. 减少页面重排操作

   
   

2. 避免样式频繁修改

3. 动画优化

   setTimeout-16.6ms可能会造成卡顿；

   requestAnimation-浏览器隐藏时会停止动画（减少cpu的开销）；

   节流（以一定时间间隔频率进行事件触发）&防抖（一段时间内多次触发的时间只执行一次）；

4. Web Work 多线程

   不能访问js DOM

   大量计算 以及同时渲染DOM时

   
   

   
   

   
   

代码压缩的原理

webpack代码压缩js

webpack代码压缩css

构建优化-资源合并

是否把所有的js资源都合并到同一个js文件中？

否

1. js文件过大，首屏加载速度变慢

2. 无法有效的利用浏览器的缓存功能，业务代码改动造成整个js文件改动

3. http2.0协议升级 进行一次tcp进行，可以进行多个请求
   

性能优化方案

url输入到页面渲染流程图

压缩CSS

压缩JS 基于webpack5

构建性能优化方法涉及点

图片懒加载方法2

图片懒加载方法1

前端一些优化方法

页面生命周期-性能分析方案

生命周期链路图前端

解决前端开发性能问题
招式——》具体的性能优化方案
内力——》理解页面生命周期    就能成为“性能高手”

懒加载方案一

优化

优化

链路流转

44444

图片懒加载的两种方案：

方案一 getBoundingClientRect

方案二 Intersection Observer 

输入 URL 到页面渲染链路

快来咯哦哦哦哦哦哟

健健康康哦哦哟哟哟

加健健康康哦哦哦哦哦哦哦哦哦哦

好的

咯工农门口indefensible

咯经历过来咯临摹啦