这是之前简书上的首发作品，搬过来了，之后就一直在写segmentfault的文章。webkit技术黑幕-朱永生是我大四买的一本书，很老的一本书，当时只看了一点点，一直没看完，刚看完现在，，，我很惭愧地说出来。BrowserKernel在浏览器中，内核模块（渲染引擎）用于将HTML页面转换成视觉和听觉图像结果。接下来我们逐步打开渲染引擎的黑匣子：渲染引擎??模块及其依赖模块html解释器将HTML文本解释成DOM，CSS为DOM的每个元素对象计算样式信息，从而为计算布局提供依据最终的网页基本上，JavaScript可以通过DOM接口和CSSOM接口来解释JavaScript代码和修改网页内容和样??式信息。JavaScript代码交给JavaScript引擎处理。如果网页中包含CSS，则交给CSS解释器处理；当DOM树恢复时，渲染引擎从CSS解释器接收样式信息并构建新模型，模型通过布局模块计算出模型内部各个元素的位置和大小信息。Webkit绘图上下文；生成最终图像。第一阶段比较简单，可以跳过。第二阶段是具体过程：CSS文件被CSS解释器解释成内部表示结构。层次结构在构建虚拟绘图上下文时创建RenderLayer树。具体来说：对于head、script、display:none等之外的“可见节点”，webkit会为它们创建对应的RenderObject对象，一个RenderObject对象针对微会议需要的各种DOM借用点报错。信息，例如样式布局信息。这些RenderObject对象类似于DOM节点对象，可以组成一棵新的树：RenderObject树，HTMLDocument节点对应RenderView节点，RenderView节点是RenderObject树的根节点。另外，网页是有层次结构的，webkit会创建对应的RenderLayer对象。当出现特定类型的RenderObject节点或具有特定CSS样式的RenderObject节点时，webkit会创建RenderLayer对象。所以RenderLayer树是在RenderObject树的基础上新建的树，RenderLayer节点和RenderObject节点并不是一一对应的。以下RenderObject节点需要新建RenderLayer节点：DOM树的Document节点对应RenderView节点，DOM树的HTML节点对应RenderBlock节点。指定css位置（非静态）的RenderObject节点有透明效果。RenderObject节点节点有去除溢出、alpha或反射效果，v街使用canvas2d3d(webgl)的RenderObject节点video节点对应的RenderObject节点最终根据绘图上下文生成最终图像基于Blink的Chromium浏览器架构andmodulechromium模块结构图：没有Content模块，网页内容也可以在Webkit的Chromiumport上渲染，但是没有办法获取沙箱模型，跨进程GPU硬件加速机制，还有很多HTML5的功能，因为这些功能都是在Content层实现的。Content模块和ContentAPI隐藏了下面的渲染机制、安全机制、插件机制等，提供了一个接口层。该接口目前被上层模块或其他项目使用。内部调用者包括Chromium浏览器、ContentShell，外部调用者包括ChromiumEmbeddedFramework、Opera浏览器等。Chromium浏览器和ContentShell是两个在ContentAPI上足够强大的“浏览器”。Chromium具有浏览器的完整功能，即编译后我们可以看到的浏览器样式。内容Shell使用内容API打包。一个简单的外壳层，可以使用内容模块来呈现和显示网页内容。contentShell的作用，首先可以测试contentmodule的很多功能，比如渲染，硬件加速；其次，它是一个引用，被许多外部项目引用以开发基于内容API的浏览器或其他类型的项目。在Android上，它的作用就更大了，因为chromium浏览器的部分代码没有开源，所以只能依赖contentshell。AndroidWebView的思路是用chromium的实现来替代Android默认的webview。多进程模型浏览器进程：主浏览器进程负责浏览器页面的显示，每个页面的管理，以及所有其他类型进程的祖先，负责它们的创建和销毁。Render：网页可能有多个渲染进程。NPAPI插件进程GPU进程：最多有一个，开启GPU硬件加速时创建。Pepper插件处理其他类型的进程，比如LinuxZygote进程；沙盒过程。多线程模型每个进程中有多个线程。对于Browser进程，多线程的主要目的是保持用户界面的高响应性，保证UI进程（主线程）不会被其他任何耗时操作（如本地文件读取）影响。write，socket读写，数据库操作）阻塞，从而影响对用户操作的响应；对于Render进程，Chromium不允许其他操作阻止渲染线程的快速执行，如果是多核，Chromium将渲染进程流水线化，允许不同阶段的渲染在不同的线程上执行。图中模型下的网页加载和渲染过程的基本工作模式有以下几个步骤：Browser进程接收到用户的请求，首先由UI线程处理，将相应的任务交给IO线程，IO线程再通过任务交给Render进程Render进程的IO线程经过简单的解释后交给渲染线程。渲染线程接受请求，加载并渲染网页，这可能需要Browser进程获取资源和GPI入城帮助渲染。最后，Render进程将IOS线程的结果传递给Browser进程。最后Browser进程接收到结果，绘制结果。这篇文章主要讲的是webkit渲染模块。如果对其他模块感兴趣，可以去当当网或者京东购买。
