详细的浏览器工作原理

矫情吗；* 2021-06-11 15:12 515阅读 0赞

原文链接：[https://www.jianshu.com/p/4a942a7dc153][https_www.jianshu.com_p_4a942a7dc153]

##  ##

## 页面展示timeline ##

![Image 1][]

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

![Image 1][]

>  *  User Interface  
>     定义了一些常用的浏览器插件
>  *  Browser engine  
>     平台应用的相关借口，在用户界面和呈现引擎之间传送指令
>  *  Rendering engine  
>     处理HTML 和 CSS 的解析与渲染
>  *  Networking  
>     处理网络请求
>  *  JavaScript Interpreter  
>     解析和执行JS 代码
>  *  UI Backend  
>     绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现
>  *  Data Persistence  
>     持久层。浏览器需要把所有数据存到硬盘上，如cookies，图片，css等。新的HTML规范 (HTML5) 规定了一个完整（虽然轻量级）的浏览器中的数据库：’web database’

## 浏览器渲染过程 ##

>  *  解析html 为DOM 树
>  *  渲染树结构
>  *  布局渲染树
>  *  绘制渲染树

![Image 1][]

**解析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  
來源：简书

[https_www.jianshu.com_p_4a942a7dc153]: https://www.jianshu.com/p/4a942a7dc153
[Image 1]: