浏览器

浏览器是一种软件，它可以从远程服务器（或本地磁盘）中加载文件并显示文件，它可以允许用户和它交互。

浏览器的核心是浏览器引擎。在不同的浏览器中，根据浏览器引擎的不同，它们显示页面的内容或者顺序会有所区别。

火狐的浏览器引擎称为Gecko，Chrome的浏览器引擎称为Blink，而最新版的IE浏览器内核也已经投入Blink的怀抱。

数据接收和转换

浏览器处理的是字节而不是我们写的代码，因此，它需要对我们的代码比如html，css，js进行数据的转换才能处理。

HTML和DOM

HTML是标记语言，它是由一个个闭合的标签构成的，而浏览器需要将他们进行拆分统计，形成一个从根节点到子节点的数据结构，我们把这种结构叫做dom。可以说dom树是浏览器的一个核心功能，正是有了dom树的存在，我们的html代码才有了层次和结构。

CSS和CSSOM

css是样式表，它是用来给文档添加样式的。同HTML一样，它也需要进行解析，它会解析成CSSOM树，有了树级结构，样式就可以继承和单独拆分了。

渲染树

DOM和CSSOM树结构是两个独立的结构。

DOM包含有关页面HTML元素的关系的所有信息，而CSSOM包含有关元素样式的信息。

浏览器将DOM和CSSOM树合并为一个称为渲染树的东西。有了它，我们才能看到丰富多彩的页面。

渲染树包含有关页面上所有可见DOM内容的信息，以及不同节点所需的所有CSSOM信息。

请注意，如果元素被CSS隐藏，该节点将不会在渲染树中表示。

隐藏的元素将出现在DOM中，但不会出现在渲染树中。

原因是渲染树结合了来自DOM和CSSOM的信息，因此它知道在树中不包括隐藏元素。

布局

构建好渲染树后，下一步就是执行“布局”。

有了渲染树之后，我们在屏幕上就拥有了所有可见内容的内容和样式信息，但实际上我们还没有在屏幕上呈现任何内容。

浏览器需要通过从DOM和CSSOM接收到的内容和样式计算页面上每个对象的确切大小和位置。这样才能显示在页面上。这个过程就是布局，也被称为重排。

绘制

布局之后，我们需要的就是在浏览器中绘制出我们的页面。

根据渲染树和布局之后的信息，浏览器只要一个个像素点进行绘制，就可以画出整个页面。

JS和阻塞

一个不错的Web应用程序肯定会使用一些JavaScript。而且JavaScript可以修改页面的内容和样式。

言外之意，JS可以从DOM树中删除和添加元素，也可以修改元素的CSSOM属性。为什么很多时候我们都会把引入的js放到页面底部，目的就是为了防止JS阻塞布局。因为浏览器是顺序读取的，所以越早的构造出渲染树，我们看页面的时间就越短。不过async异步的引入，让我们可以不会因为js的加载而停止dom树的构建，而是在js加载完成之后来使用。

关键渲染路径

在接收HTML，CSS和JS字节并将它们转换为屏幕上的渲染像素之间采取的步骤的过程称为关键渲染路径。

优化您的网站的性能就是优化关键的渲染路径。

一个经过优化的站点应该进行渐进式渲染，并且不会阻塞整个过程。

这就是网络应用程序被视为慢速或快速的区别。

总结

现在的浏览器都提供开发者了开发者工具，通过它我们可以详细了解到页面的渲染，资源的加载整个过程，我们平时只要多打开它，多分析它，就能让我们的网站以最快的方式呈现在客户面前。