<!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‘>
<script src=‘script.js‘></script>
</body>
</html>
浏览器的渲染引擎（如 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 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。
因此如果在<head></head>中加入一个外部js文件，代码如下：
1 function foo() {
2 alert(‘hello,world‘);
3 }
4 foo();
进入页面后页面呈现空白并弹出要求用户操作的对话框，此时可打开chrome控制台Network,会发现在此脚本之后需要加载的外部文件已经响应成功了（status：200）
原文：http://www.cnblogs.com/ktsjk/p/5128054.html