剛截圖十幾次，終於捕捉到了這個白屏現象，hiahia~~
大家可以很清晰地看到下邊還木有渲染完畢的透明層，這是一個十分普遍的問題，經常遇到。我的瀏覽器版本是
到目前為止應該是最新版(release版本)，之前的版本應該也存在類似的問題。只要處理好代碼，這種體驗相當不好的白屏問題是可以避免的，Qzone的頁面貌似就沒有這個現象。首先我們來聊一聊這個問題是怎么產生的，這涉及到chrome瀏覽器對網頁的解析和渲染。
渲染引擎首先通過網絡獲得所請求文檔的內容，通常以8K分塊的方式完成。
下面是渲染引擎在取得內容之后的基本流程：
解析html以構建dom樹->構建render樹->布局render樹->繪制render樹
渲染引擎開始解析html，並將標簽轉化為內容樹中的dom節點。接着，它解析外部CSS文件及style標簽中的樣式信息。這些樣式信息以及html中的可見性指令將被用來構建另一棵樹——render樹。
Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。
Render樹構建好了之后，將會執行布局過程，它將確定每個節點在屏幕上的確切坐標。再下一步就是繪制，即遍歷render樹，並使用UI后端層繪制每個節點。
值得注意的是，這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，並不會等到所有的html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。
如果我們在Render樹未完全繪制並渲染之前，向下快速拖動滾動條會看到上圖所示的白屏現象。那這種現象可以通過什么方式來處理呢？應該說這是避免不了的，我們能做的就是：
- 遵循XHTML編碼規則，錯誤的標簽在解析的過程中，瀏覽器需要花費很多時間去進行容錯處理（一些push和pop操作），會在構建DOM樹的時間花掉額外的時間。
- 優化HTML代碼，減少代碼層次（有些網站堆砌一二十層標簽的做法實在是沒法不讓人吐槽）
- 優化css，減少樣式計算所需要的時間，
div div div div｛…｝，盡量不要出現這么復雜的選擇符。 - 盡量不要使用
document.write，html不能被自頂向下或自底向上地被解析，一種重要的原因也是因為腳本標簽中含有這個所導致的，他可能會添加標簽。 - 縮短第一屏的內容，后幾屏的內容用js異步+判斷滾動條動作載入，減少構建Render樹和布局render樹的時間
關於瀏覽器的工作原理，有興趣的可以上網搜搜。
本文同步自我的github博客。