今天討論了一種情況扑毡,就是把CSS標(biāo)簽寫(xiě)在body標(biāo)簽當(dāng)中,發(fā)現(xiàn)CSS后方的body內(nèi)容會(huì)和它一同進(jìn)行預(yù)加載湖苞,但如果后方出現(xiàn)一些可顯示內(nèi)容筋遭,是不會(huì)在css加載完成前渲染到頁(yè)面上的。
相同的籽懦,js也會(huì)阻礙渲染的進(jìn)行于个。因?yàn)槠淇赡軙?huì)改變頁(yè)面的結(jié)構(gòu)。所以暮顺,頁(yè)面會(huì)在完成加載以上項(xiàng)目后再進(jìn)行頁(yè)面渲染厅篓。(主要著重渲染)
換句話說(shuō),為了頁(yè)面正常的渲染捶码,一般將css寫(xiě)在head當(dāng)中羽氮。
但我又發(fā)現(xiàn)不同瀏覽器對(duì)這種css標(biāo)簽出現(xiàn)在Body中但之前有可渲染的元素出現(xiàn)的情況處理不盡相同,谷歌依舊會(huì)選擇在所有css與js下載完成后再進(jìn)行渲染(白屏等待惫恼,但是更好看一些)档押。而IE的選擇是先選擇展示前面的內(nèi)容(載入速度比較快),然后待所有css js加載完成后再更新頁(yè)面祈纯,這種預(yù)加稱之為FOUC (flash of unstyled content)待css或js下載完成后再進(jìn)行渲染汇荐,這是兩種不同的策略,并不是標(biāo)準(zhǔn)的問(wèn)題盆繁。
而當(dāng)js標(biāo)簽前方出現(xiàn)可渲染內(nèi)容掀淘,它是不會(huì)影響之前內(nèi)容的展示的,因此為了加快網(wǎng)頁(yè)展現(xiàn)速度油昂,一般把js放到后面革娄。
本次測(cè)試采用的方式是通過(guò)導(dǎo)入css與js使得文件增大,然后通過(guò)觀察瀏覽器載入情況(頁(yè)面變化以及waterflow)冕碟,證明以上拦惋。