浏览器的那些事儿-浅析浏览器的渲染原理

  1990年至今，大家熟悉的浏览器已有25年历史，第一个网页浏览器WorldWideWeb（后更名叫Nexus）为互联网时代打开了门。

        众所周知，目前主流的浏览器有：IE、Chrome、Safari、Firefox，国内还有各种“套壳”的如Sogou、360、猎豹等多到几十个浏览器，种类虽多但浏览器的结构和工作原理大同小异，负责页面的渲染引擎在很长一段时间内也只有trident、gecko、webkit等数种，本文旨在讲述浏览器渲染引擎是怎样工作的，其主要结构以及常见的与渲染相关的问题，深入了解这些知识对从事WEB工作有很大的帮助。

     1. 从地址栏输入URL，浏览器是怎样工作的

        简单的讲，在地址栏输入 https://www.xxx.com 并回车会发生以下事情：

          •  浏览器引擎解析url向server发起网络请求；

          •  接收到server返回的数据包（超文本），交由渲染引擎解析并开始渲染；

          •  渲染的过程是按照标签（DOM树）的顺序进行的，遇到静态资源外链（如css、js、图片等），控制网络组件发起对这些资源的请求，注意这个过程浏览器是边渲染边请求/接收数据的。css、图片会立即被渲染引擎解析渲染（不会阻塞渲染），js会立即被JS引擎解析执行（会阻塞渲染，只有js执行完毕后才会继续渲染 ）；

          •  所有的外链资源请求完毕，页面渲染完毕/js执行完毕，一次完整的页面请求就完成了。

        看过上面的过程会发现浏览器是由分工明确的组件构成的，主要包括用户界面、浏览器引擎、渲染引擎、网络、用户界面后端、js引擎和数据存储等组件，从打开浏览器输入url到最终的页面出现，用户最关心的就是页面的载入速度和显示方式了，这与渲染引擎的工作方式息息相关，话不多说我们来看看何为渲染引擎，它是怎样渲染页面的，它为什么会直接影响页面的载入速度和显示方式。

      2. 渲染引擎 (rendering engine)

        渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示