对于谷歌浏览器和Safari放在head
里或body
里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面,将内容呈现在页面上。
对于Firefox,head
标签中的<link rel="stylesheet">
行为与Chrome/Safari中完全一致,这些link
标签全部加载完成之前,页面上不显示内容。而body
标签中的<link rel="stylesheet">
则不阻塞任何内容显示,会出现FOUC无样式内容闪烁。
对于IE/Edge。未加载完成的<link rel="stylesheet">
标签只阻塞其后面的HTML内容显示,而对其前面的HTML内容则不阻塞,所以如果将CSS放在前面head里则和Chrome一样,如果放body里则会出现FOUC无样式内容闪烁。
综上:如果你想让页面不闪烁放在head里,如果你想让页面不白屏放在body里。
如果JS文件很小放在前面head里或后边body闭合标签之前都可以。如果JS文件很大则应该放在后面body的闭合标签之前。
因为在加载 JavaScript时会阻止其他内容的下载,要等到JS文件下载解析完之后才会显示网页内容。若JS文件很大放在前面就会导致加载时间较长,网页会一直白屏。还有一个原因是因为JS一般会涉及到一些DOM操作,所以要等全部的dom元素都加载完再加载JS。
不同的浏览器对于CSS和HTML的处理方式不同,有的是等待CSS加载完成之后,对HTML元素进行渲染和展示(白屏问题)。有的是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改(FOUC无样式内容闪烁)
Firefox、Opere在加载样式表的时候是边加载边渲染。这样既有利也有弊:利在使得页面可以尽快的开始渲染,而无须等待全部的样式表都加载下来之后再开始渲染;而弊端在于之前加载并渲染的样式在后面又重新定义或者修改了布局样式,那么将会造成一定程度上的闪烁(FOUC, 即, Flash of Unstyled Content,无样式内容闪烁),闪烁的程度主要看所 影响的元素的范围和数目。
而IE、Chrome、Safari则是在全部的样式表完全加载下来之后才开始渲染页面样式将内容呈现在页面上,没下载完之前页面是空白的。这样做也同样是有利有弊:利在于可以避免 Firefox、Opera中出现的闪烁的问题(虽然在IE下闪烁是经常的事情),可以确保样式会统一解析并渲染页面;而弊端在于页面全部样式表的加载延迟了页面渲染的时间,如果样式表加载的时间较长,或者加载错误,将会导致页面一直处于空白状态或者无样式状态。
导致白屏的原因:
总结:白屏问题与FOUC无样式内容闪烁只能二选一,不可避免。
1.<script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是会打断后面HTML的解析,只有等该脚本执行完成后,浏览器才继续解析后面的HTML文档元素。
2.<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
3.<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
下图可以非常好的表示这个过程的差别,其中:蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
Paste_Image.png
上图告诉我们以下几个要点:
(1) 解析 HTML 标签, 构建 DOM 树
(2) 解析 CSS 标签, 构建 CSSOM 树
(3) 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
(4) 在渲染树的基础上进行布局, 计算每个节点的几何结构
(5)把每个节点绘制到屏幕上 (painting)