今天讨论了一种情况,就是把CSS标签写在body标签当中,发现CSS后方的body内容会和它一同进行预加载,但如果后方出现一些可显示内容,是不会在css加载完成前渲染到页面上的。
相同的,js也会阻碍渲染的进行。因为其可能会改变页面的结构。所以,页面会在完成加载以上项目后再进行页面渲染。(主要着重渲染)
换句话说,为了页面正常的渲染,一般将css写在head当中。
但我又发现不同浏览器对这种css标签出现在Body中但之前有可渲染的元素出现的情况处理不尽相同,谷歌依旧会选择在所有css与js下载完成后再进行渲染(白屏等待,但是更好看一些)。而IE的选择是先选择展示前面的内容(载入速度比较快),然后待所有css js加载完成后再更新页面,这种预加称之为FOUC (flash of unstyled content)待css或js下载完成后再进行渲染,这是两种不同的策略,并不是标准的问题。
而当js标签前方出现可渲染内容,它是不会影响之前内容的展示的,因此为了加快网页展现速度,一般把js放到后面。
本次测试采用的方式是通过导入css与js使得文件增大,然后通过观察浏览器载入情况(页面变化以及waterflow),证明以上。