HTML加载过程
在地址栏输入url，返回html后，浏览器开始顺序加载并渲染DOM
Body标签
当浏览器遇到body标签才算真正开始加载并渲染DOM，此时会有以下几种情况：
DOM元素
浏览器遇到dom元素时，正常顺序加载，边加载边渲染
内联CSS
当遇到内联CSS时，浏览器继续加载，但渲染被阻塞，此时会生成新的CSS Rule Tree，生成后重新渲染界面
外联CSS
当遇到外联CSS（link标签），浏览器启一个线程加载css文件，DOM继续加载但渲染被阻塞
内联Javascript
当遇到内联Javascript，浏览器开始执行这段脚本，DOM的加载和渲染同时被阻塞（由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞）
外联Javascript
当遇到外联Javascript，浏览器开始下载这段脚本，下载成功后执行它，这整个过程DOM的加载和渲染同时被阻塞
Example
用一个例子解释一下
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
在js文件下载的过程中，js后面的元素没有被加载，也没有呈现在界面上，说明js文件的下载阻塞了DOM的解析并渲染
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css">
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
在css文件仍在下载的过程中，已经可以打印出两个<h>，可以看出css文件的加载阻塞了DOM渲染但没有阻塞DOM加载
defer 与 async
如果我们执行以下代码，首先加载外部Javascript文件，然后加载DOM其他内容：
<html>
<body>
<script src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>如我们所料，文件没有下载并执行完毕，Hello World是不会打印出来的。
如果我们为外部Javascript添加defer或async属性，那么它的下载就不会阻塞DOM其他内容的加载：
<html>
<body>
<script async src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>
关于defer与async属性的区别，请参考我的另一篇文章：
Javascript高级程序设计读书笔记——在HTML中使用Javascript
HTML加载过程的更多相关文章
- 工厂模式模拟Spring的bean加载过程
一.前言 在日常的开发过程,经常使用或碰到的设计模式有代理.工厂.单例.反射模式等等.下面就对工厂模式模拟spring的bean加载过程进行解析,如果对工厂模式不熟悉的,具体可以先去学习一下工厂 ...
- linux内核启动以及文件系统的加载过程
Linux 内核启动及文件系统加载过程 当u-boot 开始执行 bootcmd 命令,就进入 Linux 内核启动阶段.普通 Linux 内核的启动过程也可以分为两个阶段.本文以项目中使用的 lin ...
- Inside Flask - flask 扩展加载过程
Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...
- web.xml 的加载过程
初始化过程: 在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一个Serv ...
- Browser默认书签加载过程
Browser配置默认书签——string.xml中<string-array name="bookmarks" translatable="false" ...
- Android View的加载过程
大家都知道Android中加载view是从Activity的onCreate方法调用setContentView开始的,那么View的具体加载过程又是怎么的呢?这一节我们做一下分析. 首先追踪一下代码 ...
- 你所不知道的SQL Server数据库启动过程（用户数据库加载过程的疑难杂症）
前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...
- Ogre中Mesh的加载过程详述
转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...
- JVM——类的加载过程
附一张图方便理解,一个类的执行过程 类的加载过程,简明的来说 类装饰器就是寻找类的字节码文件并构造出类在JVM内部表示的对象组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: 装载:查 ...
- IOS 应用程序启动加载过程（从点击图标到界面显示）
今天帮同事解决问题的时候发现,程序BUG是由加载过程引起的.所以当局部代码没有问题,但是程序一运行却总不是我们想要结果的时候,我们应该想想是不是因为我们忽略了试图加载过程的原因.下面我们用一个例子来简 ...
随机推荐
- leetcode-easy-array-217. Contains Duplicate
mycode 76.39% class Solution(object): def containsDuplicate(self, nums): """ :type n ...
- JavaScript基础篇详解
全部的数据类型: 基本数据类型: undefined Number Boolean null String 复杂数据类型: object ①Undefined: >>>声明但未初始化 ...
- 正则表达式——Unicode 属性
每一个 Unicode 字符,除了有 Code Point 与之对应外,还具体其他属性,在正则表达式中常用到三种 Unicode 属性: Unicode Property.Unicode Scri ...
- FLUME安装&环境（二）:拉取MySQL数据库数据到Kafka
Flume安装成功,环境变量配置成功后,开始进行agent配置文件设置. 1.agent配置文件(mysql+flume+Kafka) #利用Flume将MySQL表数据准实时抽取到Kafka a1. ...
- python3 基本数据类型_1
不得已,要学习python3了,之前了解到py2与py3有很大不同,不过学起来才能感觉到,比如print. 不过,同样的代码,可以使用py3,py2执行,结果也相似,大家可以看看. 大概因为初学,还未 ...
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- java一周学习记录（2017/12/2）
姓名:Danny 日期:2017/12/2 周日 周一 周二 周三 周四 周五 周六 所花时间 120 150 190 150 180 28 ...
- Chapter03 第三节 浮点数
3.3 浮点数 3.3.1 浮点数的表示 常规表示:12.34.0.01.8.0 E表示: 2.5e+8(2.5 10^8).7E6(7.0 10^6) (e大小写随意) (e+x或者E-x表示小数点 ...
- django groupby 用法
- 红帽学习笔记[RHCSA] 第七课[网络配置相关]
第七课[网络配置相关] 在Vmware中添加网卡 编辑 -> 编辑虚拟网络 -> 添加网络->随便选择一个如VMnet2-> 选择仅主机模式 -> 勾掉使用本地DHCP服 ...