在地址栏输入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加载过程的更多相关文章

  1. 工厂模式模拟Spring的bean加载过程

    一.前言    在日常的开发过程,经常使用或碰到的设计模式有代理.工厂.单例.反射模式等等.下面就对工厂模式模拟spring的bean加载过程进行解析,如果对工厂模式不熟悉的,具体可以先去学习一下工厂 ...

  2. linux内核启动以及文件系统的加载过程

    Linux 内核启动及文件系统加载过程 当u-boot 开始执行 bootcmd 命令,就进入 Linux 内核启动阶段.普通 Linux 内核的启动过程也可以分为两个阶段.本文以项目中使用的 lin ...

  3. Inside Flask - flask 扩展加载过程

    Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...

  4. web.xml 的加载过程

    初始化过程: 在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一个Serv ...

  5. Browser默认书签加载过程

    Browser配置默认书签——string.xml中<string-array name="bookmarks" translatable="false" ...

  6. Android View的加载过程

    大家都知道Android中加载view是从Activity的onCreate方法调用setContentView开始的,那么View的具体加载过程又是怎么的呢?这一节我们做一下分析. 首先追踪一下代码 ...

  7. 你所不知道的SQL Server数据库启动过程（用户数据库加载过程的疑难杂症）

    前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...

  8. Ogre中Mesh的加载过程详述

    转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...

  9. JVM——类的加载过程

    附一张图方便理解,一个类的执行过程 类的加载过程,简明的来说 类装饰器就是寻找类的字节码文件并构造出类在JVM内部表示的对象组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: 装载:查 ...

  10. IOS 应用程序启动加载过程（从点击图标到界面显示）

    今天帮同事解决问题的时候发现,程序BUG是由加载过程引起的.所以当局部代码没有问题,但是程序一运行却总不是我们想要结果的时候,我们应该想想是不是因为我们忽略了试图加载过程的原因.下面我们用一个例子来简 ...

随机推荐

  1. 提示标签title折行

    使用代码换行共两种代码,均可实现html标签内title内容显示时换行.换行代码符分别为:“ ”和“ ”以上符合数字输入均必须英文半角模式输入.使用时候,在需要换行地方任选一种(组)换行符号代码即可.

  2. 记录一下WPF中自寄宿asp.net服务添加urlacl的问题

    asp.net公开服务地址时,由于当前用户权限问题,会导致服务地址未添加到urlacl池中报错. 关于添加urlacl的细节,请参考我之前的文章:asp.net self host and urlac ...

  3. 硬件-硬盘-SSD（固态硬盘）：百科

    ylbtech-硬件-硬盘-SSD(固态硬盘):百科 固态驱动器(Solid State Disk或Solid State Drive,简称SSD),俗称固态硬盘,固态硬盘是用固态电子存储芯片阵列而制 ...

  4. python - from … import …

    from . import XXX        默认的就是在当前程序所在文件夹里__init__.py程序中导入XXX   from .A import XXX     如果当前程序所在文件夹里没有 ...

  5. window.screenLeft&&window.screenTop&&window.screenX&&window.screenY

    http://blog.sina.com.cn/s/blog_14e2a237b0102w4i0.html window.screenLeft&&window.screenTop&am ...

  6. linux下搭建mysql数据库

    linux下搭建mysql数据库 1.下载mysql: http://dev.mysql.com/downloads/mysql/5.6.html#downloads wget http://dev. ...

  7. 什么是Shell？Shell脚本基础知识详细介绍

    这篇文章主要介绍了什么是Shell?Shell脚本基础知识介绍,本文是一篇Shell脚本入门文章,在本文你可学到什么是Shell.有多少种Shell.一个Shell脚本代码实例,需要的朋友可以参考下 ...

  8. 安装Linux系统CentOS6.5

    个人机器搭建分布式环境时避免要使用虚拟机来满足分布式环境所需的机器,当然伪分布式除外. 简单记录下虚拟机环境的创建过程,Mac上常用的虚拟机VMware Fusion. 虚拟机资源库中新建虚拟机: 选 ...

  9. Redis 内存满了怎么办……

    我们知道Redis是基于内存的key-value数据库,因为系统的内存大小有限,所以我们在使用Redis的时候可以配置Redis能使用的最大的内存大小. 1.通过配置文件配置 通过在Redis安装目录 ...

  10. Linux文件与目录操作 ls 命令（2）

    说文件操作是最频繁地操作也不为过,在Linux中,使用ls命令可以列出当前目录中所有内容,本篇就先说说ls命令.本文所说的文件指文件和目录. ls命令常用选项 -a:显示指定目录下所有子目录与文件,包 ...