我们知道,同一个HTML文件,各浏览器所呈现的内容最终是一致的,但是浏览器对HTML文档的渲染顺序是否相同呢?如CSS,JS文件在head,body中,各浏览器究竟是按照怎样的顺序就行渲染的呢?
(此文以Chrome,Firefox,IE为例)
前提,CSS,JS文件都较大,在低网速下测试,可以观察到不同浏览器的行为,其中在CSS中规定h1的字体颜色为红色。
解析:浏览器理解下载到的文件里的字符串。
渲染:讲节点描绘在屏幕上(DOM树里)。
CSS在head中,JS在body中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello html</h1>
<script src="main.js"></script>
</body>
</html>
Chrome
CSS与JS同时下载,CSS下载完成后,页面中h1内容显示为红色,会有等待过程。
Firefox
CSS与JS同时下载,CSS下载完成后,页面中h1内容显示为红色,会有等待过程。
IE
CSS与JS不同时下载,CSS下载完成后,页面中h1内容显示为红色,会有等待过程。
JS在head中,CSS在body中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<h1>hello html</h1>
<link rel="stylesheet" href="style.css">
</body>
</html>
Chrome
与CSS在head中行为一致,即等待CSS下载完成,再展示h1标签内容。
Firefox
先渲染HTML标签,展示为黑色,待CSS下载完成,再展示h1为红色,会有颜色的“跳动”,即flash of unstyled content,简称FOUC。
IE
先渲染html标签,展示为黑色,待CSS下载完成,再展示h1为红色,会有颜色的“跳动”,也会有FOUC的现象。
另外我们发现,不论JS在head中还是body中,JS 不会阻塞它前面的标签的渲染,但如果JS在CSS文件之前,那么JS会阻塞CSS文件。
若干个CSS可以同时进行预加载,以节约下载时间,一个域名同一时间最多请求4个css链接(IE)、20个(Chrome)、10个(其他)
总结
Chrome中,CSS与JS同时下载,不论CSS是在head,或者是body中,(前提是body中CSS文件不被JS阻塞,否则会先渲染HTML的标签,待JS,CSS下载完,再展示HTML标签)Chrome会有白屏(等待下载)过程,在网速较快时基本感觉不到。
Firefox中,CSS与JS同时下载,根据CSS所在的位置,按照顺序下载展示,所谓的“遇神杀神,遇佛杀佛”型,CSS在head中,就等CSS文件下载完成在展示html标签,CSS在body中,先渲染HTML标签,等CSS下载完成,再展示标签的正确样式
IE,同上,但CSS与JS不同时下载,“遇神杀神,遇佛杀佛”型,CSS在head中,就等CSS文件下载完成再展示html标签,CSS在body中,先渲染HTML标签,等CSS下载完成,再展示标签的正确样式。
为什么一般CSS写在head中,而JS写在body中呢?
从上述我们可以看到,CSS会阻塞渲染,Chrome中CSS在加载完成之前不会展示页面内容,为了减少页面的不一致性,防止出现FOUC,即页面“闪烁”的情况,CSS一般写入head中。
JS也会阻塞渲染,如果JS写入head中,可能会影响HTML标签的显示(这个问题可以通过修改JS解决,目前暂不考虑),同时也为了减少页面的加载时间,优先展示页面样式,其次,JS本身不太影响用户体验,页面通常加载时间较短,用户暂时不会有交互行为,因此JS一般写入body中。