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

Question

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

我在工作的时候遇到一个问题：新增&并插入了一个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

Answer 1

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

工具

• Chrome开发人员工具 - Timeline

• Chrome开发人员工具 - Rendering

• JavaScript Performance Monitor

• CSS Triggers

• Fastdom.js

• PageSpeed Insights

书籍

JavaScript网页动画设计 - Velocity.js作者 Julian Shapiro
WebKit技术内幕
Web性能实践日志

参考资料

• 高性能 CSS3 动画

• Rendering: repaint, reflow/relayout, restyle

• DOM layout 性能 - 元彦

• How (not) to trigger a layout i`n WebKit

• Web动画性能指南

• 渲染性能

• GPU硬件加速 - 使用渲染层合并属性

• 浏览器渲染优化 - Browser Rendering Optimization

• 简化绘制的复杂度、减小绘制区域

• 优化性能

• 高性能滚动 scroll 及页面渲染优化

• CSS vs JS动画：谁更快？

• Timer - Accuracy of JavaScript Time

• Timer - Analyzing Timer Performance

• Timer - How JavaScript Timers Work

• Javascript高性能动画与页面渲染

• 动画

• What forces layout / reflow 同CSS Triggers

• PageSpeed Insights规则

• Profiles - Improving Web App Performance With the Chrome DevTools Timeline and Profiles

• 浏览器的渲染原理简介

• Webkit

• Best Practices