文章目录

  • 前言
  • 一、思考一下可能发生的步骤
  • 二、经历的两个阶段
    • （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三次握手连接：

找到了一个图，挺形象的。大概你可以理解成刘能和赵四在聊天：
刘能：“在吗？想去找你玩。”
赵四：“我在，快来啊！”
刘能：“好的，马上就到”

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.重绘和回流？

总结

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

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

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

  1. c++软件开发面试旋极面试题_经典软件开发面试题：浏览器中输入一个网址后发生了什么？...

    经典软件开发面试题:浏览器中输入一个网址后发生了什么? ​ 大家好, 这一期呢,我们来谈一个经典的面试题.这种题目是在浏览器中输入一个网址以后, 会显示一个网页,这期间到底发生了什么? 答案要求说的越 ...

  2. 当你在浏览器地址栏输入一个URL后回车，将会发生的事情？

    之前和前辈交流,他问了我这样一个问题,自己一时没有答上来,今天可以研究了一下,看到了一篇很不错的博客,转载过来,供大家学习. 原文地址:http://blog.csdn.net/libin_1/art ...

  3. 当你在浏览器地址栏输入一个URL后回车，浏览器做了什么？

    以下是一个大概流程: 1. 浏览器向DNS服务器查找输入URL对应的IP地址. 2. DNS服务器返回网站的IP地址. 3. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 4. 浏览 ...

  4. 当在浏览器地址栏输入一个URL后回车，将会发生的事情？

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  5. 在浏览器地址栏输入一个URL后回车，执行的全部过程

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  6. [IT]当你在浏览器地址栏输入一个URL后回车，将会发生的事情？

    原文:What really happens when you navigate to a URL 作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到 ...

  7. 头条面试官：在浏览器地址栏输入一个URL后回车，背后会进行哪些技术步骤？

    本题为头条校招测开经典面试题,如果你去看过头条面经合集,会发现3次面试里至少出现有1次,也是非常基础的一个知识点. 好了,不说废话. 先上答案,一共6个步骤: DNS解析 TCP连接 发送http请求 ...

  8. 在浏览器地址栏输入一个URL后回车，背后会进行哪些技术步骤？

    https://www.zhihu.com/question/34873227/answer/518086565

  9. 实时获取浏览器的地址栏的网页地址

    探讨一个问题,我想写一个exe,功能就是实时的获取浏览器地址栏的网页地址,有没有什么好的想法, 之前许多人说通过findwindows来获取浏览器的句柄,然后发消息获取浏览器地址栏编辑框的内容,但是这 ...

最新文章

  1. 【NOIP校内模拟】T2 华莱士（环套树）
  2. AI 与小学生的做题之战，孰胜孰败？
  3. 如何轻松搞定 CRUD 的创建人、修改人、时间等字段的赋值
  4. pandas describe函数_SQL和Pandas同时掉到河里，你先救谁？
  5. 三招武林绝学带你玩转「强化学习」
  6. Hive中JOIN的使用入门
  7. 【转】2.2【MySQL】运行原理（二）：InnoDB 内存结构、磁盘结构及update sql执行过程分析
  8. CF1045G AI robots（动态开点线段树）
  9. 博士导师总结目标检测、卷积神经网络和OpenCV学习资料（教程/PPT/代码）
  10. 微信公众平台消息接口开发（34）微信墙之表白墙/婚礼墙/晚会墙/会议墙/晒单墙/照片墙/历史墙...
  11. 人工智能实战2019 - 第4次作业（团队后期项目）- 就起这个名字吧
  12. Mockplus组件样式库一键解决风格复用
  13. svn忽略不需要同步的文件夹_配置管理-SVN使用指南 - wuli潇潇
  14. I2P和TOR 有趣网络精灵
  15. MYSQL(老杜数据库笔记)
  16. pointnet个人理解与实践
  17. Unity3D里实现可以朝向另一目标广告牌（billboard）效果
  18. JS高级---原型链（一看就懂，但18岁以下请绕道）
  19. jQuery的下载和使用
  20. 自学Python问题记录3：only size-1 arrays can be converted to Python scalars

热门文章

  1. DELL 服务器修改风扇转速
  2. 全屋定制小程序开发，帮助建材行业落地数字化转型
  3. python解压zip文件
  4. 计算机 锁定 无法安装,笔记本win7系统不能安装360安全卫士如何解决
  5. touchgfx程序_6.TouchGFX界面应用之定时器机制
  6. 精品课 - Python 数据分析
  7. 洛谷P7072 直播获奖
  8. 如何申请电子邮件邮箱账号？邮件系统服务器哪个稳定？
  9. 武汉新时标文化传媒有限公司橱窗和抖音小店的差别非常大
  10. 山丽防水墙数据防泄漏系统