详细的浏览器工作原理

原文链接：https://www.jianshu.com/p/4a942a7dc153

页面展示timeline

重点看一下，浏览器加载和渲染界面这个过程。首先浏览器由7个部分组成：

User Interface
定义了一些常用的浏览器插件

Browser engine
平台应用的相关借口，在用户界面和呈现引擎之间传送指令

Rendering engine
处理HTML 和 CSS 的解析与渲染

Networking
处理网络请求

JavaScript Interpreter
解析和执行JS 代码

UI Backend
绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现

Data Persistence
持久层。浏览器需要把所有数据存到硬盘上，如cookies，图片，css等。新的HTML规范 (HTML5) 规定了一个完整（虽然轻量级）的浏览器中的数据库：’web database’

浏览器渲染过程

解析html 为DOM 树

渲染树结构

布局渲染树

绘制渲染树

解析html 为DOM 树 :
1）HTML字节流解码变为字符流。根据不同编码方式，如UTF-8 GBK来解码
2）词法分析：将字符流解析为一个个词语
3）语法分析：通过不同标签，生成node节点
4）构建DOM树：将node节点组织成DOM树

<html>
    <body>
    <p>Hello World</p>
    <div>![](example.png)</div>
    </body>
</html>

CSS解析器读取CSS文件，得到元素最匹配的样式
1）经过词法分析和语法分析，生成一个个CSS规则。规则由选择器和一个key:value对组成的属性集合构成
2）进行规则匹配：根据元素信息，如id class 标签，通过不同优先级得到元素最匹配的CSS规则

p,div {
            margin-top: 3px;
            }
        .error {
            color: red;
            }

渲染树结构:
生成RenderObject树：由DOM树构建RenderObject树，并将CSS得到的元素匹配的样式存入到RenderObject中。

布局渲染树 : 根据RenderObject中的样式属性，先测量元素的宽高，这个过程一般需要递归，因为父元素的大小会受到子元素影响。然后计算根据框模型，由paddind border margin计算布局。

绘制渲染树 : 先绘制元素背景，然后是浮动部分，最后是前景（content，padding，border等部分）。最后得到了用户可见区域（ViewPort）的内存表示。

通常页面的加载速度会受HTML，CSS ，JS 的影响，那么三者又是怎么加载的？

HTML ,CSS, JavaScript 加载顺序

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link rel="stylesheet" href="./style1.css">
        </head>
    <body>
        <P>Hello Alibaba!</P>
        <section> Hello Alibaba!</section>
        ![](./Alibaba.jpg)

    <script src="./main1.js"></script>
    </body>
    </html>

上述代码是最普通也是最简单的一个HTML模板页面，也遵循了样式表置于head、脚本置于与底端这些基本准则，下面我们来分析一下浏览器如何按时间一步一步的加载出这个页面：


1.  浏览器接收到HTML模板文件，开始从上到下依次解析HTML；
2.  遇到样式表文件style1.css，这时候浏览器停止解析HTML，接着去请求CSS文件；
3.  服务端返回CSS文件，浏览器开始解析CSS；
4.  浏览器解析完CSS，继续往下解析HTML，碰到DOM节点，解析DOM；
5.  浏览器发现img，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6.  服务器返回图片文件，由于图片占用了一定面积，影响了页面排布，因此浏览器需要回过头来重新渲染这部分代码；
7.  碰到脚本文件，这时停止所有加载和解析，去请求脚本文件，并执行脚本；
8.  加载完所有的HTML、CSS、JS后，页面就出现在屏幕上了。

浏览器在解析HTML页面，是从上到下依次执行的，如果在head中引用了js 文件，而这个文件很大，js 为阻塞式加载，那么浏览器会停止渲染页面，等js 文件加载完之后才会继续渲染。这就会导致白屏问题，CSS 文件也一样，因为CSS文件队DOM的样式，布局有影响，所以浏览器会等CSS文件下载完。

为了避免白屏问题，如果页面的初始渲染不依赖CSS 和 JS，建议把外部引用的文件写在最后。那么问题又来了，如果CSS 文件组后加载的话，会出现短暂无样式的页面。

因为JS为阻塞式的加载，加载过程按照文档顺序从上到下，因此有依赖关系的JS 要按顺序放好，并且把不必要的JS 放在底部加载。

如何避免白屏和无样式的页面问题:

带有defer属性的script 标签
<script defer src="script.js"></script>

带有async属性的script 标签
<script async src="script.js"></script>

即使把外部脚本写在前面也不怕了，浏览器会继续向下解析HTML网页，解析完就渲染到页面上，同时并行下载script标签中的外部脚本。defer 和async 的区别在于，前者会保证外部脚本的执行顺序，async 无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。

作者：vedon_fu
链接：https://www.jianshu.com/p/4a942a7dc153
來源：简书