前端科举八股文-HTML篇

ops/2025/1/16 2:34:25/

html" title=前端>前端面试-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_37">对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标签。
他的优势是(其实没啥优势,主要是它的能力赋予了它一定的适用场景)
比如他形式的特殊性可以用来嵌入网页广告。
第二个是它可以和主页面通信,所以可以用来做微html" title=前端>前端解决方案,比如腾讯开源的无界方案就是基于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.ppmy.cn/ops/25581.html

相关文章

图论单源最短路径——spfa

【模板】单源最短路径(弱化版) 本题用的spfa 题目背景 本题测试数据为随机数据,在考试中可能会出现构造数据让SPFA不通过,如有需要请移步 P4779。 题目描述 如题,给出一个有向图,请输出从某一点出发到…

sym和syms--Matlab学习

一、sym sym是 MATLAB 中的一个函数,用于创建符号对象。 符号对象允许你在 MATLAB 中进行符号计算和代数运算,而不仅仅是数值计算。使用符号对象,你可以表示符号表达式,求解方程,进行符号积分等。 例如,你…

【MySQL】表的约束

【MySQL】表的约束 文章目录 【MySQL】表的约束前言正文空属性默认值列描述zerofill主键自增长唯一键外键 前言 ​ 对于表来说,真正约束字段的是数据类型,但是数据类型约束很单一,我们需要有一些额外的约束,更好的保证数据的合法…

2012NOIP普及组真题 2. 寻宝

线上OJ&#xff1a; 一本通&#xff1a;http://ybt.ssoier.cn:8088/problem_show.php?pid1958 核心思想&#xff1a;&#xff08;模拟&#xff09; 1、模拟 每一层从起始房间开始&#xff0c;轮询 x 个有楼梯的房间后到达终点房间 2、由于 0 < N ≤ 10000 &#xff0c; 0…

VS2019编译OSG3.7.0+OSGEarth3.3+OSGQt5.15.2时遇到的问题及解决方法

注:本次编译以文章《VS2019编译OSG3.7.0+OSGEarth3.3+OSGQt》为基础搜集资料并进行编译 一 OSG编译 1.Osg3.7.0编译中,cmake阶段按照文章步骤即可。 2.另外,还需要对以下三项进行设置,参照《OSG-OpenSceneGraph在WIN10与VS2022下的部署(OSG3.6.5+VS2022+Win10_x64)个…

多服务器上的 docker 实现互相访问

场景&#xff1a; Server_1上有一个docker容器 containerXServer_2上有一个docker容器 containerX…Server_n上有一个docker容器 containerX 如何实现着 n 个docker之间的互相访问呢&#xff1f; 实现方式&#xff1a; Step1&#xff1a;配置一个通用的容器 新建一个容器&a…

OpenHarmony 实战开发——智能指针管理动态分配内存对象

概述 智能指针是行为类似指针的类&#xff0c;在模拟指针功能的同时提供增强特性&#xff0c;如针对具有动态分配内存对象的自动内存管理等。 自动内存管理主要是指对超出生命周期的对象正确并自动地释放其内存空间&#xff0c;以避免出现内存泄漏等相关内存问题。智能指针对…

安卓手机APP开发_媒体开发部分__保持设备处于唤醒状态

安卓手机APP开发_媒体开发部分__保持设备处于唤醒状态 目录 概述 使用唤醒锁的用法 保持屏幕在亮着 电视的环境模式 保持CPU处于运行状态 概述 为了避免多消耗电池电量,安卓设备会很快进入休眠状态.然而,也是需要保持它一直 处于唤醒的状态,来完成某些工作. 你使用的方…