前端面试必备——从输入URL到浏览器展示网页的过程

   日期:2024-11-04    作者:caijiyuan 移动:http://oml01z.riyuangf.com/mobile/quote/367.html

1、用户输入关键词,地址栏判断是搜索内容还是 url 地址

前端面试必备——从输入URL到浏览器展示网页的过程

  • 如果是搜索内容,会使用浏览器默认搜索引擎加上搜索内容合成url;
  • 如果是域名会加上协议(如 https)合成完整的 url。

2、然后按下回车。浏览器进程通过 IPC进程间通信把 url传给网络进程(网络进程接收到 url 才发起真正的网络请求)。

3、网络进程接收到 url 后先查找有没有缓存。(先检查强缓存,如果命中直接使用缓存资源,否则进入 DNS 解析)

  • 有缓存,直接返回缓存的资源。
  • 没有缓存。(进入真正的网络请求)。首先获取域名的 IP,系统会首先自动从 hosts 文件中寻找域名对应的 IP 地址,一旦找到,和服务器建立 TCP 连接;如果没有找到,则系统会将网址提交 DNS 域名解析服务器来进行 IP 地址的解析。

4、利用 IP 地址和服务器建立 TCP 连接(3 次握手)

5、建立连接后浏览器构建数据包(包含请求行,请求头,请求体,并把该域名相关 cookie 等数据附加到请求头),然后向服务器发送请求消息

注意:请求体只有在 方法下存在,常见的场景是表单提交

6、服务器接收到消息后根据请求信息构建响应数据(包括响应行,响应头,响应正文).应用层HTTP解析请求头和请求体

  • 如果需要重定向,返回HTTP响应数据的状态码301或者302,同时在请求头的Location字段中附上重定向地址,浏览器会根据code和Location进行重定向提作;
  • 如果不是重定向,首先服务器会根据请求头中的的值来判断请求的资源是否被更新,如果没有更新,就返回304状态码,告诉浏览器之前的缓存还可以使用,不需要返回新数据,否则,并且如果浏览器需要缓存数据的话,就在相应头中加入字段:
    响应数据又顺着应用层——传输层——网络层——网络层——传输层——应用层的顺序返回到网络进程

7、数据传输完成,TCP四次挥手断开连接。如果浏览器或者服务器在HTTP头部加上,TCP就一直保持连接,这样再次传输时不需重新建立连接,提高资源加载速度

8、网络进程接收到响应数据后进行解析,根据响应头中的来判断响应数据的类型,如果是,就将该请求交给下载管理器;如果是,就通知浏览器进程将获取的文档进行渲染

在渲染引擎内部有个 HTML解析器负责将 HTML 字节流转换为 DOM 结构,因为浏览器不能解析 HTML,故会先基于 HTML 编码转换为单个字符,通过分词器将字节流转换为 Token,每个 token 都有自己独特的含义和规则集;然后进行词法分析,将 token 转为对象,这些对象分别定义他们的属性和规则之后进行 DOM 构建。

  • 解析 HTML 构建 DOM 时,遇到Javascript 会被阻塞(当没有 async 和 defer 属性时)
  • Javascript 执行会被 CSSOM 构建阻塞,也就是说,Javascript 必须等到 CSSOM 构建完成后才会执


为了构建渲染树,浏览器主要完成了以下工作:

  • 从 DOM 树的根节点开始遍历每个可见节点
  • 对于每个可见的节点,找到 CSSOM 树中对应的规则,并应用它们
  • 根据每个可见节点以及其对应的样式,组合生成渲染树


第四步是在渲染树上运行布局以计算每个节点的几何体。

  • 渲染树会表示显示哪些节点以及其他样式,但是不表示每个节点的尺寸、位置等信息
  • 布局是确定呈现树中所有节点的宽度、高度和位置信息:
  • 注意:布局树只包含可见元素,对于 head 标签和设置了 display:none 的元素,将不会被放入其中。

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号