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

简介: 面试官:从输入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。


相关文章
|
3月前
|
Web App开发 缓存 前端开发
【面试题】从输入 URL 到页面显示,这中间发生了什么?
【面试题】从输入 URL 到页面显示,这中间发生了什么?
|
7月前
|
移动开发 小程序
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
253 0
|
6月前
|
小程序 前端开发 PHP
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
|
17天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
4月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
Web App开发 缓存 网络协议
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
52 0
|
3月前
|
前端开发
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
24 0
|
3月前
|
缓存 网络协议 前端开发
面试题:浏览器中输入URL返回页面过程?
面试题:浏览器中输入URL返回页面过程?
90 0
|
8月前
|
域名解析 JavaScript 前端开发
从浏览器地址栏输入url到显示页面的步骤?
1.浏览器根据请求的 URL 交给 DNS 进行域名解析,找到真实 IP 地址,向服务器发起请求 2.服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、CSS、JS、images等); 3.浏览器对加载到的资源(HTML、CSS、JS、images等)进行语法解析,建立相应的内部数据结构(如HTML的DOM); 4.载入解析到的资源文件,渲染页面,完成。
159 0