前端面试-HTML篇
- 什么是http?
- http和https有什么区别
- https的加密过程?
- http2.0有什么改进?
- src和href的区别
- 对html语义化标签的理解?
- script标签中defer和asyc的区别?
- 举出几个常见的行内、块级元素
- 什么是webworker？
- iframe的优缺点？
- 介绍一下tcp三次握手
- fetch等某些请求会发送两次请求的原因?
- 浏览器缓存机制
- 在浏览器输入url到渲染页面的过程
- get和post的区别
- 对于跨域的理解.以及如何解决
- [form表单可以跨域吗? 为什么](#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请求是可以拿到其他域的响应数据的,所以是受同源政策限制的.