domReady和firstPaint
前言
domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和JS异步请求的完全加载。
一、浏览器渲染引擎基本流程
- 浏览器开始解析HTML文档
- 碰到CSS链接开始并行解析CSS文件
- 当碰到
<script>脚本就开始加载解析<script>脚本，并阻塞html的解析 - 当DOM树和CSSOM解析完成后，生成renderTree
- 进行布局
- 绘制在浏览器上
CSS加载解析时不会阻塞DOM树的解析过程，这两个解析过程是可以并行的，但是CSS加载过程中是不能进行JavaScript的解析的，也就是说CSS加载过程中是会阻塞JavaScript的解析，此外因为生成Render Tree时需要CSSOM，所以在DOM Tree解析完成而CSSOM未完成时不会继续生成Render Tree。
使用异步加载的<script>标签是不会阻塞DOM解析的，当然其就不会阻塞DOMContentLoaded事件的触发，但是依旧会阻塞load事件的触发。
<script>标签本身也属于DOM结构，必须等待其加载完成之后才能触发DomContentLoaded事件（执行完同步代码就触发）。
二、First Paint 与 domReady
1.First Paint
浏览器第一次绘制页面
2.先后顺序
First Paint和DOMContentLoaded、load事件的触发没有绝对的关系，FP可能在他们之前，也可能在他们之后，这取决于影响他们触发的因素的各自时间。
为了获得更好的用户体验，渲染引擎将尝试尽快在屏幕上显示内容。它不会等到所有HTML解析完毕后才开始构建和布局渲染树。部分内容将被解析和显示，而该过程将继续处理其余部分内容，这些其余内容始终来自网络。（即html内容很多时，会先绘制一部分，然后继续解析。当html内容很少时，会等DOM和CSSOM解析完成后生成RENDER TREE 进行绘制）。
参考博文：
https://www.cnblogs.com/hongrunhui/p/8929001.html
https://www.cnblogs.com/WindrunnerMax/p/13706499.html
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow