在這篇文章中，我們將會去探究一下瀏覽器是如何去處理CSS Animations和CSS Transitions的，以便使你在寫一些動畫效果之前就可以對該動畫在瀏覽器中運行效果有一個心理預判。有了這些預判，你就可以設計出一些在瀏覽器中運行流暢的動畫效果，從而帶來更流暢的用戶體驗。

瀏覽器的內部工作

讓我們了解一些瀏覽器的工作原理，一探究竟。一旦我們了解了瀏覽器是如何工作的，我們就可以更好的去駕馭它。

現代瀏覽器通常擁有兩個重要的執行線程，這兩個線程相互配合來渲染出頁面：

    主線程

    排版線程

通常情況下，主線程主要負責以下工作：

    運行JavaScript

    計算HTML元素的CSS樣式

    布局頁面

    把頁面元素繪制成一個或多個位圖

    把這些位圖移交給排版線程

通常情況下，排版線程主要負責以下工作：

    通過GPU渲染位圖，并顯示在屏幕上

    向主線程請求更新位圖的可見部分或即將可見的部分

    判斷出當前頁面處于可見的部分

    判斷出即將通過頁面滾動而可見的部分

    隨著用戶滾動頁面來移動這些部分（譯者注：可見部分的和即將可見的部分）

當長時間運行JavaScript或渲染一個很多的元素時，主線程會一直處于忙碌狀態。在這期間它不會對用戶的輸入做出任何反應。

在另一方面，排版線程對用戶輸入保持著非常快的響應。當頁面變化時，排版線程嘗試以每秒60幀的速度去重繪頁面，即便這時頁面還不完整。

舉例來說，當用戶滾動頁面時，排版線程向主線程請求更新頁面新顯示部分的位圖，但是，如果此時主線程并不能迅速響應請求，排版線程并不會去等待響應，它會用它目前所擁有的這部分頁面的內容去渲染頁面，由于對應的內容還沒有，所以會以白板的形式渲染出來。

GPU

我前邊提到過排版線程通過GPU把位圖繪制到了屏幕上。讓我們快速的過一下GPU相關的東西。

GPU是一種芯片，在今天的大多數手機，平板以及電腦中都能發現它的身影。它是非常專業的，這意味著GPU在某些方面非常擅長，但是在另外一些方面去表現不好。

GPU比較擅長于：

    繪制位圖到屏幕

    重復的繪制同一個位圖

    在不同的位置，以不同的旋轉角度，或者不同的縮放大小來繪制同一個位圖。

GPU相對慢的地方：

    將位圖加載到顯存里。

transition: height

現在我們已經在軟件層面和硬件層面對如何渲染頁面有了一個粗略的認識。接下來，讓我們看一下瀏覽器的主線程和排版線程是如何協同工作來完成一個CSS Transition的。

假設我們想要將一個元素的高度值從100px轉換到200px，如下所示：
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表