去聽了牛人 dbaron 的一個Web Page Layout/Display in Mozilla 講座(via)。講的東西對我一個只會HTML, CSS和JavaScript的人來說很底層，所以效果也比較“和諧”，只是大致了解了mozilla的CSS渲染源碼分布位置和渲染流程而已。
講座提到了reflow(如何翻譯呢？又是一個問題)這個東東。之前對reflow有所聞，能經常從某些大牛的幻燈中提到，提高頁面渲染的性能，需盡量避免reflow。那麽reflow是什麼東西呢？它又是如何影響頁面性能的？事後去問了一下dbaron（呵呵，我口語徹底不行，加上心理素質，最後是把問題寫下來給他看），豁然開朗也。
在CSS規範中有一個渲染對象的概念，通常用一個盒子（box，rectangle）來表示。mozilla通過一個叫frame的對象對盒子進行操作。frame主要的動作有三個：
* 構造frame，以建立對象樹（DOM樹）
* reflow，以確定對象位置，或者是調用mozilla的Layout（這裏是指源碼的實現）
* 繪製，以便對象能顯示在屏幕上
總的來說，reflow就是載入內容樹（在HTML中就是DOM樹）和創建或更新frame結構的響應的一種過程。
要提高頁面性能，其實就是避免reflow的開銷。那麼，有哪些方面是需要reflow的呢？比如，未指定圖片寬高的話，圖片的載入會使頁面 reflow，因為要根據圖片寬高來更新frame。這裏就有一個提高頁面性能的小技巧：如果事先能夠確定圖片寬高的話，最好在HTML裏寫上。
在編寫一些常見的動態效果時，一般使用CSS的display來切換可見性。很不幸，這也會産生reflow。把元素置為display:none，相當於把這個元素的frame銷毀了，再置回非none時，需要重新構造frame，這就産生了reflow。而另外一個切換可見性的屬性visibility則不存在reflow問題，置為visibility:hidden的元素的frame並沒有銷毀，需要顯示的時候其實就是一個繪製（上面提到的動作第三步）過程而已，沒有reflow，因此效率會更高。如果你看過一些JavaScript庫／框架的源碼，會發現它們大量使用visibility而不是display，道理應該如此。
講座提到了reflow(如何翻譯呢？又是一個問題)這個東東。之前對reflow有所聞，能經常從某些大牛的幻燈中提到，提高頁面渲染的性能，需盡量避免reflow。那麽reflow是什麼東西呢？它又是如何影響頁面性能的？事後去問了一下dbaron（呵呵，我口語徹底不行，加上心理素質，最後是把問題寫下來給他看），豁然開朗也。
在CSS規範中有一個渲染對象的概念，通常用一個盒子（box，rectangle）來表示。mozilla通過一個叫frame的對象對盒子進行操作。frame主要的動作有三個：
* 構造frame，以建立對象樹（DOM樹）
* reflow，以確定對象位置，或者是調用mozilla的Layout（這裏是指源碼的實現）
* 繪製，以便對象能顯示在屏幕上
總的來說，reflow就是載入內容樹（在HTML中就是DOM樹）和創建或更新frame結構的響應的一種過程。
要提高頁面性能，其實就是避免reflow的開銷。那麼，有哪些方面是需要reflow的呢？比如，未指定圖片寬高的話，圖片的載入會使頁面 reflow，因為要根據圖片寬高來更新frame。這裏就有一個提高頁面性能的小技巧：如果事先能夠確定圖片寬高的話，最好在HTML裏寫上。
在編寫一些常見的動態效果時，一般使用CSS的display來切換可見性。很不幸，這也會産生reflow。把元素置為display:none，相當於把這個元素的frame銷毀了，再置回非none時，需要重新構造frame，這就産生了reflow。而另外一個切換可見性的屬性visibility則不存在reflow問題，置為visibility:hidden的元素的frame並沒有銷毀，需要顯示的時候其實就是一個繪製（上面提到的動作第三步）過程而已，沒有reflow，因此效率會更高。如果你看過一些JavaScript庫／框架的源碼，會發現它們大量使用visibility而不是display，道理應該如此。
