Chrome下，多次操作DOM引起的浏览器渲染问题

Question

Chrome下，多次操作DOM引起的浏览器渲染问题

wnow20

78161928

发布于
2016-06-27

更新于
2016-06-29

小弟不才，还请高人指点。情况是这样的：

我在工作的时候遇到一个问题：新增&并插入了一个dom节点，~~没有触发其它区域的重绘。~~没有触发table区域的Composite Layers？

正常情况如下图：
图片描述

异常情况如下图：
图片描述

出现异常的原因是这样的：
我在原有的DOM节点，通过jQueryprepend方法，插入了一块新的dom片段，好像没有正常触发浏览器重绘。导致出现了这个问题。代码如下：

Labor.prototype._onLoaded_overview = function () {
    var self = this;

    // 如果使用setTimeout，做一个延迟处理，100%会出现上图Bug
    // setTimeout(function () {
        self.root.prepend(overviewTpl.render(self.data.overview));
    // }, 500);

    // 由于代码不好,有bug, 需要有一个触发表格重绘动作
    // 原因: _onLoaded_overview与_onLoaded_detail会同时增加dom节点, 而引起一个很怪异的bug
    // 若想重现这个bug, 可注释一下这行代码, 启用setTimeout
    // this.root.find('.labor-table').css({opacity: 0.99});
};

有没有什么相关的资料（博文、书籍等）可以学习研究的？

感觉是，已经Layout、Paint成功了，但是Composite（合并渲染）的时候出现了问题？
感觉出现这种问题总是跟 table 有关？

问题我其实已经解决了，但是不知道根本原因。
解决办法1：JS代码中使用opacity、transform:translateZ(0)触发Composite Layers。
解决办法2：CSS中使用transform:translateZ(0)，让table使用Layer Mode

chrome 渲染 dom 浏览器

阅读 5.3k

1 个回答

得票最新

wnow20

78161928

发布于
2016-06-30

感觉好像找到了方向。。。再研究。