浏览器渲染步骤

首先,让我们来看一段代码:

<html>
<head>
    <title>标题</title>
    <link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <div>
    </div>
    ![](images/test.jpg)
    <p>
    </p>
</body>
<script type="text/javascript" src="js/js.js"></script>
</html>

我们现在要在浏览器中显示以上结构的HTML。
1.客户端浏览器开始从用户向服务器发出请求,服务器响应的将如上的HTML返回给请求的客户端浏览器中。

2.加载从<html>标签开始,并发现<head>标签内有个外部样式文件要加载

<link href="../css/css.css" rel="Stylesheet" type="text/css" />

3.这时客户端浏览器又向服务器发出一个请求加载css.css文件,服务器响应。

4.此时客户端浏览器继续加载html文件里<body>里的标签,在css.css文件加载完后,同时开始渲染页面。

5.客户端浏览器在body里的标签中发现一个img标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载img标签里的图片而停止等待图片加载完,浏览器继续渲染还未完成的部分。

6.img标签里的图片加载完了,则要显示出来,同时图片会占有一定的面积,又会影响到后面的布局,浏览器不得不又回来重新渲染一次这部分。

7.把body里的标签加载及渲染完后,浏览器又发现了一段代码:

<script type="text/javascript" src="js/js.js"></script>

8.浏览器又立刻向服务器发出请求加载js.js文件,服务器响应。

9.浏览器又在js.js文件中发现了一段代码,是干嘛干嘛的,比如隐藏某元素,此时浏览器又要重新去渲染被隐藏的部分。

10.最后到浏览器发现了</html>为止。

这是最合理的渲染步骤,如果把js文件放在head标签里,这个js文件加载时间又过长,那会影响用户体验,一直在等待浏览器呈现内容。

将css文件首先加载,也就是html的内容出来一个,那就样式给它加上,先渲染出来,而不会让用户处于干等的状态。

如果将css文件放在最后,那么首先渲染出的内容则有可能杂乱无章,影响美观。

推荐阅读更多精彩内容