浏览器渲染 详解

一次完整的请求过程

从输入 URL 到页面加载完成发生了什么事

1> DNS解析

2> TCP连接

3> 发送 HTTP请求

4> 服务器处理请求并返回 HTTP报文

5> 浏览器解析渲染页面

浏览器应该有的功能 : 网络，资源管理，网页浏览，多页面管理，插件与管理，账户和同步，安全机制，开发者工具

浏览器的主要功能总结起来就是一句话 : 将用户输入的url转变成可视化的图像

浏览器的内核(渲染引擎) : 在浏览器中有一个最重要的模块，它主要的作用是将页面转变为可视化的图像结果。这个模块就是浏览器内核，通常它也被称为渲染引擎

IE --> Trident

Safari --> WebKit

Chrome;Opera --> Blink

Firefox --> Gecko

一个渲染引擎主要包括 : HTML解析器，CSS解析器，布局layout模块，javascript引擎，绘图模块

渲染过程

1> 网页URL到构建DOM树的整个过程

    <1> 当用户输入URL的时候，Webkit调用资源加载器加载URL对应的网页

    <2> 加载器依赖网络模块建立连接，发送请求并接收答复

    <3> Webkit接收到各种网页或者资源的数据，其中某些资源可能是同步的或异步获取的

注 : 渲染引擎会自上而下解析HTML文档

    <4> 网页被交给HTML解析器转变一系列的词语 (Token)

    <5> 解析器根据词语构建节点 (node)，形成DOM树

注 : 渲染引擎会将 DOM树 和 CSS树结合生成渲染树

    <6> 如果节点需要依赖于其他资源，例如 js、css、图片、视频等，会调用资源加载器来加载他们，这些操作都是异步的，不会阻碍dom树的继续创建、顺序执行、并发加载

            如果资源是 CSS的话，调用 CSS解析器解释将CSS解释成内部表示结构(CSSDOM)

注 : 在