cssText

浏览器的重排（reflow）和重绘（repaint）均是开销昂贵的操作，会导致用户UI暂时阻塞或卡顿。因此，为了提高性能，需要减少这样的操作，或者将多次操作合并。

<br/>

首先，介绍一些相关的基本知识。浏览器在加载完HTML标记、JS脚本、CSS、图片等之后会生成两个我们经常听到的内部数据结构——DOM树和渲染树；DOM树用来表示页面结构，而渲染树则定义了可见的DOM节点的显示和布局规则。当两者均构建完成时，浏览器引擎开始绘制页面元素。

<br/>

现在，介绍下重排（reflow）和重绘（repaint）的概念。

<br/>

• 重排(回流)：DOM相关的操作引起渲染树发生改变，重新构造渲染树的过程称为重排；如果改变造成元素的大小位置等引入布局发生变化的操作，就会引起浏览器的重排/回流；
• 重绘：重排结束后，根据渲染树重新绘制受影响的部分或者整个页面的过程称为重绘；通常改变颜色样式等不影响布局发生变化的操作，会触发浏览器的重绘；

<br/>

那么，那些操作会引起重排？

• 可见性DOM元素的增删操作；
• DOM元素的可见性改变；
• 元素尺寸变化；
• 浏览器窗口大小改变；
• 节点内容改变时；
• 页面初始化渲染；
• 字体大小发生变化时；

<br/>

上面提到，重绘和重排操作性能开销较大，因此需要最小化重绘和重排。有时，我们需要同时修改同一元素的多个样式，比如添加一个新的＜ｐ＞标签，此时我们可以使用cssText属性。默认情况下，该方法会覆盖已有的属性。

console.log(node.style.cssText);//返回值为空

可以通过以下方法使用，以最小化重排和重绘

        var node = document.getElementById('h')
        node.style.cssText += '; color: red; font-size: 35px;';

<br/>

<br/>

<br/>

<br/>