浏览器渲染过程中的几个事件

首先我们了解一下页面加载过程中的几个事件

DOMContentloaded
当HTML被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

需要注意，该事件会等待加载的js执行完。

image.png

参考demo2,当加载的js需要执行耗时的操作，那么该事件就会等待js执行完后触发。

load

当html及其依赖资源已完成加载时，将触发load事件。
及html中引入的资源，比如img,行内样式的字体图片。

注意不包含html引入的css里面的图片和字体等等。

First paint
注意是第一个像素，相当于开始绘制。
是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时，渲染是任何与输入网页导航前的屏幕上的内容不同的内容。
First Contentful paint
当浏览器第一次内容绘制完成

不重要的

First Meaningful paint
Largest Contentful paint