如何修改ant-input的高度_这些年，浏览器如何是如何解析HTML、CSS、JavaScript渲染流程急速预览版...

急速预览版

1. 渲染进程将HTML内容转换为能够读懂的 DOM树 结构

2. 渲染引擎将CSS样式转换为，浏览器可以理解的 stylesheets 计算出DOM节点的样式

3. 创建布局树，并计算元素的布局信息

4. 对布局树进行分层，并生成 分层树 

5. 对每个图层生成 绘制列表 ，并将其提交到合成线程

6. 合成线程会将图层分为 图块 ,并在 光栅化进程池 中将图块转为位图

7. 合成线程发送绘制图片命令 DrawQuad 给浏览器进程

8. 浏览器根据 DarwQuad 消息生成页面 ，并显示到显示器上

重绘

如果通过JavaScript或CSS修改某些元素的 背景颜色 ， 那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以 直接进入绘制阶段 ，然后执行一系列子阶段，这个过程叫做 重绘(重写一遍不改变位置、大小)，比较重排操作 重绘省去了布局和分层阶段，所以执行效率会比重排效果高、快、省性能开销  

重排

那么通过JavaScript或者css修改元素的几何位属性，列如改变元素的 宽度、高度 等，那么浏览器会触发 重新布局 ，解析之后的一系列子阶段，这个过程叫做 重排 。重排需要更新完整的渲染流水线，所以开销也是最大的 。

敲黑板

重排必定引起重绘，重绘不一定引起重排。

避开重绘重排

那么如何避开重绘重排呢？也就是渲染引擎跳过布局和绘制，执行后续的合成操作，我们把这个过程叫做合成。

如上图，我们在使用css的transform实现动画效果，可以避开重绘、重排阶段。直接在非主线程上执行合成动画操作。这样是效率最高的，因为在非主线程上合成，并没有占用主线程的资源，避开了布局和绘制两个阶段，所以 相对于重绘重排 ，合成大大提升绘制效率。

至于如何通过这些概念去优化页面，我会在后期更新~请关注 https://www.yuque.com/qdwds