每周前端知识整理(15.09.13)

接上篇博客，其实应该早就写完了。。但是犯懒了，但是还是要补上。

浏览器是智能的（2）

浏览器会把DOM操作放到一个队列中，并且按照顺序去一批批的执行

让我们再看一段代码

var foo = document.getElementById(‘foobar’);foo.style.color = ‘blue’;var margin = parseInt(foo.style.marginTop);foo.style.marginTop = (margin + 10) + ‘px’;

上述的代码会触发几次重布局和重绘呢？可以和上周总结最后的代码对比来看

触发了几次呢？

上述代码中，我们修改了元素的color属性，这个操作会被放入操作队列中等待执行，下一句代码，我们访问了这个元素的另一个属性（marginTop）。此时，为了能够给出这个值（marginTop），浏览器会执行之前的操作队列。

所以说，如果我们代码按照上面的方式写的话，相当于过早的强制出发了一次页面的重绘

浏览器是如何工作的

当我们修改一个DOM的时候，这个元素就会被标记为脏元素，有时，这个脏元素也会有子元素标记为脏元素。也就是说，只要有一个子节点也是需要重布局的。

一旦时间到达了浏览器的刷新时间点，所有之前标记的脏元素就都会被重布局、重绘。

如果一个元素被标记成了脏元素，我们紧接着对他进行访问的话，会导致浏览器提前进行刷新，也就是提前进行重布局和重绘，就像上文的代码一样。

强制同步布局和布局废弃

在脚本中大量的交替读取和写入DOMui导致布局废弃的问题

那么如何避免这个问题呢？

• 把读取的命令和写入的命令分别分组
• Cache computed styles 没太懂怎么翻译
• 不要依次修改样式，直接修改class
• 在DOM外操作元素———使用document fragments能够实现
• 把动态元素的position设置成absolute或fixed
• 在必要的时候才显示相应的严肃
• 使用window.requestAnimationFrame()
• 使用虚拟DOM的类库（react？）

requestAnimationFrame

window.requestAnimationFrame()这个方法允许我们在下一次重布局中执行我们需要的代码。

这是一个非常有用的方法，通过它我们可以在一次重布局中同时执行读取和写入的操作。

普通写法：

function doubleHeight(element) {var currentHeight = element.clientHeight;element.style.height = (currentHeight * 2) + ‘px’;}all_my_elements.forEach(doubleHeight);

requestAnimationFrame写法

function doubleHeight(element) {var currentHeight = element.clientHeight;window.requestAnimationFrame(function () {element.style.height = (currentHeight * 2) + ‘px’;});}all_my_elements.forEach(doubleHeight);

下面是兼容性情况：

还有一个被开发者广泛使用的方法，能实现和requestAnimationFrame近似的效果

window.setTimeout(function () {...}, 0);

设置时间参数为0的话通常能够在下一次重布局中执行相应的代码

虚拟 DOM 类库

虚拟DOM类库是近来越来越火的一个概念，这都要归功于Facebook的React

那么它是如何工作的呢？

当开发者要对一个虚拟DOM执行操作的时候，接下来：

• 合并操作
• apply some heuristics 目前还不太了解react原理，翻译不上来
  
• 缓存数值
• 在合适的时机执行操作

完