浏览器渲染顺序

解析和渲染

解析是指浏览器读取HTML里的每一行代码，渲染是浏览器将解析的代码放到页面上，供用户体验。

解析

以下面HTML代码来说：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>浏览器渲染顺序</title>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
</head>
<body>
  <button id='button'>按钮</button>
</body>
</html>

浏览器首先解析第一句，一看是文档声明，就知道了该文档是HTML5，当解析到’link’标签时，浏览器会同时下载CSS文件并同时解析下一行代码。如下图的chrome开发工具中的瀑布流：

由此可以说明css和js并不会影响代码解析。

渲染

以下面的HTML代码来说：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>浏览器渲染顺序</title> 
</head>
<body>
  <button id='button'>按钮</button>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</body>
</html>

当浏览器解析到’button’元素时，并不会把这个‘button’解析到页面上，而是会继续解析‘link’，并下载css文件，此时页面并不会出现这个’button’元素，是等到css文件下载完成后，才会将这个‘button’渲染到页面上，是因为css阻塞了渲染，之前浏览器上什么都没有，这种现象叫做‘白屏’，是因为chrome默认将css下载完成后，才会进行渲染。
JS也是会阻塞渲染的，但与CSS的区别是，JS并不会影响之前元素的渲染，而是影响后面元素的渲染，所有浏览器都是这样的。

总结

所以，在写HTML页面时，我们会把CSS放在前面，这样会好看，不会出现闪烁。如果CSS写在后面，在IE浏览器里，页面就会闪一下(FOUC,Flash of unstyleed content)。一般会把JS写在最后面，如果把JS下在前面，可能会无法访问后面的元素，因为JS会阻塞页面渲染。同时还会使‘白屏’的时间更长。另外一个原因是，JS并不会影响用户体验，因为用户是先用眼睛看，然后再用手去交互。