从输入url到页面渲染的全过程+DNS解析

最新推荐文章于 2025-06-22 15:13:19 发布
原创 最新推荐文章于 2025-06-22 15:13:19 发布 · 294 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

全过程

  1. 输入url后，浏览器先查看浏览器缓存、本地缓存、路由缓存，若没有则进行下一步
  2. 进行域名解析（DNS），获取对应的ip地址
  3. 浏览器与服务器进行tcp三次握手
  4. 浏览器发送HTTP请求，请求数据包
  5. 服务器获取请求，将数据返回给浏览器
  6. 浏览器收到响应后读取解析HTML源码，生成DOM树，解析css,解析js
  7. 浏览器于服务器进行ajax查询

DNS解析

  1. 浏览器检查自身缓存、检查操作系统缓存
  2. 浏览器向本地服务器发起请求
  3. 本地服务器向根域名服务器发起请求，返回给本地服务器一个国际顶尖域名服务器的地址
  4. 本地服务器向国际顶尖域名服务器发起请求，返回给本地服务器一个具体的IP地址
  5. 本地服务器请求IP地址对应的服务器，返回数据给本地服务器
  6. 本地服务器将数据返回给用户
完整渲染过程——从URL到页面
cicistream
10-06 4916
当用户输入一串URL（统一资源定位符）到完整的页面渲染出来，到底经历了什么呢~下面我来描述一下整个过程。 先列出他的大致流程： 浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求； 服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）； 浏览器对加载到的数据进行解析，建立起相应的内部结构； 载入解析到的资源文件，渲染页面，完成。我们主要分为两部分...
深入解析：从URL到页面渲染的完整过程与性能优化【页面渲染、重排、重汇】
qq_22841387的博客
09-23 1764
从用户输入URL到页面最终渲染，整个过程涉及网络通信（DNS查询、TCP连接）、资源加载（HTML、CSS、JavaScript）、解析与执行（构建DOM、CSSOM、执行JavaScript）、渲染优化（布局、绘制、合成）。这一系列步骤的高效执行依赖于现代浏览器的渲染引擎和多种性能优化技术，以提供流畅的用户体验。优化网页性能的核心在于减少不必要的重排和重绘操作，尤其是在复杂的应用场景中，频繁的布局计算和绘制会显著影响用户体验。
从输入URL到页面渲染的整个过程 - 个人笔记
树上骑个猴的博客
05-15 4036
1、首先是URL地址解析 浏览器会判断输入的是一个合法的URL还是一个待搜索的关键词，并且根据输入的内容自动完成字符编码等操作 2、接着发起真正的URL请求，如果浏览器本地缓存了这个url请求所需的资源，则会直接将数据转发给浏览器进程，如果没有缓存，则会查询DNS域名解析，首先查找浏览器有没有DNS缓存（比如之前有访问记录），如果有则返回IP。如果没有就寻找本地的host文件，看看有没有域名记录，如果有则返回IP，如果本地host文件没有则直接向本地DNS服务器请求，如果还是没有，继续向上DNS服务器请求，
浏览器从输入url到渲染出页面的具体流程
最新发布
2401_82591622的博客
06-22 729
递归查询（若缓存未命中）： 本地 DNS 服务器 → 根域名服务器 → 顶级域（.com）服务器 → 权威域名服务器。理解这一过程有助于开发者优化性能（如减少 RTT 时间、避免渲染阻塞），并快速定位问题（如 DNS 失败、TCP 连接超时）。缓存策略：强缓存（Cache-Control）、协商缓存（ETag）。DNS 记录类型： A 记录（IPv4）、AAAA 记录（IPv6）、CNAME 记录（别名）。布局（Layout/Reflow）： 计算每个节点的位置和尺寸（如视口宽度、盒模型）。
浏览器从输入URL到页面渲染加载的过程（浏览器知识体系整理）
铁锤妹妹的博客
05-10 8096
记得最开始学前端知识时，是一点一点的积累，一个知识点一个知识点的攻克。 就这样，虽然在很长一段时间内积累了不少的知识，但是，总是无法将它串联到一起。每次梳理时都是很分散的，无法保持思路连贯性。
写给迷糊的你看的 浏览器从输入URL到页面渲染过程（呕心泣血 1.6w字）
鹤汀凫渚 的博客
03-01 2215
面试官再也难不倒我了
从输入url到页面渲染全过程
代码的魅力，根本走不出来
04-13 451
首先在本地 DNS缓存中查找是否已经有相应的 DNS 记录，如果没有，则向本地 DNS 服务器发起请求，如果本地 DNS 服务器也没有相应的 DNS记录，则向根 DNS 服务器发起请求，以此类推，直到找到对应的 IP 地址或者找不到。浏览器解析渲染页面 浏览器收到响应后，会对 HTML 进行解析，构建 DOM 树，对 CSS 进行解析，构建 CSSOM 树，接着将DOM 树和 CSSOM树组合成渲染树，最后进行渲染，得到最终的页面。网络层：主要负责数据的分组和路由选择等，以实现跨网络的数据传输和路由选择。
前端开发浏览器工作原理详解：从URL输入到页面渲染的全流程解析及常见面试题汇总浏览器的工作原理
06-08
从输入URL到页面呈现的过程涉及DNS解析、TCP连接建立、HTTP请求发送、服务器响应处理、浏览器解析渲染及TCP连接关闭等步骤。CSS不会阻塞DOM解析，但会阻塞DOM渲染。 适合人群：前端开发人员，尤其是准备面试或希望...
12-从URL到页面：探寻Web页面渲染的全过程
weixin_46002095的博客
06-03 751
从输入URL到页面完全渲染，背后涉及的步骤非常多，包括DNS解析、TCP连接的建立与终止、HTTP请求与响应处理、DOM和CSSOM树的构建、JavaScript的执行以及页面的布局和绘制。服务器可能需要查询数据库、执行后台脚本或访问其他服务，然后将响应数据（如HTML、CSS、JavaScript、图像等）发送回浏览器。在我们浏览网页时，从输入URL到最终页面呈现在浏览器上，这背后发生了一系列复杂的步骤。得到IP地址后，浏览器与服务器建立TCP连接，确保数据可以可靠传输。
从输入URL到页面渲染完成
远方
12-20 1483
​​​​​​​​​​​​​​从输入URL到页面渲染完成，这个过程可大致分为两个阶段：网络通信和页面渲染 网络通信： 互联网内各网络间设备的通信遵循TCP/IP协议，利用TCP/IP协议进行网络通信时，会通过分层与对方通信。数据传输的过程是：由应用层产生数据后，经过传输层的分段处理（添加TCP或UDP包头）、网络（添加IP地址信息）、数据链路层（封装成MAC帧）、物理层传输电信号。 1.输入url...
前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
LYFlied的博客
03-27 1700
一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。 将数据返回至浏览器 浏览器收到HTTP响应 读取页面内容，浏览器渲染，解析html源码 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
详解从输入url到页面渲染
sanlyshi's front-end road
12-26 1551
浏览器从输入 URL 到渲染出页面的过程涉及多个阶段，每个阶段都有其特定的任务和细节。DNS 解析的过程和缓存机制。HTTP 缓存的机制和头部字段。TCP 三次握手和 TLS 握手的过程。HTTP 请求和响应的结构和常见方法。DOM 树和 CSSOM 树的构建过程。JavaScript 的执行过程和阻塞渲染。渲染树的构建、布局和绘制过程。通过理解这些细节，可以更好地回答面试中的相关问题，并展示对浏览器工作原理的深入理解。DNS 解析是将域名转换为 IP 地址的过程。
输入 URL 到页面渲染的整个流程
小魔仙的成长之路
04-03 258
script src="script.js"> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。服务端收到连接请求报文段后，如果同意连接，则会发送一个应答。
一文摸透从输入URL到页面渲染的过程
web前端开发
08-26 866
来源 |https://www.cnblogs.com/AhuntSun-blog/p/12641050.html从输入URL到页面渲染需要Chrome浏览器的多个进程配合，所以我们先...
输入URL到渲染出整个页面的过程
01-31 2262
从输入URL到渲染出整个页面的过程包括三个部分： DNS解析URL > 浏览器发送请求与服务器交互 > 浏览器对接收到的html页面渲染 一、DNS解析URL的过程 DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆，一般会使用URL域名（如www.baidu.com）作为网址。DNS解析就是将域名翻译成IP地址的过程。 具体过程： 1）浏览器缓存：浏览器会按照一定的频率 缓存DNS记录 2）操作系统缓存：如果浏览器缓存中找不到需要的DNS记录，就会取操作系统中找 3）路
输入 url 到页面渲染完成的过程
小菜的博客
03-17 1782
用户从输入 url 到页面渲染完成, 之间发生了什么? url 解析 => dns 解析 => tcp 连接 => 反向代理 => http 连接 => 缓存 => html + css => render tree => 遍历可见节点, 根据规则, 计算位置, 大小 => 绘制 url 解析 输入 url , 会进行 url 的解析, 如果是 http 协议, 浏览器会新建一个网络请求线程去下载所需资源 DNS 解析: 将 host 字段转化为网络中具
从输入URL到渲染的过程中到底发生了什么？
loveX001的博客
10-04 1080
通过阅读本文，相信小伙伴们对从输入URL到页面渲染的过程有了一个大概的理解。其实整个过程是很复杂也比较繁琐的，不是一篇文章或者几张图就可以囊括的，在这有很多细节不便展开，有兴趣的小伙伴可以对这个过程中的一些细节深入研究研究哦！文章中肯定会有些说的不是很清楚的地方，恳请各位大佬不吝赐教，一起成长！
输入url到页面渲染经历的整个流程
qq_29494055的博客
03-02 1808
1.输入网站域名（www.baidu.com） 2.在本地host文件寻找是否存在此域名对应的ip地址，找不到则发起DNS请求获取IP地址 3.TCP三次握手，连接服务器 4.向服务器发送http请求，请求数据包 5.服务器获取请求，将数据返回给浏览器 6.浏览器根据返回的数据渲染页面 ...
【浏览器渲染-输入Url到页面渲染全流程】
weixin_44273311的博客
03-25 1283
【浏览器渲染-输入Url到页面渲染全流程】
URL回车后的全流程解析：从DNS到页面渲染
这个过程涵盖了从URL解析到页面渲染的多个阶段，每个阶段都有其独特的功能和作用。 首先，当我们输入URL并按下回车键时，浏览器首先会进行URL解析。它会检查输入的内容是否符合URL的标准格式，包括协议（如http或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值