打卡笔记

课程名称：前端校招面试攻略，无惧层层考核，实现Offer零距离

课程章节：第11章 浏览器面试题

主讲老师：freemen

课程内容：

今天学习的内容包括：

从输入一个URL到页面展示整个过程中发生了什么?

课程收获：

具体过程： 

1. 当用户输入网页URL时，WebKit调用资源加载器加载该URL对应的网页

2. 加载器依赖网络建立连接，发送请求并接受答复。

3. WebKit接受到各种网页或者资源的链接，其中某些资源通过同步或者异步获取

4. 网页被交给 HTML解释器解释为一系列词语

5. 解释器根据词语构建节点（NODE），形成DOM树。

6. 如果节点是JavaScript代码就调用JavaScript引擎解释并执行

7. JavaScript代码可能会修改DOM树的结构

8. 如果节点需要依赖其他资源，例如图片，css ，视频等，调用资源

9. 加载器来加载他们但这个过程异步的，不会阻碍当前dom树的构建，如果是javascript

10. 资源url（没有标记异步，通过async和defer）则需要停止当前DOM树的创建

11. 直到js资源加载并执行完毕之后才会继续DOM树的创建

    
    

面试中遇到该题目我们该如何回答 ?

• 首先讲清楚主流程:

1. 其一是网页加载过程，就是从 URL到构建DOM树

2. 其二就是网页渲染过程，从DOM生成可视化图像

其次讲清楚渲染过程中包含的数据和模块

1. 数据: 网页内容,DOM, 内部表示和图像

2. 模块则包括: HTML 解释器,css 解释器,javascript引擎,布局和绘图模块

最后讲清楚页面渲染的三个阶段以及具体的步骤:

1. 第一个阶段就是从网页的URL到构建完DOM树

2. 第二个阶段是从DOM树到构建完WebKit的绘图上下文

3. 第三个阶段是从绘图上下文生成最终的图像