这是我参与「第四届青训营 」笔记创作活动的第1天，也是真正发技术文章的第1天，受限于个人的经验、技术能力等，难免会有表述不当，技术点理解不到位的地方，欢迎多多指正！
今天主要想总结的是浏览器运行的原理，作为前端开发者，我们经常要去和浏览器打交道。随着前端知识的学习，渐渐对浏览器这个黑盒包括它的运行原理有了一些了解。
现代浏览器结构图
- 用户界面（User Interface）
请求内容显示窗口之外的部分，包括地址栏，回退/前进按钮，书签等。
- 浏览器引擎
在用户界面和渲染引擎之间传递数据。
- 渲染引擎
渲染显示用户请求的内容。
- Networking
用于网络请求
- UI backend
用于绘制浏览器界面
- JS解释器
解析、执行js代码
- 数据存储持久层
帮助浏览器存储数据，比如cookies等
浏览器渲染引擎（浏览器内核）
浏览器渲染引擎也就是浏览器内核，职责就是渲染显示用户请求的内容。默认渲染显示 HTML、XML 文档和图片，也可以通过一些扩展显示其他类型的数据，比如 PDF 文档。
不同的浏览器有不同的内核，Safari 使用的是 WebKit，Chrome 使用的是 Blink 内核。
渲染引擎会先从网络层得到请求文档的内容，然后进行主要的工作流。如下图：
Parsing
构建DOM
当渲染进程收到 HTML data，主线程开始解析 text string(HTML)，把它转为DOM(Document Object Model)
加载子资源
当构建 DOM 的时候，遇到 images、CSS、JS 等外部资源，主线程会从 cache 或者 network 请求加载它们。
JS可以阻塞解析
当 HTML parser 遇到 <script> 标签，它会暂停解析 HTML，加载、解析、执行JS代码
指定（hint to）浏览器你想怎样去加载资源
样式计算
主线程解析 CSS，决定每个DOM节点的 computed style
Layout
主线程会遍历 DOM 和 computed styles，创建 layout tree（含x y coordinates、bounding box sizes 等信息）
Paint
主线程遍历 layout tree 创建 paint records (a note of painting process)
Compositing
参考资料
具体细节可以去看一下这些文章
同时也安利一下这个视频 浏览器是如何运作的？
以上就是浏览器运行原理的简单总结。
