前端科举面经-HTML篇

embedded/2024/9/22 20:57:08/

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/embedded/11730.html

相关文章

vue项目使用百度地图

打开百度地图开放平台 百度地图开放平台 | 百度地图API SDK | 地图开发 在控制台新建应用 复制访问应用的ak 可修改地图样式 使用部分 <!-- 引入地图 --><div class"main-aside"><div id"b-map-container"></div></div> …

电机控制专题(一)——最大转矩电流比MTPA控制

文章目录 电机控制专题(一)——最大转矩电流比MTPA控制前言理论推导仿真验证轻载1Nm重载30Nm 总结 电机控制专题(一)——最大转矩电流比MTPA控制 前言 MTPA全称为Max Torque Per Ampere&#xff0c;从字面意思就可以知道MTPA算法的目的是一个寻优最值问题&#xff0c;可以从以…

Vue--》深入了解 VueUse 功能性工具集

今天博主为大家介绍一款实用性的插件名字叫做 VueUse &#xff0c;它是专门为 Vue.js 生态系统设计的功能性工具集合。其提供了许多可重用的功能函数&#xff0c;可以帮助开发者更轻松地构建 Vue.js 应用程序。其提供了大量的功能&#xff0c;包括状态管理、副作用管理、组合式…

Vue3:响应式数据的基本使用(ref、reactive)

一、前言 在Vue3中&#xff0c;如果数据不是响应式数据&#xff0c;当数据的值发生改变时&#xff0c;页面上的数据是不会发生改变的。因此本文主要介绍Vue3中响应式数据的使用&#xff0c;包括ref和reactive的基本使用。 二、ref 1、ref —— 创建基本类型的响应式数据 re…

汽车研发项目进度管理的挑战与优化策略

随着汽车行业的快速发展和市场竞争的加剧&#xff0c;新车型研发项目的进度管理成为车企赢得市场的关键。然而&#xff0c;由于汽车研发项目通常具有投资大、周期长、技术难度高、参与方众多等特点&#xff0c;项目进度管理面临着诸多挑战。为了提升车型研发效率、缩短研发周期…

Datawhale ChatGPT基础科普

根据课程GitHub - datawhalechina/hugging-llm: HuggingLLM, Hugging Future. 摘写自己不懂得一些地方&#xff0c;具体可以再到以上项目地址 LM&#xff1a;这是ChatGPT的基石的基石。 Transformer&#xff1a;这是ChatGPT的基石&#xff0c;准确来说它的一部分是基石。 G…

【数据结构】红黑树

目录 一、红黑树 1.1 基本概念 1.2 红黑树与AVL树的比较 二、结构和操作 2.1 节点定义 2.2 节点的插入操作 2.3 红黑树的迭代器 2.4 红黑树的模拟实现 三、set、 map的模拟实现 一、红黑树 1.1 基本概念 红黑树是一种二叉搜索树&#xff0c;但在每个结点上增加一个存…

java 学习一

jdk下载地址 配置环境变量