JS在浏览器中的性能,可以认为是开发者所面临的最重要的可行性问题。这个问题因JS的阻塞特性变得复杂,也就是说当浏览器在执行JS代码时,不能同时做其他任何事情。事实上,大多数浏览器都使用单一进程来处理UI(用户界面)更新和JavaScript脚本执行,所以同一时刻只能做其中一件事情。JS执行过程耗时越久,浏览器等待响应用户输入的时间就越长。
从基础层面来说,这意味着<script>标签每次出现都霸道地让页面等待脚本的解析和执行。无论当前的JS代码是内嵌的还是在外链文件中,页面的下载和渲染都必须停下来等待脚本的执行完成。这在页面生存周期中是必要的,因为脚本执行过程中可能会修改页面的内容。一个典型的例子就是在页面中使用document.write()(经常用来显示广告)。
例如:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is "+(new Date()).toDateString());
</script>
</p>
</body>
</html>
当浏览器遇到<script>标签时,当前的HTML页面无从获知JS是否会向<p>标签添加内容,或引入其他元素,或关闭该标签。因此,这时浏览器会停滞处理页面,先执行JS代码,然后再继续解析和渲染页面。同样的情况也发生在使用src的属性加载JS的过程中,浏览器必须先花时间下载外链文件中的代码,然后解析并执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。
1.1脚本位置
这里先说说HTML4规范,HTML4规范指出<script>标签可以放在HTML文档的<head>或<body>中,并允许出现多次。按照惯例,<script>标签用来加载出现在<head>中的外链JS文件中,挨着的<link>标签用来加载外部CSS文件或其他页面元信息。也就是说,把与样式和行为有关的脚本放在一起,并先加载它们,使得页面能够显示正确的外观和交互。
例如:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Script Example</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<script src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
Hello World
</p>
</body>
</html>
这些看似正常的代码实际上有十分严重的性能问题:在<head>中加载了三个JS文件。由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面的渲染才会继续。
因此页面的性能问题会很明显。请记住,浏览器在解析到<body>标签之前,不会渲染页面的任何部分。把脚本放到页面顶部将会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法与页面进行交互。
所以通常建议像JS脚本一般都放在</body>前,也就是页面最底下,而CSS文件放在<head></head>之间。虽然说CSS文件过大也会导致延迟,但是这种延迟是可以接受的,如果是JS脚本与CSS脚本放在<head></head>之间如上面的代码所示,那样的话,延迟会显得十分明显。因此推荐<script>标签尽可能放到<body>标签底部,</body>标签之前,以尽量减少对整个页面下载的影响。