背景交代
目前的大多数浏览器使用的是单一进程， 因此在处理用户界面和执行js件都是一件一件进行的，浏览器必须先花时间下载并执行代码，此过程中页面渲染和用户交互是阻塞的。
一般情况下，script标签出现在head中，link紧随其后以及其它页面元信息。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript" src="js/showBo.js" ></script>
<link rel="stylesheet" href="css/flex.css" />
<meta charset="utf-8" />
</head>
<body>
<div id='content'>
<div>
<img src="img/compatible_chrome.gif" >
<span>chrome</span>
</div>
<div>
<img src="img/compatible_firefox.gif" >
<span>firefox</span>
</div>
<div>
<img src="img/compatible_ie.gif" >
<span>ie</span>
</div>
<div>
<img src="img/compatible_opera.gif">
<span>opera</span>
</div>
<div>
<img src="img/compatible_safari.gif" >
<span>safri</span>
</div>
</div>
</body>
</html>
head加载以上三个javascript脚本，脚本阻塞页面的渲染，只有当这三个脚本按顺序下载执行完后，页面的渲染才会继续向下，当到达body时，页面的渲染才真正开始。那么细心的你会不会想问，为什么非得等到js下载执行完后再继续渲染呢？
虽然说IE，FF,sf ch等浏览器允许交行下载js,但对于其它资源的下载还是阻塞的，页面必须等待js下载执行。也许大家都看到过将script放在body的最下面，它能够减少对整个页面下载的影响。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="css/flex.css" />
<meta charset="utf-8" />
</head>
<body>
<div id='content'>
<div>
<img src="img/compatible_chrome.gif" >
<span>chrome</span>
</div>
<div>
<img src="img/compatible_firefox.gif" >
<span>firefox</span>
</div>
<div>
<img src="img/compatible_ie.gif" >
<span>ie</span>
</div>
<div>
<img src="img/compatible_opera.gif">
<span>opera</span>
</div>
<div>
<img src="img/compatible_safari.gif" >
<span>safri</span>
</div>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript" src="js/showBo.js" ></script>
</body>
</html>
虽然js下载执行会阻塞，但页面的大部分内容已经渲染完成。
1962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
