2022 秋招前端 字节一面

Http1.0 和 1.1 的区别

最直观的区别是http1.0不支持持久链接，链接无法复用。浏览器的每次请求都会和服务器重新建立tcp连接和慢启动（最开始的发送量会指数级增长，当到达了慢启动阈值的时候进行加法增大，直到出现网络拥塞后重新进行慢启动，通过动态减少发送量缓解网络拥塞问题），并且请求完之后服务器立即断开连接，不跟踪每个浏览器的历史请求。这样会花费大量的时间在建立连接上，当连接数增多时丢包的几率也会增加，更加延长了连接时长。

在http1.1的时候增加了持久链接（connection：keep-alive），即多个http请求可以复用一个tcp连接，在此基础上还提出了管线化技术（pipe lining），即客户端可以在没有接收到服务器的响应之前就可以发送多个请求。有一个弊端，客户端接收的顺序必须是发送的顺序，如果第一个请求的数据未接收到就会一直等待接收第一个数据，即使后面的数据全部接收到——队头阻塞（head of line blocking）。为了缓解队头阻塞带来的影响，可以并发发起多个tcp连接，Chrome浏览器是最多6个并发连接。

Http 1.1 和 2.0的区别

http2.0主要采用了二进制分帧技术和多路复用技术。二进制分帧技术将传输的信息分为更小的帧，并且对其采用二进制格式的编码，首部信息封装到Headers帧里，request会封装到Data帧里。帧的顺序可以乱序发送，最后再通过帧首部的流标识符重新组装。多路复用技术：http2.0可以承载数十或者数百个流的复用，不管是服务器还是客户端都可以在一个连接里随时发送信息。因为可以不再考虑发送的顺序，在一次连接后发送就可以转换为并发发送，充分利用带宽缩短页面加载时间。
http2.0也采用了首部压缩功能，通过构建静态表和动态表可以通过发送索引值来表示头部的部分信息，减少了头部传输的大小。

Http和Https的区别

http的传输使用明文传输，如果攻击者截取了web浏览器和服务器的信息就能直接获取其中的内容。为了解决这一缺陷https在http的基础上增加了SSL/TLS协议（TLS是SSL的升级版），SSL/TLS依靠证书来验证服务器身份，并且进行加密通信。

SSL加密方式

SSL加密方式有对称加密和非对称加密。对称加密只有一个密钥，加密和解密都适用这一个密钥。因为解密也需要使用该密钥，但是密钥如果移交他人就会有风险，非对称加密可以解决这个问题。
非对称加密有一个私钥和一个公钥，公钥和私钥是对应的，私钥加密信息公钥可以解开，公钥加密的信息私钥可以解开。

为了保证我们使用的公钥确实是服务器的不是第三方攻击者的我们就需要使用数字证书，我们获取到服务器的数字证书，将数字证书进行hash运算得到hash1。同时服务端发来CA机构给自己的证书，通过CA公钥解密被CA私钥加密的hash2，对比两个hash，如果相等就确认这个数字证书是服务器的。

移动端自适应

1.rem

rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据屏幕宽度设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是弹性布局的一种实现方式。

html{
	font-size:20px
}
div{
	width:0.5rem
}

最终在浏览器呈现的宽度为20px * 0.5 = 10px
该方法的适应性比较好，相比于百分比显示不会发生形变，自适应效果更好。百分比只能设置固定的高度px，宽度可以设置为百分比，在宽度较大的设备上显示变形。

而rem在形态差别较大的设备上也不会发生形变，但是rem会出现小数像素问题。rem如果转换出来的像素为小数的话在渲染的时候会进行四舍五入，例如转换的大小为33.33px，渲染会按照33px进行渲染，但是实际大小还是为33.33px，多出的0.33px会挤占它旁边的模块，会造成渲染时丢失一部分内容。

2.viewport视口

1vw = 视口宽度1%
1vh = 视口高度1%

该方法是纯css适配方案，不依赖js
哪里都好就是有兼容性的问题

最好的方法还是使用rem+vw的混合方式

前端路由 Hash 和 History 模式

Hash

1. url会有#

2. 改变#后面的内容不会重新加载页面

3. 自动添加浏览器历史记录

4. 浏览器不会全部重新加载页面

5. 后端不能跟踪到前端路由信息

History

1. 美观
2. 每次操作都会添加到历史记录中，即使url都相同
3. 路由跳转的时候页面不会立即刷新
4. 后端可以跟踪路由信息
5. 会出现404问题

为何 History 模式会出现404问题，如何解决？

当我们输入网址vue.com时，会打开dist目录下面的index.html文件，然后通过路由进行后续的跳转，例如vue.com/login。
但是在vue.com/login页面进行刷新的时候，nginx是没有进行配置的，会提示404。

为何Hash模式不会出现这个问题

hash使用的是#进行分隔，vue.com/#/login，hash值为#/login，此时进行页面刷新只有hash符号之前的内容会被包含在http请求中，vue.com会被请求，所以服务器不会产生404。

History模式下如何解决

1. 在nginx配置任何页面都重定向到index.html，路由交由前端进行处理。
2. 如果真的有404的情况产生，就在Vue里覆盖所有路由，然后给出一个404页面。404时找不到页面会自动跳转到404页面。

左右宽度固定，中间自适应

最好的方法使用flex布局

 <div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <style>
    .box{
      width: 500px;
      height: 500px;
      border: black 1px solid;
      margin: 100px auto;
      display: flex;
    }
    .left{
      width: 100px;
      height: 100%;
      background-color: red;
    }
    .right{
      width: 100px;
      height: 100%;
      background-color: yellow;
    }
    .middle{
      background-color: green;
      flex: 1;
    }

效果如下

此时修改左右两侧的大小，中间都会自动填满

flex : 1 : flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

宏任务和微任务

1. 执行顺序： 先执行一个宏任务，遇到微任务时添加到微任务队列中，宏任务执行完毕后执行微任务队列的所有微任务，然后执行宏任务
2. 宏任务：
   script(整体代码)
   setTimeout
   setInterval
   I/O
   UI交互事件
   postMessage
   MessageChannel
   setImmediate(Node.js 环境)
3. 微任务
   Promise.then
   Object.observe
   MutaionObserver
   process.nextTick(Node.js 环境)

箭头函数

var func1 = x => x
var func2 = x => {x}
var func3 = x => ({x})

console.log(func1(1))
console.log(func2(2))
console.log(func3(3))

var func1 = x => x 等价于
var func1 = function (x){
	return x
}
// 1 直接输出

var func2 = x => {x} 等价于
var func2 = function (x){
	x
}
// undefine {}大括号会被识别为代码块

var func3 = x => ({x}) 等价于
var func3 = function (x){
	return {x}
}
//{x:3} 添加小阔后{}会被识别为obj

编程题

实现
sum(1,2,3).sumOf() //6
sum(2,3)(2).sumOf() //7
sum(1)(2)(3)(4).sumOf() //10
sum(2)(4,1)(2).sumOf() //9

function sum(...index) {
  let temp = [...index]
  function sum1(...index1) {
    temp = temp.concat(index1)
    return sum1
  }
  sum1.sumOf = function() {
    let answer = 0
    for(let i=0;i<temp.length;i++){
      answer += temp[i]
    }
    console.log(answer)
  }
  return sum1
}