前端经典面试题：从输入URL到页面展示的完整流程

最新推荐文章于 2023-08-03 17:00:43 发布
最新推荐文章于 2023-08-03 17:00:43 发布
阅读量219 收藏
点赞数
分类专栏： http请求 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qdxbwz/article/details/112879225
版权

面试 http

学习极客时间-李兵老师《浏览器工作原理与实践》总结而得：
如果你觉得有帮助的话，请多多点赞~ ღ( ´･ᴗ･` )比心
从输入URL到页面展示的完整流程

面试官：从浏览器输入URL到页面展示出来，中间发生了什么？
小识的博客
09-08 3460
前言 这应该算是一个很经典的面试题了，前端工程师，后端工程师，包括网络工程师都有可能被问到。开放度很高，每个人都可以针对自己熟悉的部分，进行深入的讲解。 总体来说，分为如下几个部分 1.DNS解析 2.建立TCP连接，发送HTTP请求 3.服务端处理请求并返回HTTP响应 4.浏览器解析渲染页面 5.关闭连接 DNS解析 DNS解析就是获取服务器IP地址的过程。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，例如www.baid.
前端面试的话术集锦第 20 篇博文——高频考点（输入 URL 到页面渲染的整个流程）
最新发布
念兮为美
09-22 438
DNS的作用是通过域名查询到具体的IP。TCP协议会指明两端的端口号，再下发给网络层。TCP握手结束后会进行TLS握手，开始正式的传输数据。首先浏览器会判断状态码是什么，再做出响应的操作。浏览器开始解析文件，如果是gzip格式会先解压，再通过文件的编码格式去解码文件。文件解码成功后会正式开始渲染流程。若无DOM和CSSOM树等，就会阻塞住渲染流程直到JS执行完毕。CSSOM树和DOM树构建完成后会开始生成Render树。在生成Render树的过程中，浏览器就开始调用GPU绘制，合成图层，将内容显示在屏幕上。
从输入url到浏览器展示页面的过程(经典前端面试题)
qingsemengshou的博客
08-05 211
输入url，首先会进行 dns查询 解析域名获取ip地址 优化策略:使用dnf-prefech属性，进行dns预查询 tcp连接 浏览器发送tcp连接的申请的报文，会携带SYN标志位，seq序号，SYN标志位设为1就说明这是一个申请连接的报文，之后服务器回复ACK标志位，ack序号=seq+1，这样浏览器就可以通过检验ack序号的值判断连接是否成功，ACK标志位为1说明这就是一个确认报文，之后服务器发送申请连接的报文，按理说应该是浏览器向服务器端申请连接，服务器回复确认，然后服务器向浏览器申请连接
从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！
qq_14855277的博客
03-16 2109
对知识体系进行一次预评级看到这道题目，不借助搜索引擎，自己的心里是否有一个答案？这里，以目前的经验（了解过一些处于不同阶段的相关前端人员的情况），大概有以下几种情况：（以下都是以点见面，实际上不同阶段人员一般都会有其它的隐藏知识点的）level1:完全没什么概念的，支支吾吾的回答，一般就是这种水平（大致形象点描述）：浏览器发起请求，服务端返回数据，然后前端解析成网页，执行脚本。。。这类人员一般都是：
从浏览器输入url到显示页面的过程 (前端面试题)
weixin_30908707的博客
05-17 303
域名DNS解析,解析到真正的IP地址 　 　| 客户端与服务端建立TCP连接，3次握手 | 客户端发送Http请求 | server接收到http请求，处理，并返回 | 客户端接收到返回数据，处理数据（渲染页面，执行js） ...
从输入URL到页面加载的过程
yuanyuanispeak的专栏
04-27 657
大纲对知识体系进行一次预评级为什么说知识体系如此重要？梳理主干流程从浏览器接收url到开启网络请求线程多进程的浏览器多线程的浏览器内核解析URL网络请求都是单独的线程更多开启网络线程到发出一个完整的http请求DNS查询得到IPtcp/ip请求五层因特网协议栈从服务器接收到请求到对应后台接收到请求负载均衡后台的处理后台和前台的http交互http报文结构cookie以及优化gzip压缩长连接与短连...
前端学习（1834）：前端面试题之从url里面输入网址
歌谣的博客
08-02 207
2025高频前端面试题（含答案）
热门推荐
weixin_44672169的博客
04-22 24万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
从输入URL到页面展示，这中间发生了什么？
鸭绒的博客
05-22 560
文章目录1. 开篇小结2. 从输入URL到页面展示2.1 用户输入 1. 开篇小结 “在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，其中涉及到了网络、操作系统、Web 等一系列的知识。 今天我们就一起来探索下这个流程，下图是我梳理出的“从输入 URL 到页面展示完整流程示意图”： 从图中可以看出，整个过程需要各个进程之间的配合，所以在开始正式流程之前，我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。 浏览器进程主要负责用户交互、子进程管理和文件储存等
前端性能优化：从面试题到实战策略
首先，作者提出了一道经典的面试问题：“从输入URL到页面加载完成，发生了什么？”这个问题引导读者思考整个页面加载过程，包括DNS解析、TCP连接、HTTP请求、服务器响应以及浏览器渲染等步骤。作者强调，理解这个...
ofd.js:OFD板式文件html渲染方案及组件
04-12
ofd.js 在使用ofd.js前请务必悉知 目前方案采用：svg及canvas渲染实现，百分百纯前端渲染 效果： Usage with npm npm i ofd.js import {parseOfdDocument, renderOfd} from "ofd.js"; 其中ofd传入的file支持本地文件、二进制或者url、screenWidth为屏幕宽度 parseOfdDocument({ ofd: file, success(res) { //输出ofd每页的div const divs = renderOfd(screenWidth, res); //获取签章div的信息, 具体看demo for(let ele of document.getElementsBy
输入url到页面展示的过程
nightwishh的博客
10-18 527
多次看到这个问题，在此做个记录加深理解并说说自己的想法。 首先关于大致的过程自己画了张草图步骤分123步执行。 步骤分析： 1.关于url地址 一般我们输入的url地址可能会有三种形式 http://121.199.63.22:80 http://121.199.63.22 http://heyaniu.club 第一种：ip地址+端口号 第二种：ip地址 第三种：域名 第一种形式浏览器就可...
从输入URL到页面显示的过程
weixin_33786077的博客
04-01 249
http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html http://www.jianshu.com/p/d9361badf49...
输入url到生成页面的流程
weixin_43995328的博客
01-06 284
输入url到生成页面的流程 输入网址 网址经过DNS解析得到服务器地址 浏览器向服务器发起HTTP请求 经过TCP 3次握手确认链接 - TCP三次握手 1.第一次握手：建立链接，客户端发送syn包（syn=j）到服务器，并进入SYN_SEND状态，等待服务器确认。 （浏览器说：嘿，在嘛，服务器） 2.第二次握手：服务器syn包，必须确认客户的SYN(ack=j+1），同时也给自己发送一个SY...
前端知识点总结（一）：从输入URL到页面展示的详细过程
John_jian_yo的博客
06-08 590
这里只是简单地概括一下大致流程： 输入网址 DNS解析 建立tcp连接 客户端发送HTPP请求 服务器处理请求　 服务器响应请求 浏览器展示HTML 浏览器发送请求获取其他在HTML中的资源。 1、输入地址 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。 2、浏览器查找域名的 IP 地址　　 请求一旦发起，浏览器首先要做的事情就是解析这...
从输入url到页面显示的全过程
Mqyyy的博客
08-03 1426
4）第四次挥手：客户端接收到申请释放连接的报文后，再向服务器发送一个确认报文，等待服务器收到确认报文，服务器收到确认报文，就会进入关闭状态。如果返回的响应报文的状态为3xx，就需要重定向到其他URL，然后从头开始，然后网络线程会通过safeBrowsing来检查站点是不是恶意站点，如果是，就展示警告页面。1、首先，在输入的过程中，浏览器的UI线程会实时捕捉输入的内容，如果输入的不是网址或者协议不合法的话，那么搜索引擎会合成新的带搜索关键字的URL，准备进行搜索。然后进行布局和绘制，最终将页面呈现在屏幕上。
前端经典面试题: 从输入URL到页面加载发生了什么
weixin_59684494的博客
12-08 762
从输入URL到页面加载发生了什么 最近在进行前端面试方面的一些准备，看了网上许多相关的文章，发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题，发现确实很深，这个过程涉及到的东西很多。这个问题的回答真的能够很好的考验一个web工程师的水平，于是我自问自答一番。 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 具体过程 DNS解析 DNS解
超 深度解析浏览器中输入 URL 后发生了什么
weixin_43964148的博客
01-17 268
先上张简单分析的图：思维导图1. DNS 域名解析第一步，浏览器会检查缓存中有没有这个域名对应的解析过的 IP 地址，如果有，解析结束。浏览器中的缓存有时间空间限制。查找操作系统的缓存中...
从输入URL到页面加载完成的过程
weixin_30405421的博客
09-26 100
1）把URL分割成几个部分：协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；协议是从该计算机获取资源的方式，常见的是HTTP、FTP，不同协议有不同的通讯内容格式；资源路径指示从服务器上获取哪一项资源。例如：http://www.guokr.com/question/554991/协议部分：http网络地址：www.guokr.com资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值