首先，让我们来看一段代码：
<html>
<head>
<title>标题</title>
<link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>
</div>
<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文件放在最后，那么首先渲染出的内容则有可能杂乱无章，影响美观。
网友评论