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

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

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

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

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

  1. <html>
  2.   <head>
  3.     <meta name="viewport" content="width=device-width,initial-scale=1">
  4.     <link href="style.css" rel="stylesheet">
  5.     <title>Critical Path: Script</title>
  6.   </head>
  7.   <body>
  8.     <p>Hello <span>web performance</span> students!</p>
  9.     <div><img src="awesome-photo.jpg"></div>
  10.     <script>
  11.       var span = document.getElementsByTagName('span')[0];
  12.       span.textContent = 'interactive'; // change DOM text content
  13.       span.style.display = 'inline';  // change CSSOM property
  14.       // create a new element, style it, and append it to the DOM
  15.       var loadTime = document.createElement('div');
  16.       loadTime.textContent = 'You loaded this page on: ' + new Date();
  17.       loadTime.style.color = 'blue';
  18.       document.body.appendChild(loadTime);
  19.     </script>
  20.   </body>
  21. </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. Cesium之3D拉伸显示行政区

    转自原文 Cesium之3D拉伸显示行政区含GeoJSON数据生成过程GDAL的ogr2ogr Cesiumjs 是一套javascript库,用来渲染3D地球,2D区域地图,和多种GIS要素.不需要 ...

  2. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  3. paramiko执行命令超时的问题

    问题:paramiko远程执行命令,需要等到命令返回信息,如果命令执行时间比较长,返回信息就需要等很久 方案:1.使用nohup + 待执行命令 + & ,使用后台执行的方式,应该可以快速返回 ...

  4. jquery获取<div></div>之间的内容.text() 和 .html()区别

    jQuery 获取 div 之间的内容,有两种方法,$(selector).text().$(selector).html() . html: <div> <p>test< ...

  5. Oracle Apex 有用笔记系列 6 - 可编辑交互报告 Editable Interactive Report

    据笔者所知.Apex 4.x 是没有提供可编辑交互报告组件的.这就须要我们手动实现. 事实上这也并非非常复杂,仅仅须要简单几步. 1. 依据向导建立一个interactive report.查询语句能 ...

  6. C# Main(string[] args)方法参数

    Main 方法是 C# 控制台应用程序或窗口应用程序的入口点,以下是各种情况下方法参数的输入方式: 1.通过vs启动,需要在“项目属性-调试-启动选项-命令行参数”中配置参数,格式为:参数一 参数二 ...

  7. shell（2）：正则表达式

    一.整理正则表达式博客 (1)正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. 在linux中,通配符是由shel ...

  8. 数据库历险记（三） | 缓存框架的连环炮 数据库历险记（二） | Redis 和 Mecached 到底哪个好？ 数据库历险记（一） | MySQL这么好，为什么还有人用Oracle？ 面对海量请求，缓存设计还应该考虑哪些问题？

    数据库历险记(三) | 缓存框架的连环炮   文章首发于微信公众号「陈树义」,专注于 Java 技术分享的社区.点击链接扫描二维码,与500位小伙伴一起共同进步.微信公众号二维码 http://p3n ...

  9. 【学习笔记】C#中HashTable和快速排序的用法，从单词频率统计小程序写起

    先瞎扯点别的.进入这个神圣的地方总需要些鞭策,阿西巴,我是被鞭策进来摆摊的程序猿.软件工程老师说,写程序,发博客,就来博客园.这是个号召力很强的口号.最近看网络营销 搜索引擎优化的书多一些,只能说王老 ...

  10. AMD单双桥时序简叙

    芯片组(双桥)时序 VBAT :RTC电路的供电3V(RTC电路有问题会导致没复位或不跑码等故障) RTCCLK :晶振起振给南桥提供32.768KHz频率(RTC电路有问题会导致没复位或不跑码等故障 ...