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

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

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

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

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

      
            
                    
Hello web performance students!
    
        
         
        
      

• js允许我们操作DOM和使用隐藏对象的引用——节点可能在render tree中是不可见的，但是在DOM中依旧存在！所以，我们可以使用对隐藏对象的引用，来改变文本（通过textConten属性），甚至可以重写已经被计算的display属性从原来的‘none’到‘inline’。一旦这些完成，我们的页面将会显示成为“Hello interactive students!”

• js同样可以从DOM中创建，添加和删除新的元素，或为元素设置样式。实际上，技术上来说，我们的页面可以通过一个巨大的js文件来一个个的创建元素和为元素设置样式。但是实际操作上，HTML和CSS更加方便。上例第二部分的函数中我们创建了一个新的div元素并且设置了文本元素，为其设置了样式，并且将其追加到body元素后面。

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

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

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

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

解析阻塞 vs. 异步js

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