TT语音前端一面面经

box-sizing 有哪些

box-sizing属性有3个值,分别是 content-box、border-box、inherit
content-box 的宽高指内容的宽高(默认值)
border-box 的宽高指 内容的宽高+内边距+边框
inherit 规定应从父元素继承 box-sizing 属性的值。

介绍一下flex布局

参考:flex布局详解

flex布局里面的元素都是一个个item,这些item像inline-block。flex里面分为main axis和cross axis。
flex的属性有:
flex-direction:row || row-reverse || column || column-reverse   定义item的排列顺序,默认row;
flex-wrap:nowrap || wrap || wrap-reverse   是否换行,默认nowrap;
flex-flow:flex-direction flex-wrap   简写,默认row nowrap
justify-content:flex-start || flex-end || space-between || space-around || center   定义内容在主轴上排列;
align-content: flex-start || flex-end || space-between || space-around || center   定义内容在交叉轴上的排序;
align-items:flex-start || flex-end || center || baseline || stretch   定义item的对齐方式;
item上的属性:
order:(number)  最小为0;  设置的数据越大排越前;
flex-grow:(number)  如果有剩余空间,这个item放大的倍数,默认为0,不放大;
flex-shrink: (number)默认为0;   如果空间不足,缩小的倍数;
flex-basis:(length);该item默认的长度;默认是auto(如果未设置长度则根据内容长度决定)
align-self:flex-start || flex-end || center || space-between || space-around;单独定义该item在垂直上的定义。
flex:flex-grow flex-shrink flex-basis;有两个快捷值auto(1 1 auto)和 none(0 0 auto)

实现一个自适应九宫格

flex实现九宫格

清除浮动的方法

有两种办法
一、 在浮动元素后面添加一个闭合元素,让这个元素的内容为空,height为0,css设置clear:both

  • 在浮动元素后面添加一个div,设置clear:both
  • 在浮动元素后面添加一个伪元素,设置clear: both

二、 使父级元素变成BFC(后文有对BFC进行讲解)

  • BFC(块级格式化上下文):BFC是普通流,触发BFC的盒子会独立出来,BFC里面的布局不与外部元素相影响。
  • BFC触发的条件:
  1. position:absolute/fixed
  2. display为inline-block、table、table-cell、table-caption、flex
  3. overflow除visible,既hidden、scroll、auto、inherit
  4. float:除了none,既left、right、inherit
  5. contain:layout/content/paint

什么是BFC

前言

页面都是由一个一个的独立盒子构成的

BFC

BFC是块级格式化上下文,使触发BFC的盒子与外界盒子分离开来,但是这个盒子依旧在普通流中。其实在
作用:

  • 解决margin上下重叠问题
  • 清除浮动
  • 两栏自适应问题(跟清楚浮动一样)

触发条件:

  • 根元素(html)就是一个bfc盒
  • display: inline-block/inline-table/table/table-cell/table-caption/flex
  • postion: absolute/fixed
  • float: 除了none
  • overflow:除了visible
  • contain: layout/content/paint

flex-box 有哪些属性分别是什么作用

容器的属性

  • flex-direction:row | row-reverse | column | column-reverse
    设置主轴的方向
  • flex-wrap:wrap | nowrap | wrap-reverse
    设置是否换行或者是反向换行
  • flex-flow:flex-direction flex-wrap
    设置direction和wrap的快捷属性
  • justify-content:flex-start | flex-end | center | space-between | space-around
    设置item在主轴上的对齐方式
  • align-item:flex-start | flex-end | center | baseline | stretch
    交叉轴上item之间的对齐方式
  • align-content:flex-start | flex-end | center | space-between | space-around | stretch
    设置多根轴线的对齐方式

项目的属性

order: number
设置项目的序号,序号越小越靠前
flex-grow:number
项目放大的比例
flex-shrink:number
项目缩小的比例
flex-basis:auto | number
设置项目的固定长度,auto为项目本来大小
flex:flex-grow flex-shrink flex-basis | auto | none
简写形式
align-self:auto | flex-start | flex-end | center | baseline | stretch
设置项目在交叉轴的对齐方式,该属性会覆盖父级的align-item属性

用过哪些es6语法

什么是promise

promise是一个对象,但是又有回调函数then()。有三个状态pending、fulfilled、rejected。因为用函数调用可能会出现无限循环,promise可以避免这种情况,它接收两个参数resolve(成功)、reject(失败),一旦从pending转到fulfilled时,promise会进入then(),一般我们用then()来捕获成功调用,用catch()来捕获失败的调用。

http和https的区别

一、What is the HTTP

http用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。

1、优点:

  • 灵活可扩展。语义上只规定了,单词之间用空格隔开,段落之间用换行隔开;且可以发送图片、视频。
  • 可靠性。基于TCP传输协议。
  • 一发一收。请求端不限于客户端,也可以是服务端。
  • 无状态。每一条HTTP请求都是独立的、不相关的。

2、缺点:

  • 无状态。无法请求关于上下文有联系的请求。
  • 明文传输。
  • 无法确定消息的可靠性和准确性

3、状态码

  • 1xx: 表示目前是协议处理的中间状态,还需要后续操作。
  • 2xx: 表示成功状态。
  • 3xx: 重定向状态,资源位置发生变动,需要重新请求。
  • 4xx: 请求报文有误。
  • 5xx: 服务器端发生错误。

4、常见状态码

  • 2xx
  • 200 OK。响应体中放有数据
  • 204 No Content。响应头后没有body数据
  • 206 Partial Content。 表示部分内容。它的使用场景为 HTTP 分块下载和断点续传,当然也会带上相应的响应头字段Content-Range。
  • 3xx
  • 301 Moved Permanently。永久重定向
  • 302 Found。 临时重定向
  • 304 Not Modified。协商缓存
  • 4xx
  • 403 Forbidden。服务器禁止访问。
  • 404 Not Found。资源未找到。
  • 405 Method Not Allowed.请求方法不被允许。
  • 406 Not Accepation。资源无法满足客户端的条件。
  • 408 Request Timeout。 服务器等待了太长时间。
  • 409 Conflict。 多个请求发生了冲突。
  • 413 Request Entity Too Large: 请求体的数据过大。
  • 414 Request-URI Too Long: 请求行里的 URI 太大。
  • 429 Too Many Request: 客户端发送的请求过多。
  • 431 Request Header Fields Too Large请求头的字段内容太大。
  • 5xx
  • 500 Internal Server Error: 仅仅告诉你服务器出错了,出了啥错咱也不知道。
  • 501 Not Implemented: 表示客户端请求的功能还不支持。
  • 502 Bad Gateway: 服务器自身是正常的,但访问的时候出错了,啥错误咱也不知道。
  • 503 Service Unavailable: 表示服务器当前很忙,暂时无法响应服务。

二、What is the HTTPS

  HTTPS是在HTTP的基础上加上SSL,对客户端与服务器之间传输的报文进行加密。它以两种方式增加请求的安全性:建立一个安全的通信通道,来保证数据传输的安全 and 确定网站的真是性。

1、https与web服务器建立通信的过程:

  • 客户端发送Client Hello 报文,报文包括支持的SSL版本号和加密组件系列(加密算法和密匙长度等)
  • 服务端发送Server Hello 报文,报文包括SSL的版本号和加密组件(在客户端发送的加密组件系列中选)
  • 服务器发送证书报文,报文中包括公开密匙证书
  • 服务器发送Server Hello Done报文,表示结束,初步SSL握手完成
  • 客户端发送 Client Key Exchange 报文,报文用公开密匙加密,报文包括Pre-master secret的随机密匙串和连接至今全部报文的整体校验值。
  • 服务端发送Change Clipher Spec 报文,告诉客户端我正在接收密钥
  • 服务端发送Finished报文,告诉客户端密钥就收完毕
  • 客户端开始发送HTTP请求
  • 客户端发送close_notify 报文,告诉服务端断开链接
  • 同时,应用层发送数据时会附加一种叫做 MAC(Message Authentication Code)的报文摘要。MAC 能够查知报文是否遭到篡改,从而保证报文的完整性

2、缺点
(1)网络耗时

  • 由于协议的规定,必须要进行的网络传输。比如 SSL 完全握手,302 跳转等。HTTPS协议握手阶段比较费时,会使页面的加载时间延长近50%,增加10%到20%的耗电。

(2)计算耗时

  • 无论是客户端还是服务端,都需要进行对称加解密,协议解析,私钥计算,证书校验等计算,增加大量的计算时间。

(3)开发和运维成本高

  • HTTPS 协议比较复杂,包括协议的配置,证书的更新,过期监控,客户端的兼容等一系列问题都需要具备专业背景的技术人员跟进处理。

(4)成本高

  • 私钥的计算会降低服务器的性能
  • 证书也需要购买

三、从浏览器输入URL到获取服务器数据的全过程

 *参考文章:https://blog.csdn.net/jochebed666/article/details/88377253*

浏览器输入url到HTTP 请求放回完整数据过程
传输流程

  1. 浏览器输入URL,浏览器先判断该URL是否重定向(redirect),若有则重定向URL,再继续下面步骤
    (关于浏览器的缓存,可参考此文章https://www.cnblogs.com/chengxs/p/10396066.html)
  2. 查看浏览器是否有该地址的缓存(查询浏览器缓存、系统缓存,搜索系统的host文件,查询是否有对应的IP),若有直接调用数据;没有缓存则进行下一步
    (参考:https://www.cnblogs.com/chengxs/p/10396066.html)
  3. 将URL发送至DNS服务器(域名解析器),获取IP地址
    (https://blog.csdn.net/jochebed666/article/details/88377253)
  4. 三次握手
    (1)客户端发送SYN数据包,进入SYN_SENT状态
    (2)服务器发送ACK+SYN数据包,进入SYN_RECV状态
    (3)客户端发送ACK数据包。客户端和服务端进入ESTABLISHED状态
  5. 建立SSL/TLS通信
    (参考:https://www.cnblogs.com/zhangyachen/p/8035687.html、https://blog.csdn.net/enweitech/article/details/81781405)
    加密过程
    (1)客户端发送Client Hello 报文,报文包括支持的SSL版本号和加密组件系列(加密算法和密匙长度等)
    (2)服务端发送Server Hello 报文,报文包括SSL的版本号和加密组件(在客户端发送的加密组件系列中选)
    (3) 服务器发送证书报文,报文中包括公开密匙证书
    (4)服务器发送Server Hello Done报文,表示结束,初步SSL握手完成
    (5)客户端发送 Client Key Exchange 报文,报文用公开密匙加密,报文包括Pre-master secret的随机密匙串和连接至今全部报文的整体校验值。
    (6)服务端发送Change Clipher Spec 报文,告诉客户端我正在接收密钥
    (7)服务端发送Finished报文,告诉客户端密钥就收完毕
    (8)客户端开始发送HTTP请求
    (9)客户端发送close_notify 报文,告诉服务端断开链接
    6.四次挥手
    (1)客户端发送FIN包,进入FIN_WAIT1状态
    (2)服务端发送ACK包,进入CLOSE_WAIT状态
    (3)客户端接收到ACK包后进入FIN_WAIT2状态;服务端发送FIN包,进入LAST_ACKZ状态
    (4)客户端发送ACK包,进入TIME_WAITZ状态;经过2MSL时间后进入CLOSED状态;服务端收到ACK包后进入CLOSED状态
    四次挥手
  6. 客户端对获取数据进行解析,渲染

详细过程
1、TCP的三次握手,与服务器建立链接
(参考文章:https://juejin.cn/post/6916085044691861518)
过程如下:
(1)客户端发送带有控制标识码SYN=1,分包序号seq=X(随机获取)的数据包给服务器
(2)服务器接接收到数据包后发送带有控制标识码ACK=1,回应序号ack=X+1;控制标识码SYK=1,分包序号seq=Y的数据包给客户端
(3)客户端接收到数据包后,发送带有控制标识码ACK=1,回应序号ack=Y+1的数据包给服务器,握手结束。

2、 TCP的四次挥手
(1)客户端发送一个 FIN 报文,报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。即发出连接释放报文段(FIN=1,序号seq=u),并停止再发送数据,主动关闭TCP连接,进入FIN_WAIT1(终止等待1)状态,等待服务端的确认。
(2)服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 +1 作为 ACK 报文的序列号值,表明已经收到客户端的报文了,此时服务端处于 CLOSE_WAIT 状态。即服务端收到连接释放报文段后即发出确认报文段(ACK=1,确认号ack=u+1,序号seq=v),服务端进入CLOSE_WAIT(关闭等待)状态,此时的TCP处于半关闭状态,客户端到服务端的连接释放。客户端收到服务端的确认后,进入FIN_WAIT2(终止等待2)状态,等待服务端发出的连接释放报文段。
(3)如果服务端也想断开连接了,和客户端的第一次挥手一样,发给 FIN 报文,且指定一个序列号。此时服务端处于 LAST_ACK 的状态。即服务端没有要向客户端发出的数据,服务端发出连接释放报文段(FIN=1,ACK=1,序号seq=w,确认号ack=u+1),服务端进入LAST_ACK(最后确认)状态,等待客户端的确认。
(4)客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答,且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值,此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态,服务端收到 ACK 报文之后,就处于关闭连接了,处于 CLOSED 状态。即客户端收到服务端的连接释放报文段后,对此发出确认报文段(ACK=1,seq=u+1,ack=w+1),客户端进入TIME_WAIT(时间等待)状态。此时TCP未释放掉,需要经过时间等待计时器设置的时间2MSL后,客户端才进入CLOSED状态。

补充:
一、SSL与STL的区别
(参考文章:https://blog.csdn.net/secondko/article/details/78544143)

  1. STL 是在 SSL 的基础上增加了少数协议(基本与SSLv3.0无异),使其更加安全,SSL更新到版本3.0,STL也称之为是SSL的v3.1。
  2. SSL:(Secure Socket Layer,安全套接字层),位于可靠的面向连接的网络层协议和应用层协议之间的一种协议层。SSL通过互相认证、使用数字签名确保完整性、使用加密确保私密性,以实现客户端和服务器之间的安全通讯。该协议由两层组成:SSL记录协议和SSL握手协议。
    (1)SSL记录协议:建立在安全的传输协议上(如TCP),为高层协议提供数据封装、压缩、加密等基本功能。
    (2)SSL握手协议:建立在SSL记录协议之上,在实际数据传输开始前,对通信双方进行身份认证、协商加密算法、交换密匙。
  3. TLS:(Transport Layer Security,传输层安全协议),用于两个应用程序之间提供保密性和数据完整性。该协议由两层组成:TLS记录协议和TLS握手协议。
    (1)STL记录协议:建立在安全的传输协议上(如TCP),用于封装各种高层协议。
    (2)STL握手协议:允许服务器与客户机在应用程序协议传输和接收其第一个数据字节前彼此之间相互认证,协商加密算法和加密密钥。
  4. TLS的最大优势就在于:TLS是独立于应用协议。高层协议可以透明地分布在TLS协议上面。然而, TLS 标准并没有规定应用程序如何在TLS上增加安全性;它把如何启动 TLS 握手协议以及如何解释交换的认证证书的决定权留给协议的设计者和实施者来判断。
  5. TLS的主要增强内容
    TLS的主要目标是使SSL更安全,并使协议的规范更精确和完善。TLS 在SSL v3.0 的基础上,提供了以下增强内容:
    (1)更安全的MAC算法(STL采用HMAC算法)
    (2)更严密的警报(增加了:拒绝访问、解密失败、未知CA、记录溢出)
    (3)“灰色区域”规范的更明确的定义
  6. TLS对于安全性的改进
    (1)对于消息认证使用密钥散列法:TLS 使用“消息认证代码的密钥散列法”(HMAC),当记录在开放的网络(如因特网)上传送时,该代码确保记录不会被变更。SSLv3.0还提供键控消息认证,但HMAC比SSLv3.0使用的(消息认证代码)MAC 功能更安全。
    (2)增强的伪随机功能(PRF):PRF生成密钥数据。在TLS中,HMAC定义PRF。PRF使用两种散列算法保证其安全性。如果任一算法暴露了,只要第二种算法未暴露,则数据仍然是安全的。
    (3)改进的已完成消息验证:TLS和SSLv3.0都对两个端点提供已完成的消息,该消息认证交换的消息没有被变更。然而,TLS将此已完成消息基于PRF和HMAC值之上,这也比SSLv3.0更安全。
    (4)一致证书处理:与SSLv3.0不同,TLS试图指定必须在TLS之间实现交换的证书类型。
    (5)特定警报消息:TLS提供更多的特定和附加警报,以指示任一会话端点检测到的问题。TLS还对何时应该发送某些警报进行记录。

二、加密的方式
加密过程是: 信息+密钥+算法=密文

  1. 对称加密
    对称加密实质加密和解密都使用同一个密钥,对称加密只有一个密钥,作为私钥。这就好比现实生活中的钥匙和锁,我将想要传达的信息通过对称加密算法用私钥进行加密,形成密文,然后将这密文传送给同样拥有这把锁的“钥匙”的人,对方就用同样的算法和私钥将密文解密出来。
    常用的对称加密算法有DES和AES等
    但是在现实中,这种传输方式并不是特别方便,密钥怎么给对方是一个很关键的问题,而且密钥交给了其他人自己也不是很放心。于是非对称加密出现非对称加密。
  2. 非对称加密
    非对称加密是指加密和解密用的是不同密钥,并且是成对存在的。一把称为公钥,能够放心的交给别人,一把是私钥,只能自己保存。其中用公钥加密的信息只能用私钥解密,用私钥加密的信息只能用公钥解密。

三、数字证书

  • 数字证书就是一段信息,他内部的信息包括:
    (1) 签发证书的机构
    (2)加密算法
    (3)Hash算法
    (4)公钥
    (5)证书到期时间等
    数字证书内容

四、数字签名

  • 为了防止证书颁发的过程中被人修改,又出现了一个数字签名的概念,所谓数字签名就是把证书内容做了一个hash操作生成固定长度的数据发送给服务端B,服务端就能通过自己hash一遍对比发过来的hash来判断内容是否被修改。然而这还是可能被人截取修改内容重新生成hash再发给服务端B,这怎么办呢?出于这个考虑,CA机构在颁发时又会用一个私钥将这个hash加密,这样就防止了证书被修改了。
    证书验证

五、SSL传送数据的过程

  • 传送的内容有: 正文+数字签名+数字证书
    (1)客户端A开启一个新的浏览器访问客户端时,会先让A安装一个数字证书,这个证书主要包含的是CA机构的公钥。
    (2)服务端B发来CA机构给自己的证书,通过CA公钥解密被CA私钥加密的hash1,然后再用B的证书里面的hash算法将信息生成一个hash2,通过比较两个hash,若相等,确认这个数字证书是服务端B的。

  • 由于非对称加密算法复杂度和计算量大,对称加密效率高,SSL就将这两种加密算法混合着用,这样安全和效率就都能保证了。其中具体的过程如下:
    (1)客户端A给出 支持的SSL版本+一个随机数+自己支持的加密方式
    (2)服务端B接收到这些信息后确认加密方式+自己的安全证书+一个随机数发给A
    (3)客户端A确认数字证书有效性(验证方法上面已经说明),然后生成一个随机数,并将这个随机数用B的数字证书公钥加密后发送给A。
    (4)服务端B使用自己的私钥解密这个随机数
    (5)A和B通过第二步确定的加密方法将前三个随机数生成一个对话密钥 用来接下来的通信(个人感觉不需要三个随机数,只用最后一个就够了,这样做可能是为了更安全
    加密过程

四、网络攻击的类型

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值