现在我们已经在软件层面和硬件层面对如何渲染页面有了一个粗略的认识。接下来，让我们看一下浏览器的主线程和排版线程是如何协同工作来完成一个CSS Transition的。
假设我们想要将一个元素的高度值从100px转换到200px，如下所示：
CSS Code复制内容到剪贴板
div {
height: 100px;
transition: height 1s linear;
}
div:hover {
height: 200px;
}
主线程和排版线程会根据下图所示时序图来完成这个Transition。注意：在橙色方框中的操作是潜在的耗时操作，蓝色方框中的操作是较快的操作。 
正如你所见，整个过程有很多橙色的方框，意味着浏览器有相当繁重的工作要处理，也意味着这个Transition可能会出现卡顿。
在整个Transition的每一帧中，浏览器都要去重新布局，绘制页面，并把最新的位图对象加载到GPU。我们前边了解过，把位图对象加载到GPU的内存中是个相对缓慢的操作。
浏览器之所以要在每一帧动画上处理如此繁重的工作是因为这个元素的内容一直在变化。修改一个元素的高度可能会引起其子元素也要相应的改变大小，因此浏览器必须去重新布局。重新布局后，主线程必须为该元素重新生成位图对象。
transition: transform
由此可见，对高度进行的Transition相对来说性能比较差，那有一些性能比较好的Transition吗？
假设我们想要把一个元素从一半大小缩放到实际大小，并假设我们使用CSS的transform 属性来对它进行缩放，同时使用CSS的transition属性来生成缩放的动画效果，如下所示：
CSS Code复制内容到剪贴板
div {
transform: scale(0.5);
transition: transform 1s linear;
}
div:hover {
transform: scale(1.0);
}
让我们看下一下这个例子的时序图：
我们看到只有很少的几个橙色的方框，意味着这个动画效果可能会很流畅！那么，一个元素的transform动画效果与其高度的动画效果有什么不同呢？
根据定义，CSS的transform属性不会改变元素的布局，也不会影响到其周围的元素。它把元素当做一个整体看待——缩放整个元素、旋转整个元素或者移动整个元素。
