概述
load事件： load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件
DOMContentLoaded事件： 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件
- 在chrome浏览器的开发过程中，我们会看到network面板中有这两个数值，分别对应网 络请求上的标志线，这两个时间数值分别代表什么？
- 我们一再强调将css放在头部，将js文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能?
- 在用jquery的时候，我们一般都会将函数调用写在ready方法内，这是什么原理？
首先看一下
DOMContentLoaded顾名思义，就是dom内容加载完毕。那什么是dom内容加载完毕呢？我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。
这时候问题又来了，什么是HTML文档被加载和解析完成。要解决这个问题，我们就必须了解浏览器渲染原理。
浏览器渲染机制
首先先来看看浏览器渲染机制，大致分为以下几步
1、浏览器根据服务器响应回来的html，进行解析后构建一颗DOM节点树；
2、根据css文件，构建得到CSSOM树；
3、将DOM树与CSSOM树结合，精确计算每个节点的位置、尺寸等等属性，构建出渲染树；
4、渲染至用户页面
结论：从这个我们可以看出，css不会影响DOM的解析，但是会影响DOM的渲染过程。
浏览器引擎
浏览器引擎分为渲染引擎以及js引擎
1、渲染引擎：主要负责html解析以及css等相关文件
2、js引擎：负责js代码运行与解析
尽管浏览器在加载页面的时候是多线程的，但是浏览器在渲染页面的时候却是一个单线程过程，那么也就是说，渲染引擎与js引擎不能同时工作，所以也就引出了js阻塞问题。
下面就是页面加载和解析过程中，浏览器的一个快照
上面我们看到在解析html的过程中，html的解析会被中断，这是因为javascript会阻塞dom的解析。当解析过程中遇到script标签的时候，便会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后执行。在处理完脚本之后，浏览器便继续解析HTML文档。
同时javascript的执行会受到标签前面样式文件的影响。如果在标签前面有样式文件，需要样式文件加载并解析完毕后才执行脚本。这是因为javascript可以查询对象的样式。
js 阻塞了什么? js阻塞问题?
因为js在执行的过程中可能会操作DOM，发生回流和重绘，所以GUI渲染线程与JS引擎线程是互斥的。
在解析HTML过程中，如果遇到 script 标签，渲染线程会暂停渲染过程，将控制权交给 JS 引擎。内联的js代码会直接执行，如果是js外部文件，则要下载该js文件，下载完成之后再执行。等 JS 引擎运行完毕，浏览器又会把控制权还给渲染线程，继续 DOM 的解析。
js阻塞问题是指当浏览器在解析文档或者渲染页面时，遇见了js代码，需要渲染引擎中断，而运行js引擎，从而阻塞浏览器原本的工作状态。
因此，js会阻塞DOM树的构建。
那么，是否会阻塞页面的显示呢？我们用下面的代码来测试一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello world</div>
<script>
debugger
</script>
<div>hello world2</div>
</body>
</html>
可以看到，这个页面的DOMContentLoaded发生在2.23s，可见js阻塞了DOM树的构建。但是，页面上却几乎在一瞬间显示了hello world，说明js不会阻塞位于它之前的dom元素的渲染。
现代浏览器为了更好的用户体验，渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有DOM解析完成后才布局渲染树。而是当js阻塞发生时，会将已经构建好的DOM元素渲染到屏幕上，减少白屏的时间。
这也是为什么我们会将script标签放到body标签的底部，因为这样就不会影响前面的页面的渲染。
css 阻塞了什么
当我们解析 HTML 时遇到 link 标签或者 style 标签时，就会计算样式，构建CSSOM。
css不会阻塞dom树的构建，但是会阻塞页面的显示。我们依然用一个例子来测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
<div class="woo-spinner-filled">hello world</div>
<div>hello world2</div>
</body>
</html>
使用一个外部css文件，打开Slow 3G模拟比较慢的网速，可以看到，DOMContentLoaded事件触发只用了30ms，页面此时依然是空白，而几乎是loaded事件2.92s发生时，页面才出现内容。
**原因是，浏览器在构建 CSSOM 的过程中，不会渲染任何已处理的内容。即便 DOM 已经解析完毕了，只要 CSSOM 不没构建好，页面也不会显示内容。
只有当我们遇到 link 标签或者 style 标签时，才会构建CSSOM，所以如果 link 标签之前有dom元素，当加载css发生阻塞时，浏览器会将前面已经构建好的DOM元素渲染到屏幕上，以减少白屏的时间。比如下面这样：**
// 首先显示黑色hello world，等待CSSOM加载完毕之后，显示hello world2，并且hello world变为红色
<body>
<div class="woo-spinner-filled">hello world</div>
<link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
<div>hello world2</div>
</body>
这样做会导致一个问题，就是页面闪烁，在css被加载之前，浏览器按照默认样式渲染
为了避免页面闪烁，通常 link 标签都放在head中。
css会不会阻塞后面js执行？答案是会！
JS 的作用在于修改，它帮助我们修改网页的方方面面：内容、样式以及它如何响应用户交互。这“方方面面”的修改，本质上都是对 DOM 和 CSSDOM 进行修改。当在JS中访问了CSSDOM中某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行JS脚本。
运行下面这个例子，就会发现等css加载完成后，才会在控制台打印“this is a test”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
<div class="woo-spinner-filled">hello world</div>
<div>hello world2</div>
<script>
console.log('this is a test')
</script>
</body>
</html>
优化
- 使用内联 JavaScript 和 CSS，这样获取到 HTML 文件之后就可以直接开始渲染流程了。
- 并不是所有的场合都适合内联，那么还可以尽量减少文件大小，比如通过 webpack 等构建工具删除无用代码、压缩 css、JavaScript 文件的体积；并且启用 CDN 加快文件的下载速度。
- 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件。
- 如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码。
<script src="index.js"></script>
//浏览器必须等待 index.js 加载和执行完毕才能去做其它事情。
<script async src="index.js"></script>
//index.js 的加载是异步的，加载时不会阻塞页面渲染，适用于js代码不需要操作DOM的。下载完毕之后立即加载，在另一个线程中加载，而不是Main Thread
<script defer src="index.js"></script>
//JS 的加载是异步的，执行是被推迟的。
//使用了 defer 标记的脚本文件，会等整个文档解析完成，在 DOMContentLoaded 事件触发之前执行，HTML5脚本规范规定它们按顺序执行。在实际当中，不一定按顺序执行或者在DOMContentLoaded事件之前执行
async、defer区别
1、共同点：可以让浏览器进行异步加载js代码，而不会出现js阻塞的情况
2、区别：
async：当js代码加载会之后会异步执行js代码；
defer：当js代码加载完之后回等到dom解析完之后，在DocumentContentLoaded之前执行js代码，在一定程度上可以保证js代码加载的顺序。
总结
- DOM树和CSSOM树是分别构建的，DOM树只有在CSSOM树构建好之后才会渲染，如果需要等待CSSOM树的构建，在页面上渲染link标签之前的DOM树，否则白屏
- JavaScript的执行会阻塞DOM树的渲染，如果发生阻塞，渲染script标签之前的DOM树，否则白屏
