本系列的目标：尝试深入理解当前浏览器（谷歌）的大体逻辑。内容严重参考《Webkit 技术内幕》

现代浏览器的渲染逻辑，就是下图的流程。
layoput

一个经典的面试题：从输入url到最终页面的呈现，这其中都经历了些啥？
坦白讲这个问题非常大，因为涉及到的点巨多。但是这问题既有深度也有价值，可以根据你的描述，看出你对现代浏览器执行机制的整体把握和理解，所以成了面试高频题。

总体可分为网页加载过程（DOMContent事件）和渲染过程（onload事件）。
具体步骤如下

  1. 浏览器根据输入的内容做识别，如果输入的是网址，调用 DNS 解析目标 IP，建立连接。如果是关键词，调用搜索引擎去搜索。
  2. 依赖网络模块，三次握手建立连接后获取到各种资源，包括 js、html、css 等等。
  3. html 文件被交给 HTML 解释器转变成一系列词语，然后构建节点生成 DOM 树（树形结构的对象document），css 文件被交给 css 解释器生成样式树,也就是stylesheet。在这过程中，碰到 js 代码，中断 dom 树的构建，权限会给到jscore引擎解释处理，谷歌浏览器中的就是大名鼎鼎的 v8。此处涉及到进程切换。执行完 js 后权限交回给 html 解释器。当然碰到的 js 代码也会根据如 async 或者 defer 异步处理。
  4. css 解释器完成工作后，会在 dom 树上附加解释后的样式信息。
  5. 根据 dom 树，剔除掉所有不显示的节点，并计算元素的布局信息，生成布局树。
  6. 对布局树进行分层，并生成分层树。
  7. 为每个图层生成绘制列表，并将其提交到合成线程。
  8. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
  9. 合成线程发送绘制图块命令DrawQuad给浏览器进程。
  10. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上

此时我们已经对布局树进行了分层，知道了每一层应该绘制的东西。此时，主线程会将这些数据给到合成线程，该线程通过栅格化，生成一个个的图块数据，、执行“DrawQuad”命令给到浏览器进程，最后图块数据给到 GPU，调用 GPU 进程依次绘制，最终页面呈现。

上述就是从页面加载到页面呈现的过程中，涉及到的部分。但是，其中的每一个部分，展开来讲，都内容不小。
本系列尝试着，用通俗易懂的语言，精简内容，输出理解。