浅析浏览器工作原理

想着优化浏览器打开网页的体验，那么这周，首先了解一下浏览器的工作原理吧。谈到浏览器的原理分析，网上自然有一大堆技术文章，个人觉得以色列开发人员塔利·加希尔的研究成果也是够的了，足够自己学习了。

如果你打开了，会发现文章很长，更多是从研究的角度去分析。下面将更多的从iOS 开发者的角度，把关心的问题提出来，希望大家能一起探讨。

页面展示timeline

Screen Shot 2017-04-08 at 6.53.58 PM.png

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

截图来源自www.html5rocks.com

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

浏览器渲染过程

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

Screen Shot 2017-04-08 at 6.14.34 PM.png

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

    
    
Hello World
    
![](example.png)
    

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 加载顺序

    
    
        
        
        
        
    
        
Hello Alibaba!
        
 Hello Alibaba!
        ![](./Alibaba.jpg)

    
    
    

上述代码是最普通也是最简单的一个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 标签
  
• 带有async属性 的script 标签
  

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

参考资料：
浏览器的工作原理：新式网络浏览器幕后揭秘
白屏问题与FOUC无样式内容闪烁/加载异步