前端每日一练＜async和defer＞

我们知道js代码执行是从上往下的,所以如果代码执行到某一处时可能会发生阻塞,妨碍下方代码继续执行

我们讨论下async和defer

script标签与执行顺序有关的的属性:

• async
  • 不阻塞页面的渲染,在获取到js文件后立即执行js中的代码
• defer
  • 不阻塞代码的执行,在获取到js文件后不立即执行,等页面渲染完成后才执行js中的代码
• 不填
  • 阻塞页面渲染,获取到js文件并且执行完js中的文件后再继续往下执行代码

多说无用,直接看demo

这里我们在一个html文件中引入一个js文件,将script标签写在span标签之前

js文件中代码的作用时进行一个延时,并向页面中添加一个p标签

var start = Date.now();
while(Date.now() - start < 2000){}//这里延时2s

var p = document.createElement('p');
p.innerText = 'OK'
document.body.appendChild(p);

当我们不设置async或defer属性时,页面是这样的,先执行js文件中的代码(延时2s然后向页面添加p标签),然后继续向下执行渲染页面,所以过程打印ok->页面渲染

当设置属性为async时,不阻塞页面渲染(代码继续向下执行),在获取到js文件后执行文件中的代码(延时2s然后向页面添加p标签),然后再继续向下执行

过程是页面渲染->打印ok->页面渲染

当设置属性为defer时,不阻塞页面渲染(代码继续向下执行),在获取到js文件后也不执行文件中的代码,等待页面全部渲染完毕之后,再执行js文件中代码

过程是页面渲染->打印ok