白屏問題
- 白屏的根本原因是瀏覽器在渲染的時候沒有請求到或請求時間過長造成的。
- 瀏覽器對于圖片和CSS，在加載時會并發加載（比如一個域名下同時加載多個文件），瀏覽器對于JavaScript，在加載時會禁用并發，并且阻止其后的文件及組件的下載。所以將js放在頁面的頂部也可能會導致白屏。
- 不同瀏覽器的處理CSS和HTML的方式是不同的：
比如，IE、chrome瀏覽器的渲染機制，采用的是等CSS全部加載解析完后再渲染展示頁面。
Firefox則是在CSS未加載前先展示html的內容，等CSS加載后重新對樣式進行修改。
所以：白屏的出現情況往往因為CSS樣式被置于底部（最后加載）,當新窗口打開,刷新等的時候，頁面會出現白屏。
如果使用 @import標簽,它引用的文件則會等頁面全部下載完畢再被加載，也可能出現白屏。
因此，
css使用 link 標簽將樣式表放在頂部，防止白屏問題出現。
JS 的放置位置一般是在body的閉合標簽之前。
白屏不是bug，而是由于瀏覽器的渲染機制。
FOUC
FOUC (Flash of Unstyled Content) 無樣式內容閃爍：
如果把樣式放在底部，對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現 FOUC 現象(逐步加載無樣式的內容,等CSS加載后頁面才突然展現出樣式)。對于 Firefox 會一直表現出 FOUC 。
- 腳本會阻塞后面內容的呈現
- 腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件)。但在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載。
所以盡量把 JavaScript 放入頁面body底部。
