Chrome載入CSS問題

印象中看過「css的link標籤不論放在哪(head or body)都會先載入」的這個說法,不過今天卻發現當Chrome在某些情況時,結果似乎會有點非預期。

首先我在head與body最後都各放一個link標籤,並且在onload時跳出alert

在這個case,第一次alert時瀏覽器還是空白畫面,而第二次alert時,畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。

但奇怪的事情來了。當我把head裡的link拿掉時,chrome會呈現一個不穩定的結果。

  • 有時第一個alert時已經出現了沒有樣式表喧染過的畫面,alert關閉後才被宣染。
  • 有時則是跳一下尚未宣染的樣子,再出現已宣染過的樣子,然後再跳出alert。
  • 有時卻是直經出現已經被宣染的樣子,然後再跳alert

但以上的這個情況,在firefox與safari都不會發生,alert的背後都是已被宣染的畫面。也就是說就只有chrome在head裡沒有css的link標籤時,有可能會出現非預期的render結果。

因此,當在css載入前有彈alert的話,可能就要注意一下。有可能會讓user看到還沒render好的畫面,也有可能只是看到畫面跳一下。

不過也不算什麼大問題。在想可能是因為要優化render速度或是什麼其他因素,導致在全部css載完前就先render畫面了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料