【前端】面试八股文——输入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.mfbz.cn/a/765005.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【你也能从零基础学会网站开发】理解DBMS数据库管理系统架构,从用户到数据到底经历了什么

🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 其实前面我们也…

最新CRMEB商城多商户java版源码v1.6版本+前端uniapp

CRMEB 开源商城系统Java版,基于JavaVueUni-app开发,在微信公众号、小程序、H5移动端都能使用,代码全开源无加密,独立部署,二开很方便,还支持免费商用,能满足企业新零售、分销推广、拼团、砍价、…

Monkey测试

Monkey测试是一种自动化测试技术,它通过模拟用户在设备上的随机操作,来对应用程序进行压力测试。它的目的是测试软件的稳定性和健壮性。 Monkey测试有以下几个特点: 随机输入: Monkey测试不需要编写详细的测试用例,只…

【博主推荐】HTML5实现简洁好看的个人简历网页模板源码

文章目录 1.设计来源1.1 主界面1.2 关于我界面1.3 工作经验界面1.4 学习教育界面1.5 个人技能界面1.6 专业特长界面1.7 朋友评价界面1.8 获奖情况界面1.9 联系我界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板,程序开发,在线开发&#xff0c…

怎么把录音转文字?推荐几个简单易操作的方法

在小暑这个节气里,炎热的天气让人分外渴望效率up!Up!Up! 对于那些在会议或课堂中急需记录信息的朋友们,手写笔记的速度往往难以跟上讲话的节奏。此时,电脑录音转文字软件就像一阵及时雨,让记录…

中国网络安全审查认证和市场监管大数据中心数据合规官CCRC-DCO

关于CCRC-DCO证书的颁发机构,它是由中国网络安全审查认证与市场监管大数据中心(简称CCRC)负责。 该中心在2006年得到中央机构编制委员会办公室的批准成立,隶属于国家市场监督管理总局,是其直辖的事业单位。 依据《网络…

Rust学习笔记007:Trait --- Rust的“接口”

Trait 在Rust中,Trait(特质)是一种定义方法集合的机制,类似于其他编程语言中的接口(java)或抽象类(c的虚函数)。 。Trait 告诉 Rust 编译器: 某种类型具有哪些并且可以与其它类型共享的功能Trait:抽象的…

深层神经网络

深层神经网络 深层神经网络 深度神经网络(Deep Neural Networks,DNN)可以理解为有很多隐藏层的神经网络,又被称为深度前馈网络(DFN),多层感知机(Multi-Layer perceptron&#xff0c…

音视频同步的关键:深入解析PTS和DTS

😎 作者介绍:我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun,视频号:AI-行者Sun 🎈 本文专栏:本文收录于《音视频》系列专栏&…

【ES】--Elasticsearch的Nested类型介绍

目录 一、问题现象二、普通数组类型1、为什么普通数组类型匹配不准?三、nested类型四、nested类型查询操作1、只根据nested对象内部数组条件查询2、只根据nested对象外部条件查询3、根据nested对象内部及外部条件查询4、向nested对象数组追加新数据5、删除nested对象数组某一个…

Python+Pytest+Allure+Yaml+Pymysql+Jenkins+GitLab接口自动化测试框架详解

PythonPytestAllureYaml接口自动化测试框架详解 编撰人:CesareCheung 更新时间:2024.06.20 一、技术栈 PythonPytestAllureYamlJenkinsGitLab 版本要求:Python3.7.0,Pytest7.4.4,Allure2.18.1,PyYaml6.0 二、环境配置 安装python3.7&…

Windows下快速安装Open3D-0.18.0(python版本)详细教程

目录 一、Open3D简介 1.1主要用途 1.2应用领域 二、安装Open3D 2.1 激活环境 2.2 安装open3d 2.3测试安装是否成功 三、测试代码 3.1 代码 3.2 显示效果 一、Open3D简介 Open3D 是一个强大的开源库,专门用于处理和可视化3D数据,如点云、网格和…

linux内核驱动第一课(基于RK3568)

学习Linux驱动需要以下基础知识: C语言编程:掌握C语言是开发Linux驱动程序的基本要求。操作系统原理:了解操作系统的基本概念和原理,如进程管理、内存管理、中断处理等。Linux内核:熟悉Linux内核的结构和工作机制&…

编译libvlccpp

首先下载vlc sdk https://get.videolan.org/vlc/3.0.9.2/win64/vlc-3.0.9.2-win64.7z Cmake 生成libvlccpp vs2022工程文件 编译libvlccpp 编译出错需修改代码 错误信息: \VLC\sdk\include\vlc/libvlc_media.h(368): error C2065: “libvlc_media_read_cb”: 未…

Python程序语法元素简析

文章目录 Python程序的语法元素是构成Python程序的基础构建块,它们共同决定了程序的结构、逻辑和行为。以下是一些关键的Python语法元素简析: 注释:用于解释代码功能,不被执行。单行注释以#开始,多行注释使用三个单引号…

智能写作与痕迹消除:AI在创意文案和论文去痕中的应用

作为一名AI爱好者,我积累了许多实用的AI生成工具。今天,我想分享一些我经常使用的工具,这些工具不仅能帮助提升工作效率,还能激发创意思维。 我们都知道,随着技术的进步,AI生成工具已经变得越来越智能&…

怎样恢复数据?电脑数据恢复方法详解!

在日常使用电脑或移动设备时,我们难免会遇到数据丢失的情况,如误删除文件、存储设备故障等。数据恢复成了许多人迫切需要解决的问题。本文将为您介绍几种高效的数据恢复方法,帮助您轻松找回丢失的文件。 一、了解数据丢失的原因 在恢复数据…

Centos安装1Panel面板工具安装可视化界面

1Panel是一种市场调研平台,旨在帮助企业进行市场研究和获取消费者反馈。它通过在线调查和观察研究的方式,帮助企业了解他们的目标市场,并针对市场需求做出相应的决策。 1Panel的特点包括: 1. 全球范围:1Panel在全球范…

学习笔记(linux高级编程)10

IPC 进程间通信 interprocess communicate 三大类: 1、古老的通信方式 无名管道 有名管道 信号 2、IPC对象通信 system v BSD suse fedora kernel.org 消息队列(用的相对少,这里不讨论) 共享内存 信号量集 3、socket通信 网络通信 特…

Linux登录界面

Linux登录界面 1. 起因2. 脚本3. 效果 1. 起因 某次刷抖音看到一个博主展示了一个登录页面,觉得蛮好看的.于是自己动手也写一个 2. 脚本 编写脚本/usr/local/bin/login.sh #!/bin/bash Current_timedate %Y-%m-%d %H:%M:%S Versioncat /etc/redhat-release Kernel_Version…