dom构建渲染过程

1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；

2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（Rendering Tree/Frame Tree）；

3、布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；

4、绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

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

不影响位置大小的，单纯为重绘即可 比如修改color 等。

（1）直接改变元素的className

（2）display：none；先设置元素为display：none；然后进行页面布局等 *** 作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；

（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；

（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；

（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；

你是指元素是在事件触发后动态生成的么？

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动

    <h1>{{obj.name}}</h1>

    <h2>{{obj.prop}}</h2>

    <script src="../Scripts/vue.js"></script>

    <script>

        $(function () {

            alert(1)

        })

        var vue = new Vue({

            el: 'body',

            data: {

                //初始obj是空的，因此视图默认是什么都没有

                obj:{}

            },

            ready: function () {

                //这里是vue初始化完成后执行的函数

                this.obj.name = "对象名字"//这时会显示name

            },

            methods: {

                //这里是自定义的方法

                setProp: function () {

                    this.obj.prop = "测试"//这时会显示测试

                }

            }

        })

    </script>

---