浏览器内核渲染引擎工作流程

浏览器解析流程

1、加载

• 资源加载器开启http线程，获取html页面。
• 获取页面之后，交由html解释器解析称dom节点，并构建成dom树。
• 在构建dom树的时候，如果遇到script标签，则调用javascript引擎进行解析。
• 在构建dom树的时候，如果遇到css，图片，音频，则调用资源加载器进行资源的下载
• 注：这里面script文件的下载是阻塞dom树生成的，而css，图片，音频文件的下载是和dom树的创建并行的。

2、渲染

• css文件下载之后，调用css解释器解释css文件，并依赖dom树生成renderObject树*
• renderObject树再根据网页的层次结构，构建renderLayer树和绘图上下文
• 最后由绘图上下文绘制最终的图像。

用户输入www.baidu.com过程

• 根据url进行缓存查找IP地址，如果缓存没有，寻找DNS服务器。最终找到url对应的IP地址。
• 调用资源管理器，开启http线程，http GET baidu的网页。传输层三次握手。
• 获取网页之后，交友html解释器解析成DOM树
• 遇到了css资源和图片资源，异步下载
• 遇到script标签，阻塞下载并解析
• 发现js代码改变了dom结构，引起dom树的改变
• dom树构建完毕，开始调用css解析器解析css文件，生成renderobject树
• 根据层次结构生成renderlayer树和绘图上下文。
• 根据绘图上下文调用操作系统的绘制工具绘制网页。