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元素后面。

但是我们不能再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构造。

异步执行js脚本——防止阻塞的更多相关文章

  1. 自动化测试中执行JS脚本方法封装

    执行JS脚本方法封装: class JavaScript(Base): def execute_javascript(self, js): """执行 JavaScrip ...

  2. AngularJs中，如何在render完成之后，执行Js脚本

    AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...

  3. A标签执行JS脚本

    A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...

  4. 在java代码中执行js脚本，实现计算出字符串“（1+2）*（1+3）”的结果

            今天在公司项目中,发现一个计算运费的妙招.由于运费规则各种各样,因此写一个公式存到数据库.下次需要计算运费时,直接取出这个公式,把公式的未知变量给替换掉,然后计算出结果就是ok了. 一 ...

  5. Angular在render完成之后，执行Js脚本

    AngularJs中,如何在render完成之后,执行Js脚本 app.directive('onFinishRenderFilters', function ($timeout) { return ...

  6. js 点击超链接，执行js脚本，而不进行url跳转

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. selenium webdriver学习（三）------------执行js脚本

    selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver   在用selenium 1.X的时候常常会用到getEval() ...

  8. Selenium执行js脚本

    如何使用Selenium来执行Javascript脚本呢 Selenium中提供了一个方法:execute_script 来执行js脚本 return 可以返回js的返回结果 execute_scri ...

  9. Java8中执行js脚本

    代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...

随机推荐

  1. DELPHI是怎么实现跨平台的？

    DELPHI是怎么实现跨平台的? 首先跨平台必须要兼容原来的语法,以线程的临界区对象为例: TCriticalSection = class(TSynchroObject){$IFDEF POSIX} ...

  2. MKVToolNix v8.7.0

    功能强大的MKV封装格式视频文件制作和编辑工具,支持音轨.字幕的封装,高清发烧友必备工具. 百度云:http://pan.baidu.com/s/1eQWPnxS  password:ll64 360 ...

  3. APP公布到应用市场（苹果APP STORE+安卓各大应用市场）

    注意事项 1.应用要签名,为了以后可以顺利更新应用.要保持每次的签名一致,所以要妥善保管好签名数据. 2.进行公布測试,最好有个检查表,每次公布的时候进行核查. 苹果APP STORE 一.证书的导出 ...

  4. 零基础学python-3.7 还有一个程序 python读写文本

    今天我们引入另外一个程序,文件的读写 我们先把简单的程序代码贴上.然后通过我们多次的改进.希望最后可以变成一个简单的文本编辑器 以下是我们最简单的代码: 'crudfile--读写文件' def re ...

  5. 命令行查看w3wp进程信息

    用windbg.mdbg等调试器调试时,当出现多个w3wp进程并且用户名相同,需要区分每个w3wp进程对应的PID(进程ID)和应用程序池信息. 我们用以下方式得到每个w3wp进程的详细信息. Win ...

  6. javascript 高级编程系列 - 创建对象

    1. 工厂模式 function createPerson(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.getName ...

  7. systemd、upstart和system V

    http://blog.csdn.net/kumu_linux/article/details/7653802  systemd是Linux下的一种init软件,由Lennart Poettering ...

  8. caffe学习--Lenet5的应用和原理、实现----ubuntu16.04.2+caffe+mnist+train+test

    Lenet5的应用和原理.实现 ----------------------------------------------ubuntu16.04.2------------------------- ...

  9. dubbo 实战1

    准备:先安装zookeeper,然后进入一下步骤 服务端 1.新建 maven项目 2.pom.xml 内容如下 <?xml version="1.0" encoding=& ...

  10. Java 语法清单

      Java 语法清单 Java 语法清单翻译自 egek92 的 JavaCheatSheet,从属于笔者的 Java 入门与实践系列.时间仓促,笔者只是简单翻译了些标题与内容整理,支持原作者请前往 ...