前端学习-浏览器从输入URL到显示全过程（详细版）

最新推荐文章于 2022-05-23 11:21:29 发布
VIP文章 最新推荐文章于 2022-05-23 11:21:29 发布
阅读量725 收藏 10
点赞数 2
分类专栏： 前端学习 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36070003/article/details/115384172
版权

本文章包括了浏览器从输入URL开始到展现出整个页面的过程的知识点，目的是为了梳理整个知识框架，包括计算机网络、浏览器渲染等知识。梳理完这部分的知识后，你应该能知道要从哪里入手前端优化了吧？

浏览器从输入URL到显示全过程

对网址URL进行DNS解析

浏览器首先向DNS请求地址解析，DNS将URL解析为IP地址后返回给浏览器，于是浏览器可以拿着这个解析后的IP地址。1 来找到服务器，从而发起TCP连接。

TCP连接

浏览器和服务器建立TCP连接。

TCP三次握手建立连接

  • 第一次握手： 浏览器向服务器发送自己的SYN（同步序列编号），请求与服务器连接；
  • 第二次握手： 服务器收到后向浏览器发送自己的SYN+ACK（确认包
最低0.47元/天 解锁文章
芋泥酱XD
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一、浏览器渲染原理（进程、线程）http请求全过程-浏览器输入url整个过程
04-03
1.3 输入url地址到浏览器显示页面发生了什么 从上图可以看到，整个过程需要各个进程之间的配合，我们结合上图我们从进程的角度，描述一下 1、浏览器进程接收到用户输入的URL请求，浏览器进程便将URL转发给网络进程。...
浏览器输入URL到网页完全呈现的过程
qq_43889848的博客
05-25 215
简单总结 1.查看缓存（浏览器缓存，系统缓存，路由器缓存），如果有直接访问 2.如果没有，DNS服务器进行域名解析，解析成ip地址 3.通过ip地址找到服务器，进行TCP链接，完成三次握手 4.浏览器像服务器发送http请求 5.服务器响应，将响应报文通过TCP发送回浏览器 6.对响应进行解码，根据资源类型决定如何处理 7.如果是HTML文档，则构建DOM树，下载CSS，JS资源，构建渲染树，布局，绘制 8.断开连接：TCP四次挥手 详细介绍 DNS解析 什么是URL 在讲解DNS解析前，先简单介绍下URL
浏览器工作原理：从 URL 输入到页面展现到底发生了什么？
u014096903的博客
09-27 534
转载自简书：https://www.jianshu.com/p/d616d887953a，仅做记录分享，侵删   对浏览器原理有过了解的一定不会陌生这篇神文《How Browsers Work》中文翻译：浏览器原理：新式网络浏览器幕后揭秘。另外还有一篇 《What really happens when you navigate to a URL》。大神写的东西很长很复杂，阅读成本虽然大，但能...
浏览器输入一个URL的详细过程
qq_48168706的博客
12-30 1577
在浏览器输入URL 浏览器要将URL解析为IP地址，解析域名就要用到DNS协议，首先主机会查询DNS的缓存，如果没有就给本地的DNS发送查询请求。DNS查询分为两种方式，一种是递归查询，一种是迭代查询。如果是迭代查询，本地的DNS服务器，向根域名服务器发送查询请求，根域名服务器告知该域名的一级域名服务器，然后本地服务器给该一级域名服务器发送查询请求，然后依次类推直到查询到该域名的IP地址。DNS服务器是基于UDP协议的。 得到IP地址后，浏览器就要与服务器建立一个http连接。因此要用到http协议。htt
说说从输入URL到看到页面发生的全过程，越详细越好
LuckXinXin的博客
05-16 229
首先浏览器主进程接管，开了一个下载线程。 然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。 将下载完的内容转交给Renderer进程管理。 Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。 解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。 css rule tree和dom t.
知识点串联: 输入URL到页面的全过程
高高冷的博客
12-20 335
地址栏输入URL URL，即统一资源定位符。它实际上就是网站的网址。浏览器就是靠URL来查找资源位置。 可以把URL分成几个部分：协议、网络地址、资源路径。 ● 传送协议：URL包含协议部分，是浏览器和www万维网之间的沟通方式，它会保证浏览器正确地在网络上找到资源位置。最常见的网络传输协议是HTTP协议；其他的还有ftp，file，mailto，git等。还有自定义的协议，例如Itencent。不同协议有不同的通讯内容格式。 ● 网络地址：指示该连接网络上的某一台计算机，可以是域名或者IP地址，也可以包括
在浏览器输入URL回车之后发生了什么？（超详细版）
01-07
这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面一点，但由于我是做前端的，所以会比较重点分析浏览器渲染页面那一部分，至于其他部分我会罗列出关键词，感兴趣的可以自行查阅， 注意：本文的步骤是建立...
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习
05-04
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习 博客：用electron做一个浏览器 博客地址：https://tinycool.blog.csdn.net/article/details/124565497
前端开发过程中浏览器版本的两种判定方法
09-04
前端开发过程中经常需要判断浏览器的版本，达到同时兼容多个浏览器的目的，下面有两种不错的常用方法：jquery及HTML中的注释，喜欢的朋友可以参考下
前端面试相关-浏览器事件循环
最新发布
01-15
前端面试相关-浏览器事件循环
浏览器从输入URL到页面展示过程
03-14 162
浏览器从输入URL到页面展示过程1.用户输入2.URL请求过程3.准备渲染进程4.提交文档5.渲染阶段 1.用户输入 浏览器的地址栏会判断用户输入的关键字是搜索内容还是URL， 如果输入内容符合URL规则，地址栏会根据规则把这段内容加上协议合成完整URL 浏览器加载地址时需要等待提交文档阶段页面内容才会被替换 2.URL请求过程 浏览器进程通过进程间通信把URL请求发送至网络进程，网络进程接收到后发起真正URL请求流程： 首先查找本地缓存是否缓存了该资源。如果有缓存资源则直接返回；如果没有则进行DNS
从输入内容到展示页面全过程详解
BIGDgreen
02-24 748
整体流程 将整个流程分为导航流程和渲染流程两部分。 导航流程 处理用户输入 判断是搜索内容还是url 搜索内容则直接用默认搜索引擎，合成带搜索关键字的URL url，则判断url规则，根据规则，把内容加上协议，合成完整的URL 监听beforeunload事件，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面 用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作 进入页面资源请求过程。浏览器进程会通过进程间通
前端输入url到页面展示
不会唱杰伦
10-26 347
从浏览器输入url到页面显示的步骤 输入url 域名解析 三次握手请求建立tcp连接 浏览器构建http请求报文，请求报文通过tcp协议传送到服务器指定的端口发送http请求（请求行、请求头、请求体） 服务器处理http请求并返回响应报文（状态码、响应头、响应正文） 浏览器解析html文档，构建DOM树，CSSOM树，构架渲染树，定位页面元素，绘制页面 四次挥手断开tcp连接 01、输入url 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能的 url 了，他会从历史记录，书签等地方
从输入URL到展示出页面
m0_59155415的博客
05-23 341
从输入URL到展示出页面的步骤，总体来说分为以下几个过程: DNS解析:将域名解析成IP地址 TCP连接：TCP三次握手 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 断开连接：TCP四次挥手
通过url地址抓取网页html代码
凯奥的专栏
07-12 1365
import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; public class URLUtil { public static String getHtml(String urlString) {
html怎么获取页面地址,web前端：JS通过url地址栏获取html页面名称
weixin_39716800的博客
06-03 3723
统一资源定位符(UniformResourceLocator，URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。有的时候需要获取页面名称，为此我在这里封装了一个方。一、分别根据传递不同的参数，获取到html页面的名称。1通过传递参数，获取到html页面的名称；参...
通过url地址抓取网页html代码 - 可视化Java快速开发平台 - CSDNBlog
巴士飞扬-busfly.cn-的专栏
04-12 851
import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; public class URLUtil { public static String getHtml(String urlString) { try
JS 通过url地址栏获取html页面名称
TS_144636的博客
01-14 952
有的时候需要获取页面名称，为此我在这里封装了一个方。 一、分别根据传递不同的参数，获取到html页面的名称。 通过传递参数，获取到html页面的名称；参数params 以下是参数解释说明 （1）params=1，只获取页面名称，不带.html后缀 1.1 例如 url路径是 https://www.ceshi.com/home/index.html 只返回页面名称： index （2）param...
前端都该懂的浏览器工作原理，你懂了吗？
前端开发博客
06-28 402
作者 | 杨溜溜https://segmentfault.com/a/1190000022633988前言在我们面试过程中，面试官经常会问到这么一个问题，那就是从在浏览器地址栏中输入UR...
后端如何获取前端浏览器的当前url
06-10
后端可以通过 HTTP 请求的头部信息中的 "Referer" 或 "Origin" 字段获取前端浏览器的当前 URL。其中，"Referer" 字段会...另外，后端也可以在前端发送请求时，将当前页面的 URL 作为请求参数发送到后端，以便后端获取。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值