从输入 URL 到页面加载的全过程

最新推荐文章于 2024-04-23 11:13:27 发布
最新推荐文章于 2024-04-23 11:13:27 发布
阅读量2k 收藏 6
点赞数 2
文章标签： 前端 http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43569680/article/details/123805222
版权

从输入 URL 到页面加载的全过程

  • 缓存解析
  • DNS解析
  • TCP连接
  • 浏览器发送HTTP请求
  • 服务器处理请求并返回HTTP报文
  • 浏览器解析渲染页面
  • TCP断开连接

具体过程

缓存解析
  • 先去缓存里面找资源，如果缓存里面有资源直接在缓存里面拿就好
  • 缓存资源寻找路线：浏览器缓存（离线缓存、内存缓存、硬盘缓存）-> 各种中间代理服务器的缓存（如：CDN缓存）
DNS解析

  • DNS(Domain Name System, 域名系统)，是域名和IP地址相互映射的一个分布式数据库

  • DNS 解析就是从域名映射到IP地址的过程

  • 如果有些网站已经访问过了，下次访问时浏览器会依次从浏览器缓存、系统缓存、路由器缓存、ISP缓存、根域名服务器、顶级域名服务器、主域名服务器里面找IP地址，所以下次访问速度更快

  • 有些HTTP网页会自动做DNS预解析，就是提前解析之后可能会用到的域名，并将解析结果缓存到系统缓存中，缩短DNS解析时间，提高网站的访问速度（<meta>或<link>标签进行控制）

  • 预解析分类

    • 隐式 DNS 预解析：对页面中存在异域的链接或资源进行预加载
      （1）HTTP 网页
      会自动预解析<img>（外域图片）、<script>（外域JS代码）、<link>（外域CSS代码、HTML代码）、<a>（外域链接），如需关闭：<meta http-equiv="x-dns-prefetch-control" content="off">
      （2）HTTPS 网页
      不会自动预解析：处于安全考虑——防止窃听者根据 DNS 预解析推断显示在HTTPS页面中超链接的主机名，如需开启：<meta http-equiv="x-dns-prefetch-control" content="off">

      显式 DNS 预解析：对页面中没有出现的域进行预加载，一般是在 <link> 标签的 rel 属性中进行设置，在文档顶部的 <head>标签中加入以下内容：<link rel="dns-prefetch" href="//img.alicdn.com">

  • 预连接 rel="preconnect"
    与 DNS 预解析类似，Preconnect 不仅完成 DNS 预解析，同时还将进行 TCP 握手和建立传输层协议
    <link rel="preconnect" href="http://example.com">

  • 预获取 rel="prefetch"
    如果我们确定某个资源（图片/脚本文件/css文件）将来一定会被使用到，我们可以让浏览器预先请求该资源并放入浏览器缓存中。与 DNS 预解析不同，预获取真正请求并下载了资源，并储存在缓存中
    <l

最低0.47元/天 解锁文章
努力不熬夜的小喵
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端学习之浏览器从输入URL到页面加载的全过程
CathyleeQ的博客
03-08 9262
浏览器从输入URL到页面加载的全过程 从输入URL到页面加载的主干流程如下： 1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL的DNS缓存记录。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接（三次握手）。 5、HTTP发起请求。 6、服务器处理请求，浏览器接收HTTP响应。 7、渲染页面，构建DOM树。 8、关闭TCP连接（四次挥手）。 1.首先在浏览器中输入URL 我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名
【浏览器系列】从输入网址（URL）到页面加载的全过程
pakerder的博客
10-14 4457
1.首先在浏览器中输入URL 2.缓存解析： 3.DNS域名解析： 4.建立TCP连接： 5.发起HTTP请求： 6.服务器响应请求并返回结果： 7.关闭TCP连接： 8.浏览器渲染： 9.JS引擎解析过程：
从 URL 输入到页面展现的全过程
最新发布
m0_64389737的博客
04-23 1519
如果输入的是合法的URL，说明我们希望通过URL查找到对应服务器上的资源，实质就是查找该域名对应的IP的一个映射关系。在有效期内缓存的资源可以被直接使用。 或者 前者从内存取，后者从磁盘取。通常来说：刷新页面会使用内存缓存，关闭后重新打开会使用磁盘缓存。chrome有个机制，同一域名最多支持建立六个 TCP 连接，如果超过这个数量的连接就必须进入排队等待状态。通过 TCP 三次握手与服务器建立连接，进行数据传输。先看是否命中协商缓存然后接收对应响应报文服务器首选返回相应行、包括协议版本和 状态码，然后会返回
从输入网址（URL）到页面加载的全过程
weixin_42367460的博客
03-21 2506
1. 当浏览器输入一个url后，首先要在客户端上进行url解析， 2. 缓存检查 3. 在DNS服务器上进行DNS解析， 4. 建立tcp连接通道后浏览器向服务器发送http请求， 5. 服务器把结果返回给浏览器，返回要关闭tcp连接通道， 6. 然后在浏览器上把获取的结果进行渲染。 7. 浏览器内核拿到相应内容后，渲染开始， 8. 解析html,css分别建立DOM Tree和CSSOM Tree， 9. 随后这两个合并成Render Tree。 10. 然后布局Render Tree
在浏览器从输入URL到页面加载完成都经历了什么/一个完整的URL解析过程详细介绍
snowball的博客
05-12 2423
如果本地没有缓存该域名的IP地址，就需要通过递归或迭代的方式向根域名服务器、顶级域名服务器、权威域名服务器发起查询请求，直至返回一个IP地址给浏览器。IP地址就像是一个街道，让你直到具体在哪个街道（哪个主机），端口号就像是门牌号，告诉你是哪家（哪个进程）如果浏览器没有缓存，电脑会查看本地操作系统的缓存，如果有记录，直接返回结果（host文件）浏览器会首先查看自身的缓存，如果浏览器缓存中有对应的解析记录，直接返回结果。协议是从该计算机获取资源的方式，常见的是HTTP，HTTPS，FTP等。
当我们在浏览器输入url到页面加载完成都发生了哪些过程
2301_76776023的博客
07-04 501
一.URL解析 URL:统一资源定位符。用于定位和标识互联网上的资源，如页面，图片，视频等。 它由几个部分构成： 1.协议： 在网络上进行通讯和数据交换的约定和规则，例如http，https，ftp等。 协议定义了数据的格式，传输方式，错误检测和纠正等方面的规范，以确保不同设备和系统之间能够相互理解和进行有效的通信。 A.数据格式： （1）数据类型：例
Web页面处理的过程.rar
07-02
Web页面处理的过程是一个复杂而有序的系列步骤，它涉及到用户在浏览器中输入URL到最终页面显示的全过程。这个过程可以大致分为以下几个关键阶段： 1. 用户请求：当用户在浏览器中键入URL并按下回车时，这个请求会被...
【JavaScript源代码】node.js利用express自动搭建项目的全过程.docx
12-29
【JavaScript源代码】Node.js利用Express自动搭建项目的全过程 在Node.js开发中，Express是一个非常流行的Web应用框架，它简化了构建服务器端应用程序的过程。本教程将指导你如何使用Express来快速搭建一个项目。 ...
E良师益友全站视频下载器
12-17
这通常涉及到网络爬虫技术，通过对网页源码的深入分析，找到隐藏在页面背后的视频链接。同时，由于现代许多网站的视频流是动态加载的，下载器可能还需要支持对AJAX请求的处理，以获取到实时更新的内容。 在实际使用...
金鹰asp超速入门视频教程-101.加载ASP页面.rar
07-09
加载ASP页面.rar"资源中，"jy101.swf"可能是课程的视频章节，通过观看可以直观地学习ASP页面的加载过程。"下载说明.txt"可能包含课程的学习指南和注意事项，而"A5下载- 更全的站长资源平台.url"是一个网址链接，可能...
网页整个页面截图工具
08-12
这种工具通常具有简洁的操作界面，用户只需要输入网页URL或者复制粘贴，然后一键保存截图，就能得到一张包含了网页所有内容的图片。 在描述中提到的“操作简单”，意味着该工具设计人性化，对技术背景不强的用户也...
输入一个url到浏览器页面展示都经历了哪些过程
热门推荐
马优晨
07-19 2万+
在日常的浏览器访问过程中，我们肯定会访问n多页面，但是我们输入一个网址后是如何变成一个页面展示在我们目前，从一个url到页面的展示这个过程中，我们的浏览器都经历了一些什么？ 步骤 → 1- 输入网址 → 2- 缓存解析 → 3- 域名解析 → 4- tcp连接，三次握手 → 6- 页面渲染 一：输入网址 那肯定是输入你要访问的网站网...
从输入URL到页面加载的过程
MichaelAn的博客
02-13 363
从输入URL到页面加载的过程 从输入URL到页面加载的过程 对知识体系进行一次预评级 看到这道题目，不借助搜索引擎，自己的心里是否有一个答案？ 这里，以目前的经验(了解过一些处于不同阶段的相关前端人员的情况)，大概有以下几种情况：(以下都是以点见面，实际上不同阶段人员一般都会有其它的隐藏知识点的) level1...
从输入URL到网页呈现的过程
01-31 2237
博客主页：🏆看看是李XX还是李歘歘🏆 🌺每天分享一些包括但不限于计算机基础、算法等相关的知识点🌺 💗点关注不迷路，总有一些📖知识点📖是你想要的💗 ⛽️今天的内容是 从输入URL到网页呈现的过程，包括DNS解析、三次握手、四次挥手等，⛽️💻💻💻 ​ ​从输入URL到网页呈现的过程大致如下： DNS解析 建立tcp连接 客户端发送HTPP请求 服务器处理请求 服务器响应请求 浏览器展示HTML 浏览器发送请求获取其他在HTML中的资源。 用户单击鼠标后所发生的事件按...
浏览器之URL加载
小栗子的博客
03-10 302
一个页面从输入URL到加载显示完成，发生了什么？1. 前言2. 大致流程 1. 前言 每次发博客之前都总先说点废话，哈哈哈！！！ 一直对这个问题有所耳闻，但也没有真正的深究过，今年打算换个工作，在准备面试的过程中再次遇见这个问题（哈哈哈，毕竟是经久不衰的经典面试题），这次深入的了解一下，一方面为了面试，一方面也是借这个机会扩展一下自己的知识。 有不足指出希望大家指出。 2. 大致流程 在浏览器地址栏输入URL并按下回车； ...
预加载是什么？懒加载是什么？以及两者之间的区别
qq_48959471的博客
05-15 6452
什么是预加载？ 什么是懒加载？ 预加载和懒加载的区别是什么呢？
H5预加载的实现
pouloghost的专栏
08-01 6325
预加载说小了就是个提前load，说大了，就是HybridApp的最基础功能。 Html5官方有个prefetch的attribute，用来做页面间的prefetch。其实在native跳h5容器的过程中更需要这种流程，否则很容易导致体验劣化。 其实方案蛮多的： 直接下载url + WebView#loadDataWithBaseURL 优点是简单，缺点就是只能预加载下个页面的html内容，这样
预加载和懒加载（延迟加载）
qq_34758991的博客
03-31 4157
一、预加载 前面做了个招聘页面，里面有大量的图片需要加载。 一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。 微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。这显然是无法忍受的，马上就加了预加载的功能，我只是简单的使用了一下。 预加载就是通过Image对象，给这个对象添加“src”属性，并可以将此对象缓
一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
Bao82527的博客
05-10 2013
一般会经历以下几个过程： 1、首先，在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。 5、握手成功后，浏览器向服务器发送http请求，请求...
浏览器从输入url到页面加载的全过程
04-06
1. DNS解析：浏览器会首先查询DNS服务器，将网址转换为IP地址。 ... 3. 发送HTTP请求：浏览器...在此过程中，还有一些其他的优化技术，如缓存机制、预加载、DNS预解析、HTTP请求合并等，可以提高页面加载速度和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力不熬夜的小喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值