几个问题： 1. 以上这段代码的逻辑？ 2. 返回的字符串该如何解析？ 3. 想让返回的字符串呈现为图像，怎么做？ <br> # 远程主机响应 ## HTTP协议 #### 请求报文格式：   #### 响应报文格式：  <br> <br> # 网页内容的组成 * doctype：提供浏览器的html版本信息 * head：html头部 * meta：元数据信息 * charset：此特性声明当前文档所使用的字符编码 * http-equiv：客户端行为，如渲染模式，缓存等 * name[keywords]：搜索引擎关键字 * name[description]：搜索引擎描述 * name[viewport]：浏览器视口设置 * link * script：需要在body前完成加载或运行的脚本 * body：html实体 * script：需要在body解析时加载或运行的脚本 <br> <br> # 渲染需要做的工作  上图表示了渲染引擎的一般渲染过程，虚线表示该阶段所依赖的外部模块(不属于渲染引擎) 重要组件： HTML解释器：解释HTML文本的解释器。HTML文本->DOM树 CSS解释器：遇到级联样式时，需要使用级联样式表解释器，为DOM对象计算出样式信息 JS引擎：遇到js代码时，需要使用js解释器，并使得js代码有调用DOM接口和CSSOM接口的能力 布局：结合CSS，计算出每个DOM对象的大小位置信息 绘图：将经过布局计算的DOM节点绘制成图像 <br> ## 思考 1. 通过响应的内容，我们可以看到内容中还存在许多外联资源，浏览器是如何处理的？ 2. 著名的优化：“css放在头部，js放在尾部”，为什么？ 3. 浏览器在渲染之前或之后还要做哪些事情？ 4. 移动端的浏览器和PC端的浏览器是否相同？ <br> # 浏览器内核架构 ## 回答上一节 1. 不同的外链资源，webkit中右不同的资源加载器，当浏览器解析到URL地址时，调用特定的资源加载器，如果不是特殊资源(js)，加载过程不会阻碍渲染过程 2. 一般来说css资源不会阻碍渲染过程，但是js资源在浏览器会阻碍渲染过程的进行，如果放在头部，渲染过程会暂停，造成“白屏”，但现代浏览器的优化已经做得很好了，所以当渲染被阻塞时，浏览器会开启新的线程继续渲染。 3. 渲染之前需要加载资源，渲染之后在DOM或者CSS变化后，重新进行布局计算和重渲染操作。 4. 功能基本相同，但所运行的操作系统不同，渲染机制有些差异 ## 内核架构 根据上面问题回答我们会发现，webkit仅仅包含渲染功能是不够的，因为它需要获取网络资源，支持不同的浏览器，支持不同的操作系统，同样还要包含调试工具。 <br> 所以我们应该给出一张更全的webkit架构图 <br> <br>  虚线框表示该部分模块在不同浏览器使用webkit的实现是不一样的，实线框是基本一致的。 ## Chromium架构(chrome的开源版本，激进的版本，平常用的chrome是稳定的版本) 基于webkit内核就可以构建浏览器应用，了解著名的chromium浏览器对我们的web开发也有很多启发。 1. 除去webkit内核完成的功能，浏览器的工作有哪些？ 2. 进程是什么？ 3. IPC是什么？ 4. 线程是什么？ 5. 线程同步是什么？ #### 现代浏览器的工作 * 资源管理： * 多页面管理：也就是多个标签页的管理 * 插件和拓展：如flash，chrome拓展程序 * 账户和同步 * 安全机制 * 多系统支持 #### 进程和线程 * 进程：操作系统对一个正在运行的程序的抽象。你可以查看进程占用CPU，内存的大小。 * 线程，组成进程的执行单位 * 进程通讯：进程间传输数据(交换信息) * 线程同步：  上图是IPC通讯(进程间的通讯)，总得来说，Chromium多进程架构为 * 父进程：Browser，负责管理整个浏览器的状态，运行UI，消息派发（如申请文件资源）。 * 子进程： * Render，负责渲染网页，于Webkit（Blink）交互，向外（Browser、GPU）发送请求。 * GPU，当GPU硬件加速时会打开 <br> #### 多进程架构的目的所在 1. 职责分离，故障范围小 2. 隔离性 3. 性能 <br>