关于前端:十五张图带你彻底搞懂从URL到页面展示发生的故事

3次阅读

共计 704 个字符,预计需要花费 2 分钟才能阅读完成。

关注公众号“执鸢者 ”,获取大量教学视频并进入 业余交换群

某一天小林去面试,面试官说问你一道经典面试题吧,从“输出一个 URL 到页面展现两头产生了什么?”,小林一听冲动了,心里暗自快乐说这道题我背过呀,而后哗啦哗啦开启了背书模式。背完之后面试官不是很称心,思路并不是很清晰呀!!!(纯属集体杜撰的小故事,切勿当真。)

上面就让咱们来唠一唠这个小问题,有不精确的中央还望各位大佬斧正。对于这个问题将从 浏览器蕴含的过程 着手,而后用用一张图来展现 整体流程 ,最初别离从 导航阶段 渲染阶段 两个方面具体论述从输出一个 URL 到页面展现两头产生的过程。

一、浏览器过程

在聊上述话题之前要意识到目前浏览器处在多过程时代,蕴含 浏览器过程、渲染过程、GPU 过程、网络过程、插件过程

二、整体流程

用一张图来示意整个流程,整个流程蕴含 导航阶段 渲染阶段 两大部分,其中每个具体细节所须要的过程如下图所示。

三、导航阶段

导航阶段次要蕴含 用户输出、URL 申请、筹备渲染过程、提交文档 四个局部

3.1 用户输出

3.2 URL 申请过程

3.3 筹备渲染过程

3.4 提交文档

四、渲染阶段

当文档数据传输实现后将进入渲染阶段,渲染阶段次要蕴含 构建 DOM 树、款式计算、布局阶段、分层、图层绘制、分块、栅格化操作、合成和显示。其整个渲染阶段流程如下图所示。

4.1 构建 DOM 树

4.2 款式计算

4.3 布局阶段

4.4 分层

4.5 图层绘制

4.6 分块

4.7 栅格化操作

4.8 合成和显示

参考内容 浏览器工作原理与实际_李兵

相干章节
图解 23 种设计模式
40 张图入门 Linux

欢送大家关注公众号(回复“操作系统”获取本节的思维导图, 回复“书籍”获取大量前端学习材料, 回复“前端视频”获取大量前端教学视频)

正文完
 0