白屏
IE和Chrome浏览器,会将HTML全部渲染上CSS样式后,再呈现出来,那么如果HTML内容特别多,CSS加载特别慢,那么页面等待的时间就会特别长,就会出现白屏。
FOUC
Firefox浏览器,对HTML是读一句呈现一句,所以CSS要放在前面的head标签中,这样一句一句呈现出来的HTML都是加载好样式的。如果CSS放在后面,那么浏览器就会先呈现没有样式的HTML内容,等读到放在后面的CSS了,再对HTML添加样式。这样用户看到的页面就是无样式内容闪烁。
做个比喻:
用户去大酒店点了一桌满汉全席
- IE和Chrome 是将满汉全席的所有菜都做齐了一次性上桌,餐桌上一开始全是空的,相当于白屏。
- Firefox 是做完一道菜上一道菜,CSS放在后面就相当于先上原材料,再在餐桌上加工成佳肴,用户看到的先是食材,再是佳肴,相当于无样式内容闪烁。