<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8'>

<title>浏览器</title>

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

</head>

<body>

　<div>解析过程</div>

　<img src='img.jpg'>

　<span>博客园</span>　

 

　<script src='script.js'></script>      //位置 1

　<script src='underscore.js'></script>

</body>

</html>

　　try.css中的代码如下：

div{
    color:#f00;  //红色
　float:right;　
}

 

　　浏览器的渲染引擎（如 chrome 的webkit）会先构建DOM树（从<html>标签开始），在遇到外部css文件时会停止构建DOM树，转而解析css文件，构建CSSOM树，完成后会继续构建DOM树，同时与已经构建好的DOM树节点共同构建渲染树，并将内容绘制在屏幕上，而这是一个渐进的过程，不会等到DOM树与CSSOM树共同构建好完整的渲染树才会将内容呈现。

　　在遇到js文件时也会立即停止构建DOM树，启动js引擎解析js脚本，在解析js过程中，会预解析页面的剩余部分，注意：预解析只是会发送请求接受响应并加载文件而不会解析文件内容。

引自 :  http://www.cnblogs.com/lhb25/p/how-browsers-work.html#Speculative_parsing

预解析：
　　Webkit 和 Firefox 都进行了这项优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改 DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。

　　因此把 “位置1” 的外部js文件放到<head></head>中，代码如下：

1 function foo() {
2     alert('hello,world');
3 }
4 foo();

　　进入页面后页面呈现空白并弹出要求用户操作的对话框，此时可查看chrome控制台Network,会发现在此脚本之后需要加载的部分外部文件(比如图片)已经响应成功了（status：200），但部分外部文件仍处于pending状态，这依网络环境而定。

　　如果把“位置1” 的外部js文件放到div和img标签之间，会发现页面呈现出 红色向右浮动的“解析过程”几个字，并弹出要求用户操作的对话框，而其他内容并不会呈现。