页面渲染主要经过过程，具体介绍如下：
字节 → 字符 → 令牌 → 节点 → 对象模型
CSS树的生成和DOM树的生成基本是相同，如下
为什么会有CSS树
因为CSS关系也会有父子关系，就是css中常说的继承，一些样式如font-size等子元素会继承父级，所以会生成一套对应的CSS树和DOM树相对应。
通过上面的页面渲染介绍，很容易理解，重排就是重新布局页面结构，计算节点位置，而重绘就是绘制页面，只是一些样式如背景，颜色的变化等，不需要重新计算位置布局，所以 重排一定会导致重绘，但是重绘不一定导致重排。
导致页面重排主要有以下几点
上文中触发了四次重排，通过上文介绍，offsetTop，scrollTop，clientTop等属性的修改会触发重排，当浏览器获取DOM样式的时候立刻会执行一次重排，因为需要计算浏览器位置坐标，不会再继续观察下文是否还有DOM的操作，下文介绍浏览器渲染机制。
这种情况看似会触发四次重排，实际只会触发一次重排，现代浏览器基本都有渲染机制，浏览器会批量将样式修改一次性执行，批量修改完后再批量获取DOM位置，实际只触发一次。
等价于
通过上文，容易理解这种情况会触发两次重排，可以使用缓存（实际是分离读写）来优化。
这种情况会触发五次重排
避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性实现元素的动画，设置position属性，最好是设为absoulte或fixed，脱离文档流，这样不会影响其他元素的布局。
事件委托原理：利用事件冒泡的特性，子元素都会冒泡到父元素上，当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的操作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。
委托
不要使用table布局，因为table中某个元素一旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
不要一个个修改属性，应通过一个class来修改
改为
参考文献
https://blog.csdn.net/b954960630/article/details/82317999
vant的表单的label渲染html字段是可调用的，在模板中调用后会渲染成 HTML。假设视图函数通过 form 参数把 一个 NameForm 实例传入模板，在模板中可以生成一个简单的 HTML 表单，如下所示：<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name() }}
{{ form.submit() }}
</form>
注意，除了 name 和 submit 字段，这个表单还有个 form.hidden_tag() 元素。这个元素生成 一个隐藏的字段，供 Flask-WTF 的 CSRF 防护机制使用。
当然，这种方式渲染出的表单还很简陋。调用字段时传入的任何关键字参数都将转换成字 段的 HTML 属性。例如，可以为字段指定 id 或 class 属性，然后为其定义 CSS 样式：
很多时候我们需要在react中渲染原始的html文档，但是原始html文档本身和react结构存在差异，直接插入会被解析成字符串；所以可以用react的属性dangerouslySetInnerHTML来动态渲染html文档，格式如下：
还可以直接这样渲染：
<div dangerouslySetInnerHTML={{__html: "<strong>Welcome to React</strong>"}} />
