你了解浏览器吗

前端一直在跟浏览器打交道，但对于浏览器我们又了解多少。经常被问起这样一个问题：“你对浏览器内核了解吗”。我只能说，你很会问，但问题摆在我们面前，从专业角度我们如何剖析这个问题呢。

这个问题特别的大，它应该被分割成若干个子问题：

1、浏览器内核最重要组成部分是什么

2、Js/css能造成页面阻塞吗

3、网页呈现的工作原理是什么

4、如何缩短网页白屏时间

5、谈谈你对浏览器引擎的理解

6、DOMContentLoaded与onLoad区别

也就是说回答出上面6个问题，才能真正回答出题人的意图。

浏览器内核最重要的组成部分是WebCore和JsCore。

WebCore是什么？

WebCore是html DOM解析、CSSOM解析、页面渲染的核心组件

JsCore是什么？

JsCore是javascript进行dom操作的核心组件，也是我们常说的js引擎，不同浏览器有不同的js引擎，最出名的应该是chrom的v8、safari的javascrpt Core、IE的jsscript。

Js/css能造成页面阻塞吗？答案是肯定的，所以说不管你是css还是js都会拖延页面的加载速度。那衍生另外一个问题，html、css、js它们到底是什么关系，它们又是如何工作的呢？

从图上可以看出，DOM tree和CSSOM tree的解析是同时进行的，不存在阻塞问题。但是render tree是同时受DOM tree和CSSOM tree的影响，双方有任何一方的耽误都会影响页面的渲染。

网页白屏时间过长，css过大、html布局过渡复杂会直接影响页面呈像，如果你用了语法糖，js位置大小同样也会影响你呈像。所以我们在写代码的时候，通常有这样的原则：

1、css放在网页头部

2、js放在网页尾部

以上都是讲述了WebCore的工作原理，那jscore它是怎么工作的呢，也就是浏览器中js引擎是怎么工作的呢？

虽然浏览器引擎好几个，但工作原理都是大同小异。宏观上讲，Js引擎相当于一个虚拟机，当页面加载标签的时候，虚拟机中会创建一个上下文对象，然后按照语义对dom进行相应操作，重新渲染。

浏览器页面加载主要有两个事件：DOMContentLoaded、onLoad：

1、onLoad：等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。

2、DOMContentLoaded：当页面的内容解析完成后，则触发该事件。由于css会阻塞Dom渲染和js执行，而js会阻塞Dom解析，所以该事件会在css加载完后就行触发。