标签：
在DevTools中开始渲染，向下滑动一点点滚动条，然后停止滚动。
在结果中，注意frames总是在30ftps线上面，甚至都木有很接近69ftps线的（事实上帧执行的太缓慢以致于60ftps线在图上都不显示）
打开一个帧可以看见在scrol事件之后是一个函数回调，然很多分离的layout事件，每个分离的layout事件都有一个红色的小三角形，红色小三角形是强制同步layout( a forced synchronous layout )执行的标记。
var newWidth = container.offsetWidth; divs.forEach(function(elem, index, arr) { elem.style.width = newWidth; })
这里有很多css属性可以导致layout被触发；查看会触发layout的属性：CSS Triggers.
查看layout事件的详细信息，你可以看见被强制的同步layout提醒是被app.js中的colorizeAndScaleStories函数触发。
让我们检查函数
function colorizeAndScaleStories() { var storyElements = document.querySelectorAll(‘.story‘); // It does seem awfully broad to change all the // colors every time! for (var s = 0; s < storyElements.length; s++) { var story = storyElements[s]; var score = story.querySelector(‘.story__score‘); var title = story.querySelector(‘.story__title‘); // Base the scale on the y position of the score. var height = main.offsetHeight; var mainPosition = main.getBoundingClientRect(); var scoreLocation = score.getBoundingClientRect().top - document.body.getBoundingClientRect().top; var scale = Math.min(1, 1 - (0.05 * ((scoreLocation - 170) / height))); var opacity = Math.min(1, 1 - (0.5 * ((scoreLocation - 170) / height))); score.style.width = (scale * 40) + ‘px‘; score.style.height = (scale * 40) + ‘px‘; score.style.lineHeight = (scale * 40) + ‘px‘; // Now figure out how wide it is and use that to saturate it. scoreLocation = score.getBoundingClientRect(); var saturation = (100 * ((scoreLocation.width - 38) / 2)); score.style.backgroundColor = ‘hsl(42, ‘ + saturation + ‘%, 50%)‘; title.style.opacity = opacity; } }
注意height,width和line-height被计算，所有的这些属性将会导致layout被触发。
透明度属性也被设置了——但是透明度属性不会触发layout——这一行代码应用了新的样式，所以会触发样式的再次计算以及layout。
上面两个技术用于函数的主循环中将会导致强迫的同步layout问题。
虽然我们可以通过css样式修改来替代js，但是我们最好还是完全去除这些效果：最简单的就是——有时候最好的代码设置就是删除代码。
让我们去除上面的所有代码再次查看，你可以看见60ftps，性能好多了。
额外的layout和强制的同步layout提醒不存在了，帧执行的速度也很棒！
标签：
原文地址：http://www.cnblogs.com/RachelChen/p/5456205.html
