JavaScript异步加载

存在的问题:

引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。

解决的办法1:

对于不需要提前执行的代码,将<script>标签放在<body>标签的底部,可以减少对整个页面下载的影响。

解决的办法2:

可用HTML5为<script>标签新增的两个可选属性:async和defer。

用法示例

// 方式一:async
<script src="http://js.test/file.js" async></script>
// 方式二:defer
<script src="http://js.test/file.js" defer></script>

  • async异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。
  • defer用于延后执行,即先下载文件,直到网页加载完成后再执行。
  • 即使“http://js.test/file.js”无法连接,也不影响后面的JavaScript代码执行。

标签: none

添加新评论