前端科举八股文-HTML篇

前端面试-HTML篇

  • 什么是http?
  • http和https有什么区别
  • https的加密过程?
  • http2.0有什么改进?
  • src和href的区别
  • 对html语义化标签的理解?
  • script标签中defer和asyc的区别?
  • 举出几个常见的行内、块级元素
  • 什么是webworker?
  • iframe的优缺点?
  • 介绍一下tcp三次握手
  • fetch等某些请求会发送两次请求的原因?
  • 浏览器缓存机制
  • 在浏览器输入url到渲染页面的过程
  • get和post的区别
  • 对于跨域的理解.以及如何解决
  • form表单可以跨域吗? 为什么

4.22记录

什么是http?

http 是超文本传输协议,它是一个浏览器和服务器之间必须遵守的一个标准. 它是一个无状态的应用层协议
所谓的无状态就是协议对于事物处理没有缓存, 在一次请求和返回数据的过程中不会缓存任何信息. 也就是说对于第二次请求获取同样的数据也需要重新发起请求,重新获取数据.

http和https有什么区别

Https是基于http的基础上加上了ssl/tls安全协议的一个安全版本的超文本传输安全协议.
Https的默认端口是443
http的默认端口是80
Https需要ca证书 费用较高
Https建立连接的开销更大
Https网站更有利于SEO,在浏览器中排名更高

https的加密过程?

首先由浏览器发起请求
客户端收到请求返回公钥
浏览器验证公钥的有效性
验证通过之后会生成一个对称密钥
浏览器使用公钥加密对称加密密钥发送给服务器
服务器使用私钥解密密钥得到对称密钥
然后双方使用对称密钥来加密解密和传输信息

http2.0有什么改进?

最大的改进是二进制分帧, 它可以把一次请求拆分成很小的数据包,多个请求可以拆分成多个数据包进行传输.然后由服务端根据数据包的index进行拼接,得到每一个完整的请求,这也是http2.0实现多路复用的基础.也就是基于一次连接同时发送多个请求.

还有一个头部压缩算法,
在http1.0中可以将请求体通过GZIP压缩来达到减少体积的目的,其实在日常开发中可以看到每个请求的请求头是很多很大的,而且一般来说请求头都不会变.http2.0会基于每个请求头字段建立一个hash表,如果头部字段不变,则只会传递请求头的hash序号.

还有一个服务器端推送 但是区别于websocket http2.0的服务器端推送又有一定的局限性,比如请求一个html结构,然后就是请求html对应的css资源,js字段等,然后又会重新发送请求,而http2.0就会预判这类请求并主动推送.

src和href的区别

Src是加载对应的资源到文档对应的位置,是一个引入的关系,这个过程中会阻塞其他资源的加载.直到当前资源加载完成.
Href是在当前文档和目标资源中间建立一个链接,是一种引用的关系.不会阻塞其他资源的加载过程.
这就是为什么在html结构中我们可以把js资源放在页面尾部,css资源放在页面顶部来实现性能优化.

对html语义化标签的理解?

通俗的来说就是根据内容来选择合适的标签,而不是一味的选择 div 去开发.
主要的好处 第一, 是代码结构更加清晰明了, 第二 语义化标签更容易做SEO
主要的语义化标签 header、nav、aside、main、footer等等

3、html中docType的作用
它的主要作用是告诉浏览器以一种什么标准去解析html结构.主要有两种方式.
第一种是标准模式 css1combat,它是规定以浏览器支持的最高标准去解析html.
第二种是兼容模式 backupcombat,它是以一种向后兼容的模式去解析html.

script标签中defer和asyc的区别?

因为script资源的加载会阻塞浏览器构建dom,两者都是为了异步加载js资源的标签属性,两者的不同点在于async会加载之后马上执行,script的执行顺序和编码顺序无关,defer会在加载完成之后,页面渲染完成之后再执行,是有序的
defer(推迟)异步加载 + 推迟执行 async(异步) 异步加载

举出几个常见的行内、块级元素

行内 span、img、a(link标签)、b(强调标签)、input
块级标签 div、ul、li、h系列标签、p标签

什么是webworker?

由于js是单线程的特性,在执行一些高开销或者搞延迟的任务时容易造成页面渲染阻塞,webworker是一种独立于主线程的之外的独立运行js线程。可以单独去执行一些高开销的任务然后将结果传回主线程。webworker并不是说js就具备了多线程的能力,只是浏览器提供了一个多线程的环境去给js执行任务。

iframe的优缺点?

iframe是一种在文档中内嵌其他文档内容的一个原生的h5标签。
他的优势是(其实没啥优势,主要是它的能力赋予了它一定的适用场景)
比如他形式的特殊性可以用来嵌入网页广告。
第二个是它可以和主页面通信,所以可以用来做微前端解决方案,比如腾讯开源的无界方案就是基于iframe的。

缺点
iframe的结构不利于浏览器做SEO。
主页面的onload事件会等所有iframe的onload执行之后才执行,所以iframe会阻塞主页面的onload事件
irame和主页面共享连接池,浏览器对相同域的并行请求有数量限制,所以iframe会影响主页面的并行请求数量。

介绍一下tcp三次握手

浏览器和服务器建立可靠连接之前需要发送三个请求包,第一个由浏览器发送给服务器,证明浏览器有正常发送请求包的能力,服务器收到返回响应包,证明服务器有正常响应和发送请求包的能力,最后浏览器收到响应包,证明浏览器也有正常响应请求的能力,通过三个请求包来确保双方都有建立可靠连接的能力.

fetch等某些请求会发送两次请求的原因?

一般会在跨域的情况发生除了get之外的一些复杂请求,浏览器会先发送一个options请求来确认服务端是否有处理其真正请求的能力再发送真正的请求.

浏览器缓存机制

浏览器在发送请求之前会检查请求头字段中的expire字段来判断是否使用本地缓存,如果没有过期的话则使用本地缓存,状态码为200.如果没有命中本地缓存则发送请求到服务器,由服务器判断协商缓存相关参数etag,last- modified,如果使用缓存就返回304状态码,如果没有命中缓存就返回最新的数据同时写入本地缓存.

在浏览器输入url到渲染页面的过程

首先将URL通过DNS解析成对应的IP地址,然后向此ip地址发送三次握手建立连接,向服务器发送请求获取响应数据,根据响应数据构建dom树和css对象模型树,然后加载页面所需要的静态资源完成页面渲染.

get和post的区别

Get请求是将参数拼在url上,有长度限制,而且明文的,不太安全
post请求通过requestbody传输,安全性较高

对于跨域的理解.以及如何解决

跨域是浏览器的一个安全策略,如果请求接口和当前url的协议,域名、或者端口不同则视为跨域,请求发到跨域的服务端会报出跨域错误.

常见的跨域配置有 jsonp,它是利用某些html标签不受同源政策限制的特性来实现跨域的
Cros跨域,服务端设置相应头 accept-control-allow-origin实现跨域
postmessage实现iframe跨域
Nginx配置代理跨域

form表单可以跨域吗? 为什么

答 可以, form表单是提交到其他域,但是不能拿到其他域的数据,浏览器认为这是安全的,而ajax请求是可以拿到其他域的响应数据的,所以是受同源政策限制的.

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

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

相关文章

python中的进程间通信

进程间数据是否共享 在Python中,进程之间默认是不共享内存的。每个进程都有自己独立的内存空间,这意味着在一个进程中对数据的修改不会影响到另一个进程中的同名数据。然而,Python提供了几种方式来实现进程间的数据共享: 使用 mu…

.NET 解决Linux下Couldn‘t find a valid ICU package installed on the system异常的问题

最近使用.NET发布独立的Linux x64程序,在CentOS7.9的最小化安装系统上运行,结果运行不了,启动就报异常“Process terminated. Couldnt find a valid ICU package installed on the system. Please install libicu (or icu-libs) using your p…

3D,kd-tree算法原理

作为三维领域中一个重要的数据来源,点云主要是表征目标表面的海量点的集合,并不具备传统网格数据的几何拓扑信息,所以点云数据处理中最为核心的问题就是建立离散点间的拓扑关系,实现基于邻域关系的快速查找。 几何拓扑是计算几何学中的一个重要概念,指的是描述几何形状的空…

周三多《管理学原理》第3版/考研真题/章节练习题

普通高等教育“十一五”国家级规划教材《管理学原理》(第3版,周三多、陈传明、龙静编著,南京大学出版社)是我国高校广泛采用的管理学权威教材之一,也被众多高校(包括科研机构)指定为考研考博专业…

深度解析 Spring 源码:从BeanDefinition源码探索Bean的本质

文章目录 一、BeanDefinition 的概述1.1 BeanDefinition 的定位1.2 BeanDefition 的作用 二、BeanDefinition 源码解读2.1 BeanDefinition 接口的主要方法2.2 BeanDefinition 的实现类2.2.1 实现类的区别2.2.2 setBeanClassName()2.2.3 getDependsOn()2.2.4 setScope() 2.3 Bea…

触摸屏幕MSR BMS-2000维修三井主机遥控MITSUI EMS-200船舶电脑远程控制系统船用柴油主机遥控装置BMS-2000IIEMS-200II

远程控制系统 船用柴油主机遥控装置BMS-2000II&EMS-200II 该船用柴油机远程控制系统继承了已交付500多套的BMS-2000的理念,集成了新的电子技术。 曾为BMS-2000赢得好评的液晶显示屏进行了更新,并在W/H和C/R上作为标准安装。此外,备用控制…

关于修改hosts,浏览器并没有刷新生效的问题.

1.windows系统用cmd命令: ipconfig /flushdns 进行刷新.并查看本地解析是否已经刷新. 2.检查是否开了,代理,代理还是有影响的,关闭,不然不会生效 3.针对谷歌浏览器解决方案: 访问: chrome://net-internals/?#sockets 点击close idle sockets和flush socket pools,,,清…

2024年申请海外访问学者,需要注意些什么呢?

越来越多的国内医院对于医生职称晋升有海外经历要求,医生出于临床技能提高和科研思维拓展,自己也有海外进修的需求,并且可以了解世界先进医疗理念及科研进展,何乐而不为? 其实,很多医生已经赶上早班车,通…

AI大模型探索之路-实战篇2:基于CVP架构-企业级知识库实战落地

目录 前言 一、概述 二、本地知识库需求分析 1. 知识库场景分析 2. 知识库应用特点 3. 知识库核心功能 三、本地知识库架构设计 1. RAG架构分析 2. 大模型方案选型 3. 应用技术架构选型 4. 向量数据库选型 5. 模型选型 三、本地知识库RAG评估 四、本地知识库代码落地 1. 文件…

【QGIS如何进行WKT可视化】

点击插件——python控制台 渲染线图层wkt = LINESTRINGZ (405223.79236294992733746767 3294798.52338150842115283012 0, 405250.43677213048795238137 3294767.52838639216497540474 0, 405272.27118375105783343315 3294735.17657975200563669205 0, 405363.435978673573117…

新东方老师董宇辉直播间“买买买”,知识型员工培训有多重要?

近期,直播领域涌出了一股清流,那就是新东方老师董宇辉的直播间,在“买买买!”、“上链接”、“9.9包邮”、“买一包送五包”等等层出不穷的推货方式中,董宇辉别具一格的直播方式让大家眼前一亮。 “金句”频出&#x…

局域网屏幕桌面监控哪个软件比较好?哪款好用?

在企业、教育机构或其他组织中,出于提高工作效率、保障数据安全、规范员工行为等目的,对局域网内电脑屏幕进行实时监控的需求日益凸显。 面对市场上众多屏幕监控软件,选择一款功能全面、稳定可靠且符合法规要求的产品至关重要。 在局域网屏幕…

unity生成随机表元素间隔距离相同的点

#region 生成随机点 float minX -800f; float maxX 800f; float minY -400f; float maxY 400f; // 计算相邻点之间的间距 float distanceBetweenPoints 500f; // 生成指定数量的点…

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第15课-xcard方式跳转平行3D馆

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第15课-xcard方式跳转平行3D馆 使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智…

【C/C++】动态内存管理(C:malloc,realloc,calloc,free || C++:new,delete)

🔥个人主页: Forcible Bug Maker 🔥专栏: C | | C语言 目录 前言C/C内存分布C语言中的动态内存管理:malloc/realloc/realloc/freemallocrealloccallocfree C中的动态内存管理:new/deletenew和delete操作内…

华为校招机试 - 足球队员射门能力排序(20240424)

在线OJ测试 题目详情 - 足球队员射门能力排序 - HydroOJ 题目描述 球队有 n 个足球队员参与 m 次射门训练 每次射门进球用 1 表示,射失则用 0 表示,依据如下规则对该 n 个队员的射门能力做排序: 进球总数更多的队员射门能力更强若进球总数—样多,则比较最多—次连续进球…

港口数据复杂不知道如何监控?来试试FineVis所展现的智慧港口看板

一、智慧港口是什么 智慧港口代表着港口建设的未来趋势和发展方向。以信息物理系统为框架,智慧港口通过创新应用高新技术,实现了物流供给方和需求方之间的沟通,并将它们融入集疏运一体化系统中。这种系统极大地提升了港口及其相关物流园区对…

Python教程:使用psutil和rich库实现一个终端资源监控小工具(附完整代码)

在本文中,我们将介绍如何使用 Python 的 psutil 和 rich 库来实现一个终端资源监控小工具。psutil 是一个跨平台的 Python 库,用于获取关于系统进程和系统利用率的信息,而 rich 是一个 Python 库,用于在终端中创建美观的输出。 1.…

【LeetCode:1103. 分糖果 II + 模拟】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

山东专升本计算机基础 --- Windows 10 操作系统安全

文章目录 Windows 10 操作系统安全1、Windows 10 系统安装的安全2、系统帐户安全3、应用安全策略4、网络安全策略 Windows 10 操作系统安全 1、Windows 10 系统安装的安全 操作系统的安全和安装操作系统的选项密切相关。 选择 NTFS 文件格式分区组件的定制安装 Windows 10 …