【前端】面试八股文——输入URL到页面展示的过程

【前端】面试八股文——输入URL到页面展示的过程

1. DNS解析

当用户在浏览器中输入URL并按下回车时,首先需要将域名转换为IP地址,这个过程称为DNS(域名系统)解析。具体步骤如下:

  • 浏览器缓存:浏览器首先检查自身缓存中是否有该域名的IP地址。
  • 操作系统缓存:如果浏览器缓存中没有找到,浏览器会向操作系统请求DNS信息。
  • 路由器缓存:如果操作系统缓存也没有找到,操作系统会向本地网络中的路由器请求DNS信息。
  • ISP DNS服务器:如果路由器缓存没有命中,路由器会向ISP提供的DNS服务器请求域名解析。
  • 递归查询:如果ISP的DNS服务器也没有找到,它会进行递归查询,从根DNS服务器开始,逐级查询顶级域(如.com)、二级域等,直到找到对应的IP地址。

2. TCP连接

获得IP地址后,浏览器需要与服务器建立连接,这通常通过三次握手完成:

  • 第一次握手:浏览器(客户端)发送一个带有SYN标志的数据包到服务器,表示请求建立连接。
  • 第二次握手:服务器收到SYN数据包后,回复一个带有SYN/ACK标志的数据包,表示同意建立连接。
  • 第三次握手:客户端收到SYN/ACK数据包后,再回复一个带有ACK标志的数据包,连接建立完成。

3. 发送HTTP请求

TCP连接建立后,浏览器会构建一个HTTP请求报文并发送到服务器:

  • 请求行:包含请求方法(如GET、POST)、URL和HTTP版本。
  • 请求头:包含主机、用户代理、接受的文件类型等信息。
  • 请求体:对于GET请求通常为空,对于POST请求包含提交的数据。

4. 服务器处理请求

服务器接收到HTTP请求后,会进行以下操作:

  • 请求解析:解析请求报文,提取请求的资源路径和其他信息。
  • 资源查找:根据请求路径查找对应的资源(如HTML文件、图像等)。
  • 生成响应:将查找到的资源封装到HTTP响应报文中,准备返回给客户端。

5. 浏览器接收响应

浏览器接收服务器的响应报文,并进行解析:

  • 状态行:包含HTTP版本、状态码(如200、404)和状态描述。
  • 响应头:包含内容类型、内容长度、服务器信息等。
  • 响应体:包含实际的资源内容(如HTML、CSS、JavaScript等)。

6. 渲染页面

浏览器根据响应内容开始渲染页面,步骤如下:

  • 解析HTML:浏览器解析HTML文件,构建DOM树。
  • 解析CSS:解析CSS文件,构建CSSOM树。
  • 构建渲染树:将DOM树和CSSOM树合并,生成渲染树。
  • 布局(layout):计算每个元素的大小和位置。
  • 绘制(painting):将渲染树中的元素绘制到屏幕上。

7. 执行JavaScript

浏览器解析并执行HTML中的JavaScript:

  • 解析脚本:浏览器解析并执行内嵌的或外部引用的JavaScript。
  • 操作DOM:JavaScript可能会操作DOM,改变页面内容。
  • 重新渲染:如果JavaScript修改了DOM,浏览器可能会重新计算布局和绘制页面。

8. 加载其他资源

HTML文件中可能引用了其他资源(如图片、视频、字体等),浏览器会根据需要加载这些资源:

  • 并行加载:浏览器可以并行发送多个HTTP请求以加快资源加载速度。
  • 处理响应:每个资源的加载过程与主HTML文件类似,会经过DNS解析、TCP连接、HTTP请求和响应处理等步骤。

9. 建立安全连接(HTTPS)

如果使用HTTPS,浏览器在建立TCP连接后会进行SSL/TLS握手,以建立加密通道:

  • 协商加密算法:客户端和服务器协商使用的加密算法。
  • 交换密钥:客户端和服务器交换密钥,建立加密通信通道。
  • 验证证书:客户端验证服务器的SSL证书是否有效。

10. 优化性能

浏览器会进行一些性能优化,以提高页面加载速度和用户体验:

  • 缓存:缓存常用资源以减少重复加载。
  • 预加载:提前加载可能用到的资源。
  • 压缩:对资源进行压缩以减少传输的数据量。
  • 使用HTTP/2:HTTP/2支持多路复用、头部压缩等特性,提高传输效率。

通过这些详细的步骤,输入URL到页面完全展示的整个过程得以实现。理解这个过程不仅有助于提升前端开发的技术水平,也有助于优化页面加载速度,提高用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

科普文:Linux服务器性能调优概叙

概叙 Java web应用性能分析之服务端慢和优化概叙_cpu飙高java-CSDN博客 Java web应用性能分析之【CPU飙升分析概述】_web页面性能分析cpu占满是因为死循环,还是循环过多-CSDN博客 在我们的软件服务中,软件部署的服务器,一般都是linux服务器&#xff0c…

ubuntu20.04安装lio-sam

1、boost版本 boost版本查看:cat /usr/include/boost/version.hpp | grep "BOOST_LIB_VERSION" boost版本为1.78,为1.71时编译报错,报错内容为: error: missing binary operator before token "(" 60 |…

面向txt/json/xlsx/csv的文件读写及编码问题

专栏介绍 1.专栏面向零基础或基础较差的机器学习入门的读者朋友,旨在利用实际代码案例和通俗化文字说明,使读者朋友快速上手机器学习及其相关知识体系。 2.专栏内容上包括数据采集、数据读写、数据预处理、分类\回归\聚类算法、可视化等技术。 3.需要强调的是,专栏仅介绍主…

每日一道算法题 彩灯装饰记录 I

题目 LCR 149. 彩灯装饰记录 I - 力扣(LeetCode) Python # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right …

Redis五种数据结构及其常用使用场景

引言 Redis 是一种高性能的键值对数据库,支持多种数据类型,每种类型都有其独特的使用场景和优势。在本篇博客中,我们将深入探讨 Redis 的五种主要数据结构:字符串(String)、哈希(Hash&#xff…

Java中的RPC远程过程调用技术详解

Java中的RPC远程过程调用技术详解 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在分布式系统中,RPC(Remote Procedure Call&#xf…

rtsp地址 + 测试网站 + java(免环境、免插件、零编码转换http播放)

目录 1、创建rtsp网站 2、测试rtsp网站 3、Java实现rtsp播放 ①maven添加依赖 ②访问http地址即可展示视频内容 1、创建rtsp网站 填写邮箱即可获得两个可用的rtsp网站(每月可免费用2G): https://rtsp.stream/ 2、测试rtsp网站 测试网络…

基于SpringBoot的地方废物回收机构管理系统

本系统主要包括管理员和员工两个角色组成;主要包括:首页、个人中心、员工管理、员工请假管理、销假申请管理、工作日志管理、员工工资管理、员工任务管理、任务汇报管理、设备信息管理、设备借用管理、设备归还管理、设备保修管理、维修入库管理、员工打…

Python酷库之旅-第三方库Pandas(002)

目录 一、用法精讲 1、pandas.read_pickle函数 1-1、语法 1-2、参数 1-3、功能 1-4、返回值 1-5、说明 1-6、用法 1-6-1、代码示例 1-6-2、结果输出 2、pandas.DataFrame.to_pickle方法 2-1、语法 2-2、参数 2-3、功能 2-4、返回值 2-5、说明 2-5-1、文件路径…

数据结构(3.8)——栈的应用

栈在括号匹配中的应用 流程图 代码 #include <stdio.h> #include <stdlib.h> #define MaxSize 10typedef struct {char data[MaxSize];int top; } SqStack;// 初始化栈 void InitStack(SqStack* S) {S->top -1; // 初始化栈顶指针 }// 判空 bool StackEmpty(…

Apache Hadoop完全分布式集群搭建指南

Hadoop发行版本较多,Cloudera版本(Cloudera’s Distribution Including Apache Hadoop,简称CDH)收费版本通常用于生产环境,这里用开源免费的Apache Hadoop原始版本。 下载:Apache Hadoop 版本下载:Index of /hadoop/common Hadoop基础知识可查看本专栏其它篇章:Apac…

《米小圈日记魔法》边看边学,轻松掌握写日记的魔法!

在当今充满数字化娱乐和信息快速变迁的时代&#xff0c;如何创新引导孩子们学习&#xff0c;特别是如何培养他们的写作能力&#xff0c;一直是家长和教育者们关注的焦点。今天就向大家推荐一部寓教于乐的动画片《米小圈日记魔法》&#xff0c;该系列动画通过其独特的故事情节和…

Linux安装ftp、Java的FTP上传下载文件工具类

Linux安装ftp、Java的FTP上传下载文件工具类 文章说明Linux安装vsftpdJava的工具类 文章说明 网上找到说linux安装ftp&#xff0c;采用vsftpd&#xff0c;在后续的配置中少了一些说明&#xff0c;给我折磨了许久&#xff0c;写下这篇文章来记录 Linux安装vsftpd 命令非常简单&a…

vue通过后台返回的数字显示不同的文字内容,多个内容用、隔开

后台返回的数据 显示效果&#xff1a; html&#xff1a; <el-table-columnalign"center"label"使用过的小程序"width"124"v-if"activeTab 0"><template #default"scope"><divv-for"(item, index) in s…

数据结构(3.5)——队列的顺序实现

队列的顺序实现 #define MaxSize 10//定义队列中元素的最大个数 typedef struct {int data[MaxSize];//用静态数组存放队列元素int front, rear;//队头指针和队尾指针 } SqQueue;void testQueue() {SqQueue Q;//声明一个队列(顺序存储) } 队列的初始化操作和判空 //初始化队…

大模型面试题目

1.为什么需要做位置编码 位置编码&#xff08;Positional Encoding&#xff09;在变换器&#xff08;Transformer&#xff09;模型中非常重要&#xff0c;因为变换器架构本身没有内置的顺序信息。变换器使用的是自注意力机制&#xff0c;它能够捕捉输入序列中所有词之间的相关性…

论文解析——Transformer 模型压缩算法研究及硬件加速器实现

作者及发刊详情 邓晗珂&#xff0c;华南理工大学 摘要 正文 实验平台 选取模型&#xff1a; T r a n s f o r m e r b a s e Transformer_{base} Transformerbase​ 训练数据集&#xff1a;WMT-2014 英语-德语翻译数据集、IWSLT-2014 英语-德语互译数据集 Transformer模…

JVM垃圾回收性能调优实战指南

JVM垃圾回收性能调优实战指南 一、引言 在Java应用程序中&#xff0c;垃圾回收&#xff08;Garbage Collection, GC&#xff09;是自动管理内存的重要机制。然而&#xff0c;不恰当的垃圾回收配置可能导致性能瓶颈&#xff0c;如频繁的GC暂停、内存碎片过多等。因此&#xff…

kpatch制作内核热补丁步骤总结

零、原理及参考 kpatch入门实践教程-CSDN博客 Kpatch 使用过程及其原理-CSDN博客 一、准备工作 安装对应版本的kpatch-build.rpm并解决依赖diff -Naur dir1 dir2 > hot.patch 拿到补丁文件下载对应内核版本的src.rpm安装好对应的开发包kernel-debuginfo&#xff0c;kern…

从GPT-1到GPT-3 预训练语言模型的演进与突破

本文由 ChatMoney团队出品 前言 Generative Pre-trained Transformer&#xff08;GPT&#xff09;系列是由OpenAI开发的预训练语言模型&#xff0c;它们在多种NLP任务中取得了令人瞩目的成绩&#xff0c;包括文章生成、代码生成、机器翻译和问答等。GPT系列模型的核心思想是通…