# Script的加载和执行
<head>
<script src="script1.js" defer></script>
<script src="script2.js" async></script>
</head>
# defer
延迟脚本:该脚本会被马上加载,但是脚本会被延迟到整个页面都解析完再执行,即等浏览器遇到</html>
标签后再执行。并且这两个脚本会按顺序执行。
异步获取脚本,不会停止HTML
渲染,在DOM
事件domInteractive
之后,开始执行脚本,执行完成之后,触发domComplete
事件,然后是onLoad
事件。
# async
异步脚本: 指异步加载而不是异步执行;一旦加载完毕就会执行代码,而执行的过程肯定还是同步的,也就是阻塞的。
异步获取脚本,之后如果HTML
没有渲染完毕,中断HTML
渲染,执行脚本,然后继续渲染后续的HTML
内容。
# noscript标签
如果浏览器不支持支持脚本,那么它会显示出 noscript 元素中的文本。
<body>
...
...
<script type="text/vbscript">
<!--document.write("Hello World!")'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
...
...
</body>
# 总结
- 将所有的
<script>
标签放到页面底部,也就是</body>
闭合标签之前,这能确保在脚本执行前页面已经完成了渲染。 - 尽可能地合并脚本。页面中的
<script>
标签越少,加载也就越快,响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
采用无阻塞下载 JavaScript 脚本的方法:
- 使用
<script>
标签的defer
属性(仅适用于 IE 和 Firefox 3.5 以上版本); - 使用动态创建的
<script>
元素来下载并执行代码; - 使用 XHR 对象下载 JavaScript 代码并注入页面中。通过以上策略,可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。