前端面试题整理-HTML

news2024/11/16 11:50:01

1. 从用户输入 url 到页面展示发生了什么?

(1)首先进行url合法性校验:包括协议域名端口号
(2)进行强缓存判断,判断本地缓存是否已经存在需要的资源文件,存在直接使用本地缓存即可
(3)强缓存未命中进行DNS域名解析
(4)建立连接,用到TCP三次握手协议(客户端发送建立连接的请求,服务端发送可以建立连接的请求并发送确认报文等待客户端确认,客户端发送收到同意建立连接的确认报文。)
(5)发起请求,传输html
(6)此时浏览器进行协商缓存,判断资源的新鲜度来确定资源是否需要重新获取
(7)关闭连接,用到TCP四次挥手协议(客户端发送释放连接的请求,服务端发送确认报文表示收到关闭请求,但是由于数据未发送完无法立刻释放连接,发送完毕后发送释放连接标志位表示没有数据要发送了,并发送确认报文等待客户端的确认,最后客户端发送确认报文表示收到关闭请求)
(8)浏览器渲染:对html进行解析,构建DOM树和CSS规则树以此组成render树,布局渲染最终展示到用户面前
在这里插入图片描述

2. http 缓存,介绍一下,具体到项目中该如何使用?

(1)强缓存(依赖浏览器的本地缓存机制,在缓存有效期内直接从本地获取资源,不向服务器发送请求,用于不经常变化的静态资源,如css、js文件)
(2)协商缓存(通过与服务器验证资源的新鲜度来确定是否需要重新获取资源,用于频繁变化并希望尽可能使用缓存的资源,如html文件)

3. html 解析,为什么 css 放前面,js 放后面?

将 CSS 放在前面确保页面样式优先加载和应用,而将 JavaScript 放在后面则是为了最大程度地减少对页面渲染的阻塞,提高页面加载性能和用户体验。

4. html 解析,js 的 defer, async 有什么用?

defer:异步加载JS文件,不会立即执行,不阻塞html解析,会在解析完成后按顺序执行
async:异步加载和执行JS文件,不会阻塞html解析,下载完就执行,没有执行顺序
没有defer和async:加载和执行都会阻塞html的解析
PS:
加载:浏览器遇到<script>开始下载JS文件
执行:浏览器执行JS代码

5. html 解析,css 加载慢,会阻塞页面展示吗?

会。当浏览器在解析 HTML 文档时遇到 <link> 标签加载 CSS 文件时,如果这些 CSS 文件加载较慢或者服务器响应时间较长,会造成页面的阻塞,影响页面展示的速度和用户体验。
可以通过一些措施优化:减少和精简 CSS 文件、使用压缩和合并 CSS 文件、利用浏览器缓存、使用异步加载或延迟加载、使用预加载。

6. tcp 三次握手和四次挥手,为什么要这么多次?

在两次握手的情况下,客户端可以发送SYN请求,但如果服务器没有收到或延迟收到,客户端会一直等待,这可能导致连接的阻塞。三次握手通过服务器发送SYN+ACK响应和客户端的ACK确认,确保双方都进入可以发送和接收数据的状态。

而四次握手虽然也能可靠地同步双方序列号,‌但三次握手已经足够保证连接的可靠性,‌因此不需要更多的通信次数。
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

无捆绑软件!Windows7纯净版镜像等你来下载!

在电脑操作中&#xff0c;很多用户都喜欢纯净版操作系统&#xff0c;但不知道在哪里可以下载到没有捆绑软件的Windows7纯净版系统&#xff1f;接下来系统之家小编给大家带来最新的Windows7纯净版镜像&#xff0c;这些镜像文件经过优化&#xff0c;不包含捆绑软件&#xff0c;安…

零基础学习【Mybatis】这一篇就够了

Mybatis 查询resultType使用resultMap使用单条件查询多条件查询模糊查询返回主键 动态SQLifchoosesetforeachsql片段 配置文件注解增删改查结果映射 查询 resultType使用 当数据库返回的结果集中的字段和实体类中的属性名一一对应时, resultType可以自动将结果封装到实体中 r…

react高级组件ProForm实现输入框搜索

实现界面 <Col span{12}><ProForm.Itemname"name"label"推荐用户"><AutoCompleteclassName"pro-field pro-field-md"placeholder"请输入用户名"options{NameArr}onSearch{debounce(searchUser, 500)}onSelect{onSelect…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第四篇 嵌入式Linux系统移植篇-第七十三章内核添加网卡驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

有趣的PHP小游戏——猜数字

猜数字 这个游戏会随机生成一个1到100之间的数字&#xff0c;然后你需要猜测这个数字是什么。每次你输入一个数字后&#xff0c;程序会告诉你这个数字是“高了”还是“低了”&#xff0c;直到你猜对为止&#xff01; 使用指南&#xff1a; 代码如下&#xff0c;保存到一个p…

大模型卷入医学图像!PFPs:使用大型视觉和语言模型的提示引导灵活病理分割,用于多样化潜在结果

PS&#xff1a;写在前面&#xff0c;近期感谢很多小伙伴关注到我写的论文解读&#xff0c;我也会持续更新吖~同时希望大家多多支持本人的公主号~ 想了解更多医学图像论文资料请移步公主&#x1f478;号哦~~~后期将持续更新&#xff01;&#xff01; 关注我&#xff0c;让我们一…

【嵌入式】STM3212864点阵屏使用SimpleGUI单色屏接口库——(2)精简字库

一 开源库简介与移植 最近一个项目需要用12864屏幕呈现一组较为复杂的菜单界面&#xff0c;本着不重复造轮子的原则找到了SimpleGUI开源库。 开源地址&#xff1a;SimpleGUI: 一个面向单色显示屏的开源GUI接口库。 SimpleGUI是一款针对单色显示屏设计的接口库。相比于传统的GUI…

kali里面的vulhub靶场搭建

第一步&#xff1a;安装docker镜像容器 sudo apt install docker.io 第二步&#xff1a;开启docker镜像容器 先查看一下docker有没有下载成功 docker -v 再查看一下docker的运行状态 systemctl status docker 第三步&#xff1a;下载docker-compose环境 apt install do…

94 二叉树的中序遍历

解题思路&#xff1a; \qquad 首先理解中序遍历&#xff1a;left node——root——right node。 \qquad 中序遍历的起始点为该树最左边的非空元素。本题可以使用递归、DFS&#xff08;迭代&#xff09;解决。 递归法&#xff1a; \qquad 重复的基础操作&#xff1a;输出roo…

甘肃西北风情贝壳面你吃过吗?

在西北的甘肃&#xff0c;有一种传统面食——麻食&#xff0c;以其独特的制作工艺和浓郁的地方风味&#xff0c;成为了当地人民餐桌上的宠儿。麻食&#xff0c;又被称为“麻什”“麻食子”等&#xff0c;是一种手工搓制而成的面食。它的形状酷似猫耳朵&#xff0c;小巧玲珑&…

超有趣的视觉欺骗

by 游梦 关键词&#xff1a;蜘蛛侠、室内映射、假室内 大家一起先找茬&#xff0c;半分钟找出下图中穿帮镜头 &#xff08;图源&#xff1a;https://zhuanlan.zhihu.com/p/159439811&#xff09; 答案揭晓&#xff1a; 可以看到室内门的位置&#xff0c;在建筑不同视角下的位…

为 Laravel 提供生产模式下的容器化环境:打造现代开发环境的终极指南

为 Laravel 提供生产模式下的容器化环境&#xff1a;打造现代开发环境的终极指南 在现代开发中&#xff0c;容器化已经成为一种趋势。使用 Docker 可以让我们轻松地管理和部署应用程序。本文将带你一步步构建一个高效的 Laravel 容器化环境&#xff0c;确保你的应用程序在开发…

Modbus从站模拟软件

下载地址&#xff1a; Modbus从站模拟软件资源-CSDN文库

linux创建用户并免密切换

useradd ansible passwd ansible 加入到wheel组 sudo usermod -G wheel ansible 编辑文件visudo ansible ALL(ALL) NOPASSWD:ALL chage -M 99999 ansible #设置密码永不过期

2024上半年热门内容透视 | 品牌种草解析

2024年上半年&#xff0c;小红书平台“考公上岸”、“不确定性”、“重养自己一遍”、“人生是旷野”、“原生家庭顶配”等话题热议之下&#xff0c;透露着消费者怎样的需求&#xff1f; 综合热门内容及小红书用户的分享发现&#xff0c;变数和不确定性成为新常态&#xff0c;消…

PTrade常见问题系列18

客户反馈某代码L1快照有延迟&#xff1f; 客户反馈某代码9.30.12的快照在9.30.12策略没有获取到&#xff0c;在9.30.17才获取到&#xff1f; 1、由于交易所的快照不是严格按照3s下发的&#xff0c;例如快照在9.30.12.300更新了&#xff0c;客户策略在9.30.12.100执行到&#…

什么是文档签名证书?如何获取文档签名证书?

在数字化高速发展的当今时代&#xff0c;各行各业都开始向数字化转型&#xff0c;随着国家大力倡导和积极推进数字化&#xff0c;电子文件的应用越来越广泛。然而&#xff0c;电子文件包含了个人隐私、金融交易、电子处方、合同协议等敏感信息&#xff0c;如何确保这些重要文件…

Python开发框架FastAPI系列(1. 初体验)

本文为系列文章Python开发框架FastAPI系列的第一部分。 缘起 其实Python的Web开发框架已经有很多了&#xff0c;包括老将Django和后起之秀Flask都做得很好&#xff0c;各有各的特色。那么为什么FastAPI作为一个后来者&#xff0c;短时间内就人气飙升呢&#xff1f;我也是看到…

【linux】【操作系统】初始化程序之main.c源码阅读

/init/main.c是Linux操作系统启动过程的核心部分&#xff0c;它负责初始化硬件、设备、内存和系统服务&#xff0c;以及启动第一个用户进程&#xff0c;为后续的系统运行奠定基础。 详细解析 1. 内联函数定义 fork, pause, setup, sync: 这些函数被声明为内联&#xff0c;意…

解决secureCRT乱码设置UTF-8显示中文

永久性配置UTF-8 在SecureCRT的安装文件夹中搜索“Default.ini” 找到D:“Filenames Always Use UTF8”00000000&#xff0c;将最后的0变成1&#xff0c;即&#xff1a;D:“Filenames Always Use UTF8”00000001 将S:”Output Transformer Name”Default修改为S:”Output Tran…