异步执行js脚本——防止阻塞

JS允许我们修改页面中的所有方面：内容，样式和用户进行交互时的行为。

但是js同样可以阻塞DOM树的形成并且延迟页面的渲染。

让你的js变成异步执行，并且减少不必要的js文件从而提高性能。

JavaScript可以查询和修改DOM和CSSOM
JavaScript的执行阻塞了CSSOM的执行
JavaScript 阻塞了DOM的形成，除非特殊声明js异步执行

js是一个同步语言可以修改网页的任何方面：

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path: Script</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script>
      var span = document.getElementsByTagName('span')[0];
      span.textContent = 'interactive'; // change DOM text content
      span.style.display = 'inline';  // change CSSOM property
      // create a new element, style it, and append it to the DOM
      var loadTime = document.createElement('div');
      loadTime.textContent = 'You loaded this page on: ' + new Date();
      loadTime.style.color = 'blue';
      document.body.appendChild(loadTime);
    </script>
  </body>
</html>

js允许我们操作DOM和使用隐藏对象的引用——节点可能在render tree中是不可见的，但是在DOM中依旧存在！所以，我们可以使用对隐藏对象的引用，来改变文本（通过textConten属性），甚至可以重写已经被计算的display属性从原来的‘none’到‘inline’。一旦这些完成，我们的页面将会显示成为“Hello interactive students!”
js同样可以从DOM中创建，添加和删除新的元素，或为元素设置样式。实际上，技术上来说，我们的页面可以通过一个巨大的js文件来一个个的创建元素和为元素设置样式。但是实际操作上，HTML和CSS更加方便。上例第二部分的函数中我们创建了一个新的div元素并且设置了文本元素，为其设置了样式，并且将其追加到body元素后面。

page preview

但是我们不能再DOM没有构造完之前操作DOM——浏览器在碰到js时会先执行js再执行DOM树的构造——所以执行内置的js文件时将会阻塞DOM的形成，同样可会延迟渲染的初始化。

js也可以操作CSSOM，如果在浏览器没有结束下载和CSSOM构造的情况下，我们想运行js呢？答案是浏览器会先搁浅脚本的执行直到完成CSSOM的加载和构造，当我们在等待上述执行的时候，DOM构造也同样被阻塞。

简而言之，js介绍的一系列特性都是依赖DOM和CSSOM的，js的执行同样也可以导致浏览器执行和页面渲染的巨大延迟：

脚本在页面中的位置非常重要
当遇到脚本标签的时候DOM构造过程将会停止直到脚本执行结束
js可查询和操作DOM以及CSSOM
js的执行将被延迟，直到CSSOM就绪。

解析阻塞 vs. 异步js

我们可以在script标签中加入async属性来告诉浏览器，在执行js脚本时同时执行DOM构造。

异步执行js脚本——防止阻塞

解析阻塞 vs. 异步js

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=en