【前端高频面试题】 浏览器地址栏输入网页地址后发生了什么?

文章目录

  • 前言
  • 一、思考一下可能发生的步骤
  • 二、经历的两个阶段
    • (1)网络阶段
        • 1. DNS服务器域名解析
        • 2. 建立TCP连接
        • 3. 发送http请求
        • 4.服务器处理请求并返回响应结果
        • 5.关闭TCP连接
    • (2)浏览器加载阶段
        • 6.浏览器解析HTML
        • 7.JS的加载
  • 随堂小练习
  • 总结


前言

最近看了很多分享前端面试题的帖子,发现这道题出现的频率特别高。但是贴子里的答案很精简,很多点都是一笔带过,没有很详细的解释,前几天我专门搜了很多相关的资料,今天整理出来,希望能够对大家有所帮助!
来吧 展示


一、思考一下可能发生的步骤

在直接查看答案之前,我们可以先自己思考一下,想象一下浏览器可能需要那些步骤。
我们在浏览器地址栏输入网址,然后打开对应的页面,其实就是想让浏览器向服务器请求这个页面的资源,然后浏览器拿到资源后加载渲染;所以发生的步骤包括了两个阶段:网络阶段浏览器加载阶段

二、经历的两个阶段

(1)网络阶段

1. DNS服务器域名解析

我们想要向服务器请求页面的相关资源,第一步肯定是需要知道服务器地址在哪里,这一步就是由DNS服务器来完成的,它可以将我们输入的域名解析成对应服务器的ip地址。
输入网址后,浏览器会根据本地客户端DNS服务器配置,向DNS服务器获取域名对应的IP地址。

插入一个知识点,注意一会要考
DNS查找过程为:
浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索
递归搜索过程为:从根域名服务器到顶级域名服务器到所查询的域名服务器。

2. 建立TCP连接

在浏览器获取到服务器ip地址之后,就需要向他发送http请求获取资源了,但是 HTTP请求是一个基于TCP协议之上的应用层协议——超文本传输协议,因此浏览器通过DNS获取到web服务器的IP地址后,需要向Web服务器发起TCP连接请求,通过TCP三次握手建立好连接后,浏览器便可以将HTTP请求数据通过发送给服务器了。
TCP三次握手连接:
【前端高频面试题】 浏览器地址栏输入网页地址后发生了什么?_第1张图片
找到了一个图,挺形象的。大概你可以理解成刘能和赵四在聊天:
刘能:“在吗?想去找你玩。”
赵四:“我在,快来啊!”
刘能:“好的,马上就到”

3. 发送http请求

请求的内容包括:

请求行
请求头
请求主体

4.服务器处理请求并返回响应结果

当服务器接收到浏览器的请求之后,就会进行逻辑操作,处理完成之后返回一个HTTP响应消息,包括:

状态行
响应头
响应正文

5.关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求。
和建立TCP连接的三次握手差不多,关闭需要四次握手。大概流程是这个样子:

客户端:“兄弟,我这边没数据要传了,咱关闭连接吧。” – FIN + seq
服务端:“收到,我看看我这边有木有数据了。” – ACK + seq + ack
服务端:“兄弟,我这边也没数据要传你了,咱可以关闭连接了。” - FIN + ACK + seq + ack
客户端:“好嘞。” – ACK + seq + ack

(2)浏览器加载阶段

6.浏览器解析HTML

这个过程又可以细分为以下几个步骤:
1.构建DOM树
2.构建css树。
可以理解为样式树,也是树形结构,类似于DOM树。css的渲染和HTML的渲染是同步进行的,所以样式加载的越快越好,所以一般css放在页面顶部
3.构建Render tree。
浏览器遍历dom树,从根节点开始逐个遍历,对每个可见节点找到适配的样式规则并加以应用。这个过程包括了两个步骤,样式计算和样式覆盖。
4.布局。
创建完渲染树后,下一步就是布局,又称回流,这个过程就是通过渲染树中各个渲染对象的信息,计算出每一个渲染对象的位置和尺寸,将其放置在浏览器中对应的位置。有时候会进行一些dom操作,这个时候就可能需要重新进行布局,称为回流,本质上还是一个布局的过程。
5.绘制。

知识点:重绘和回流会在我们设置节点样式时频繁出现,同时也会很大程度上影响性能。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

【高频面试题】:回流和重绘的区别?

重绘:元素样式的改变(但宽高、大小、位置等不变)
如:outline、visibility、color、background-color等
只改变自身样式,不会影响到其他元素
回流:元素的大小或者位置发生改变(当页面布局和几何信息发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染,如添加或删除可见的DOM元素;元素的位置发生变化;元素的尺寸发生变化、内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替);页面一开始渲染的时候(无法避免);因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流。
总结回流必定会发生重绘,重绘不一定会引发回流。

7.JS的加载

这个环节又可以细分为以下几个步骤:
1.创建window对象。
2.加载文件
3.预编译
4.解释执行

随堂小练习

高频面试题:
1.DNS解析可以做哪些优化?
2.前端页面首屏加载可以做的优化有哪里?
3.谈谈你对前端性能优化的理解?
4.重绘和回流?


总结

写了大半天,费老鼻子劲终于整理完了,激动…

看到这里你应该对打开页面时,浏览器的整个工作流程很熟悉了,希望能对你有所帮助。如果还有什么不理解的欢迎给我留言或者私信,接下来的一段时间我会每天更新一些学习心得和一些算法题,欢迎关注,我们一起交流,共同学习。

你可能感兴趣的:(面试题,前端,http,网络)