异步执行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元素后面。
但是我们不能再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脚本——防止阻塞的更多相关文章
- 自动化测试中执行JS脚本方法封装
执行JS脚本方法封装: class JavaScript(Base): def execute_javascript(self, js): """执行 JavaScrip ...
- AngularJs中，如何在render完成之后，执行Js脚本
AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...
- A标签执行JS脚本
A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...
- 在java代码中执行js脚本，实现计算出字符串“（1+2）*（1+3）”的结果
今天在公司项目中,发现一个计算运费的妙招.由于运费规则各种各样,因此写一个公式存到数据库.下次需要计算运费时,直接取出这个公式,把公式的未知变量给替换掉,然后计算出结果就是ok了. 一 ...
- Angular在render完成之后，执行Js脚本
AngularJs中,如何在render完成之后,执行Js脚本 app.directive('onFinishRenderFilters', function ($timeout) { return ...
- js 点击超链接，执行js脚本，而不进行url跳转
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- selenium webdriver学习（三）------------执行js脚本
selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver 在用selenium 1.X的时候常常会用到getEval() ...
- Selenium执行js脚本
如何使用Selenium来执行Javascript脚本呢 Selenium中提供了一个方法:execute_script 来执行js脚本 return 可以返回js的返回结果 execute_scri ...
- Java8中执行js脚本
代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...
随机推荐
- 跟开涛学SpringMVC（4.1）：Controller接口控制器详解（1）
http://www.importnew.com/19397.html http://blog.csdn.net/u014607184/article/details/52074530 https:/ ...
- bubble chat listview
最近在iOS中用到bubble chat listview,找了个比较有名气的lib(MessagesTableViewController)=>https://github.com/jesse ...
- Android入门:MVC模式(中)
MVC 模式的最基本概念是分层设计,把我们的代码基于 View(视图).Model(模型).Controller(控制器)进行分类封装,这样做的目的是为了清晰结构,使代码更易维护和扩展. 在上一篇文章 ...
- Webduino Smart 从入门到起飞
前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 试用了一下,感觉这板子+WebduinoBlockly在线开发环境,下限低.上限也低,以后肯定要刷其他固件的.举个简单的例子,WB ...
- hadoop安全之hftp
hftp默认是打开的,同意以浏览器的方式訪问和下载文件,以此方式下,能够读取全部文件,留下了安全隐患. 測试例如以下 /user/hive/warehouse/cdntest.db/selfreado ...
- 综合运用: C++11 多线程下生产者消费者模型详解（转）
生产者消费者问题是多线程并发中一个非常经典的问题,相信学过操作系统课程的同学都清楚这个问题的根源.本文将就四种情况分析并介绍生产者和消费者问题,它们分别是:单生产者-单消费者模型,单生产者-多消费者模 ...
- javascript 高级编程系列 - 继承
1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数) // 定义父类构造函数 function SuperClass(father, ...
- UVA 1541 - To Bet or Not To Bet(概率递推)
UVA 1541 - To Bet or Not To Bet 题目链接 题意:这题题意真是神了- -.看半天,大概是玩一个游戏,開始在位置0.终点在位置m + 1,每次扔一个硬币,正面走一步,反面走 ...
- 算法NB三人组
#快速排序-除了python自带的sort排序模块之外就这个最好用,只需会这个就行,其他的排序了解就好,能用冒泡,插入..的都可以用快排快速实现 import random from timewrap ...
- Nginx详细的安装教程（linux）
转:https://blog.csdn.net/u013641234/article/details/73838472 Nginx作为一个web服务器,目前使用最多的就利用其负载均衡,本篇着重讲解的是 ...