想着优化浏览器打开网页的体验，那么这周，首先了解一下浏览器的工作原理吧。谈到浏览器的原理分析，网上自然有一大堆技术文章，个人觉得以色列开发人员塔利·加希尔的研究成果也是够的了，足够自己学习了。
如果你打开了，会发现文章很长，更多是从研究的角度去分析。下面将更多的从iOS 开发者的角度，把关心的问题提出来，希望大家能一起探讨。
页面展示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></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>
<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 无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。
