dom构建渲染过程

JavaScript037

dom构建渲染过程,第1张

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；

问题描述：页面内，使用选项卡，进行内容显示的切换。切换后，原本高度合适的表格出现白边，以及滚动条

检查Dom会发现，el-table组件内，发现了一个类名为 is-scrolling-none 的固定行内样式的高度的div，导致高度显示错误：

<div class="el-table__body-wrapper is-scrolling-none" style="height: 510px">

------

</div>

登录后复制

搜索后发现，

在keep-alive页面缓存的页面中，切换其他页面，再切回已打开页面时，也会出现这种，table组件底部出现白边以及滚动条的问题

同样切换表格的数据源时，也会出现这种问题

2、思路：

官方文档里说明：

所以推测为，需要重新渲染一下表格，elementUI的文档里也说明了这个问题

3、实际操作

首先给需要重新渲染的table组件绑定一个字符串名

<el-table ref='table'></el-table>

<!-- 有多个table组件时，绑定不同字符串 -->

<el-table ref='table1'></el-table>

<el-table ref='table2'></el-table>

<el-table ref='table3'></el-table>

登录后复制

在进行操作之后，调用dolayout方法

比如keep-alive的缓存页面，在activated的生命周期函数里调用：

activated() {

this.$nextTick(() =>{

this.$refs.table.doLayout()

}

}

登录后复制

如果是更换数据源，则在接口的回调里执行：

axios.post('...')

.then(function (response) {

this.$nextTick(() =>{

this.$refs.table.doLayout()

})

})

登录后复制

如果是选项卡控制显示,可以在绑定值的watch监听函数里执行：

前端web页面的渲染流程

1、构建DOM与 CSSOM

浏览器通过http请求，获得静态资源后，进行页面渲染时，构建dom与cssom是同时进行的。

html 构建dom

构建dom时，按照html页面中标签的顺序，由上向下渲染。

css 构建cssom

html构建cssom的同时，将css样式构建为cssom

2、渲染树 Render Tree

该过程中DOM与CSSOM合并，生成渲染树，树中包含了渲染页面所需要的节点。

3、布局Layout

计算出每个节点对象的精确位置和大小

4、绘制Paint

使用上面准备好的节点信息，绘制出页面

javascript

我们看到，在构建DOM和CSSOM阶段，会有javascript进入

1、当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。

2、JavaScript 可以查询和修改 DOM 与 CSSOM。

3、JavaScript 执行将暂停，直至 CSSOM 就绪。

————————————————

原文链接： https://blog.csdn.net/baidu_30891377/article/details/106313534