cpu：俗称显卡。基于逻辑的数学运算与或非，用来处理业务
gpu：显卡图像绘制，游戏；特别适合处理一些高精度的浮点数运算；比如在区块链技术，比拼算例的，看谁能够争抢到进矿的这样的一些权力，挖到一个区块block，区块链这样一个网络就会给你奖励，然后就到虚拟市场换取一些钱。
gpu算例 —— > 好几十个cpu算例 —— > 发明了矿机；基于挖矿算法的芯片诞生了BM1387芯片；矿机，就是用来挖矿的机器。一个矿机，现在最强大的蚂蚁矿机，它上面搭载了200MBBM1387芯片相当于3万个成熟的cpu；
gpu分两类：
1.家用的，游戏显卡，绘图能力没有专业的强，它的绘图方式的基础绘制单位是边形（正方形……），通过多边形的旋转和叠加然后形成的一个圆，然后以这个为基础单位去绘制图像。
2.专业的，专业绘图领域的显卡，绘图方法使用一个一个点去绘图的。
transform的基层原理是点阵式，就是矩阵函数matrix()；
所以浏览器给我们提供的功能默认的是专业显卡，也就是能办到点阵功能。因此在网页中不能构建游戏，用家用的来处理点阵式功能是比较烧性能的。用css3编写的东西调用方法和启动的效果也是要基于专业的显卡。
性能优化的问题：
- 尽量少用gpu，就少用gpu；gpu到一定的程度下载浏览器中，也不太实用，在太多复杂的变化，太多的方面的动画等也会造成性能严重的消耗。所以说，一些成熟的网站上面动画都不是特别复杂，复杂的话就会架不住~
- 能用gpu来做，就不要用cpu做一些图像处理。
浏览器的渲染流程：
domtree + cssomtree —— > rendertree
rendertree：和domtree和cssomtree差不多，它会把我们一些看不到的结构，比如说head标签，每个tree上面构建什么样式，都会写在cssomtree中；比较简便很多。
|
|
∨
布局layout ——> 绘制paint
逻辑图（多层的矢量图 ） ——> 实际绘制（栅格化，像素化，多层按照一面来绘制），Google天然的调用gpu帮我们实现这个栅格化绘制；
layout：就是后天的影响，通过js改变了dom的结构、长宽高、位置……，就会触发layout；layout改变前面就全部改变了，也就是reflow，回流\重构；
如果只涉及一个颜色的改变，边的颜色改变……就是repaint，重排；重构必然要重排；重排不一定需要重构。论性能的话repaint比reflow强得多，尽量少触发reflow
触发reflow：
改变窗口的大小
改变文字的大小
内容的改变
输入框输入文字
激活伪类，如hover
操作class属性
脚本操作DOM
计算offsetWidth 和 offsetHeight
设置style属性
触发repaint：
只是改变某个元素的背景颜色、文字颜色、边框颜色、不影响周围或者内部布局的属性
repaint 的速度快于 reflow
触发gpu：就添加属性 ** opacity：
transform：translate3d（）/translatez()；最好设置时候加上translatez(0);
will-change：**专业处理gpu加速的问题；兼容性高；提前告诉浏览器针对监听的属性进行复杂的变化，让浏览器最好把属性单独搁到一个层面上让它自己执行；
浏览器刷新页面的频率1s 60次；
gpu如果可以在一帧里渲染好页面，那么当你用页面的元素或者实现动画的时候，将会非常流畅
若有收获，就点个赞吧
0 人点赞
