前端常问问题总结（持续更新）

腾讯一面（2次的）+阿里一面（电话面）

网络基础

1. 从输入url到页面渲染的过程

1. 浏览器缓存，是否有url，有的话从缓存取，没的话，请求服务器。
2. 查看ip地址：本地配置host的话，直接取ip，如果没的话，查看本地DNS是否有缓存，没得话迭代访问根域名服务器，一级域名服务器，二级域名服务器等
3. tcp三次握手
4. 发送http请求
5. tcp四次挥手

2. 安全性问题： xss和csrf

1. xss：
   出现原因：跨站脚本攻击，XSS通过在用户端注入恶意的可运行脚本，若服务端对用户输入不进行处理，直接将输入输出到浏览器，浏览器就会执行用户注入的脚本。
   分类：
   1.非持久型：通过get和post方法，向服务端输入数据，用户输入的数据通常被放置在url的请求字符串，或者form中，如果服务端对输入的数据不进行过滤，验证和编码，直接将用户数据呈现给客户，会造成反射型xss
   2.持久型，也叫存储型xss，服务器端和用户输入的恶意脚本直接存在数据库中，每次调用的时候，将数据呈现在浏览器上，XSS跨站脚本攻击一直存在。若其他用户访问该页面，则恶意脚本就会触发，可能回盗取其他用户私人信息。
   解决方法：
2. crsf：
   出现原因：
   解决方法：

3. 网络的七层协议

1. 应用层
2. 表示层
3. 会话层
4. 传输层
5. 网络层
6. 数据链路层
7. 物理层

4.http1.0，http1.1,http2.0, https

1. http1.0
2. http1.1
3. http2.0
4. https
   加入了ssl/tls协议
   协议过程：（以下用C和S分别代替客户端和服务器端）

https过程：

• C向S发起握手请求，并携带密码组合和一个随机字符串str1
• S回应握手请求：S向C发送证书，证书中含公钥，和一个随机字符串str2
• C验证证书是否过期，如果没过期，则用公钥对新生成的随机字符串str3进行加密
• C向S发送这个随机字符串
• S用私钥进行解密（非对称加密到此结束）
• C和S使用相同的算法，利用str1，str2，str3生成一个Key，用于对后面传输内容进行加密
• C发送finished消息，代表客户端就绪
• S发送finished消息，代表服务器端就绪
• C和S成功建立链接，并使用Key进行通信

5.http常见几种状态码
200 成功
301 永久性转移 redirect
302 暂时性转移
304 协助缓存会用
403 无权限
404 资源未找到

6.强缓存和协商缓存

JS基础

1.闭包的作用，实现原理 for循环输出的i一样的话怎么改
闭包是一个函数，而且存在于另一个函数中
闭包可以访问到父级函数的变量，而且这个变量不会销毁
实现原理：利用作用域链，作用域链就是在当前执行环境下访问某个变量时，如果不存在则一直向外层寻找，最终找到最外层或者全局作用域，形成一个链条。
作用：

1. 隐藏变量，避免全局污染
2. 读取函数内部的变量

缺点：

1. 变量不会被垃圾回收机制回收，造成内存消耗
2. 可能造成内存泄漏。JS规定在一个函数作用域中，程序执行完后变量会被销毁，但是呢，闭包外面的变量不会被销毁，因为函数一直被调用，会一直存在，如果闭包使用过多会造成内存销毁

2.手写promise.all和peomise.race方法
3.事件捕获，事件冒泡
事件捕获：当鼠标点击或者出发dom事件时，被触发的元素叫做事件源，浏览器会从根节点到事件源进行传播。
事件冒泡： 事件源到根节点（由内向外进行传播）
addEventListener（event, function, useCapture）：第三个参数默认为false，表示事件冒泡阶段调用事件处理函数
4.事件循环机制
微任务是在es6和node环境中出现的一个任务类型。微任务（micro-task）的API主要有:Promise， process.nextTick
先宏任务，再微任务（jobs），宏任务（task）分为同步任务和异步任务。js引擎执行的时候，如果任务是同步任务，则立即执行，异步任务的话，会申请其他线程来控制，当满足条件时，会把异步任务的回调函数放到任务队列中等待主线程执行。
整体流程：执行一个宏任务（执行栈中没有的话，就从任务队列中获取），执行过程中如果遇到微任务，则将他们加入到微任务的任务队列中。执行栈中的宏任务执行完后，立即执行微任务队列中的所有微任务，如果微任务在产生微任务时，也在这次执行，当前宏任务执行完成后，GUI就开始接管渲染，渲染完毕后，JS线程继续接管，开始下一个宏任务操作，没有的话就从任务队列中读取，加入到执行栈中进行执行

const first = () => new Promise((resovle, reject) => {
    console.log(1)
    const p = new Promise((resovle, reject) => {
        console.log(2)
        setTimeout(() => {
            console.log(3)
            resovle(4)
        }, 0)
        resovle(5)
    });
    resovle(6)
    p.then(arg => {
        console.log(arg)
    })
})
first().then(arg => {
  console.log(arg)
})
console.log(7)
//1 2 7 5 6 3

5. js基本数据类型
null, undefined, string, number, boolean, symbol,
引用数据类型： object, array, function

6. js编译机制及Babel（js编译器）
js是解释性语言，且引擎是单线程的。
解释性就是编译一行，执行一行。
js引擎执行分为三个部分： 语法分析，编译和执行
1、语法分析： 分别对加载完成的代码块进行语法检验，语法正确则进入预编译阶段；不正确则停止该代码块的执行，查找下一个代码块并进行加载，加载完成再次进入该代码块的语法分析阶段。
2、预编译：通过语法分析阶段后，进入预编译阶段，则创建变量对象（创建arguments对象（函数运行环境下），函数声明提前解析，变量声明提升），确定作用域链以及this指向。

• 预编译GO（全局对象）
  如果变量未经声明就赋值，此变量就为全局对象所有；
  一切声明的全局变量，全是 window 的属性
• 函数预编译：（上下文对象AO）
  创建 AO 对象（Activation Object 俗称执行期上下文）；
  找形参和变量声明，将变量和形参名作为 AO 属性名，值为 undefined；
  将实参值和形参统一；
  在函数体里面找函数声明，值赋予函数体。

3.执行阶段：
js是单线程，为防止代码解析阻塞使用一步执行，异步执行是通过时间循环（Event Loop).
js随时单线程，但是有四个线程参与js执行，只是js引擎线程在执行js脚本，其他三个线程协助，不参与代码解析和执行。参与线程是：js引擎线程，即v8引擎，负责js脚本程序的主线程；事件触发线程，控制事件（鼠标，键盘等事件），事件出大线程会把事件的处理函数推到事件队列，等待引擎线程执行；定时器触发线程：只要控制计时器和延时器，满足触发条件，就将定时器处理函数推进事件队列；http一步请求，通过XMLHttpRequest连接后，通过浏览器新开的一个线程，监控readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待JS引擎线程执行。

babel编译器：

code(字符串形式代码) ----> tokens(令牌流) ----> AST（抽象语法树）
经过阶段：
1. 解析： 
1.1 词法分析把字符串形式的代码转为令牌流；
1.2 语法分析就是将令牌流转化为AST；
2. 转换：

以下面代码为例：

   // 面试题
   var a = 1
   function fn() {
       console.log(a)
       a = 3
       console.log(a)
       var a = 2
       console.log(a)
       function a() {}
       console.log(a)
   }
   console.log(a)
   fn()
   console.log(a)

一阶段：var语句进行变量声明，但不进行赋值操作。
如：var a=1; 编译阶段的a=null;
二阶段： function：eg: function fn(){}
function会将fn变量赋值为函数，所以js特性已知的是函数再赋值的时候，内部的内容不会编译执行，只有当调用的时候才会编译执行。
三阶段:执行语句在编译阶段不执行 如：console.log() 和fn()

执行阶段：
7. 节流防抖

CSS基础

1.position几种属性（应补充样例）
relative：相对于原来所在位置的偏移
absolute：相对于非static定位的祖先元素的偏移，会被一处正常文档流
fixed：相对于viewport的偏移，会被移出正常文档流，滚动的时候仍然保持原位
sticky：超过特定阈值的前，是相对定位，超过后是固定定位
static：正常的布局

React相关

1.组件数据传递：父组件向子组件传递，子组件向父组件传递，兄弟组件数据传递
2.useState和this.setState区别之处，同步还是异步
3.useEffect作用：useEffect用于第一次渲染后和每次更新后，不用考虑挂载还是更新，相当于生命周期componentDidMount,componentDidUpdate,componentWillUnmount
4.高阶组件
5.Redux,Dva区别，redux的中间键技术

项目相关

1.项目中遇到的难点
2.【项目】权限管理在前端做有什么安全隐患

笔试题

1.leetcode152 乘积最大子数组