面试官:从输入url到页面显示发生了什么?

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 面试官:从输入url到页面显示发生了什么?

目录


前言


之前查过这类题目,网上说的都比较深入,遇到真正面试除非考官继续问,没必要讲那么细致,简单回答如下即可。


url解析


解析出协议http或https+服务器地址+访问路径名,比如https://www.baidu.com/s就是https://+www.baidu.com+/s,根据这些信息生成http请求数据包。


DNS域名解析


对服务器地址进行DNS解析,从后至前,查询域名对应的真实ip地址。比如www.baidu.com:


根DNS服务器会告诉你.com是.com顶级域DNS服务器管理的->

(.com)顶级域DNS会告诉你baidu.com是由baidu.com权威DNS服务器管理的->

(baidu.com)权威DNS服务器会告诉你它对应的服务端ip是啥。

tcp三次握手


获取服务端ip,tcp三次握手,详见:TCP连接三次握手与四次挥手。


发送请求


连接后,客户端发送http请求报文,中间可能经过一些负载均衡与反向代理处理,最终发送到服务端(tomcat、nodejs等等),服务端处理完请求并返回响应报文。


浏览器解析渲染页面


解析dom树,遇到script会被阻塞,这也就是为什么非依赖js最好放在html末尾的原因。

解析css规则树。

根据dom树和css规则树生成渲染树(render树)。

根据渲染树计算节点信息布局,并绘制(后期还有重绘和回流的问题)。

解析js。


相关文章
|
21天前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
29 5
|
23天前
|
缓存 前端开发 JavaScript
输入URL到页面渲染的全过程
输入URL到页面渲染的全过程
25 1
|
27天前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
20天前
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
27 0
|
1月前
|
缓存 网络协议 JavaScript
面试常考题:输入url到页面渲染发生了什么?(前半段)
面试常考题:输入url到页面渲染发生了什么?(前半段)
|
1月前
|
JavaScript 前端开发 网络协议
面试常考题: 输入url到页面渲染发生了什么(后半段)
面试常考题: 输入url到页面渲染发生了什么(后半段)
|
3月前
|
缓存 网络协议 前端开发
【高频】从输入URL到页面展示到底发生了什么?
【高频】从输入URL到页面展示到底发生了什么?
|
3月前
|
Web App开发 移动开发 安全
如何做到修改 url 参数页面不刷新
如何做到修改 url 参数页面不刷新
|
4月前
|
缓存 网络协议 前端开发
URL输入到页面渲染过程详解
URL输入到页面渲染过程详解
33 1
|
4月前
|
JavaScript
js如何实现修改URL参数并不刷新页面
js如何实现修改URL参数并不刷新页面