web前端 面试问题总结2020
web前端 面试问题总结2020
本文转自： https://www.jianshu.com/p/ca16020114cd
1. var let const 的区别，以及变量提升，函数提升
- var
1.不存在块作用域
2.可以多次声明（覆盖）
3.存在变量提升：当var a = 1;时候，会先在作用域的最顶端，var a;然后在var a = 1;的位置给a赋值
- let const
1.存在块作用域
经典例题：
for循环给多个dom添加时间，输出for循环的角标i,如果用var声明，因为没有块作用域，var会变量提升到外层作用域最顶端，而多次i赋值，最后只保存了最后一次的值，改成let可以解决这个问题（这就是强行解释，具体为什么let可以解决还需要好好看看let)
2.不可以多次声明
包括function a() {};存在后不能let const a
变量提升和函数提升排序的问题需要理解
2.async/await 原理
3.主进程，宏任务，微任务
宏任务：macrotask 包括：setTimeout、setInterval、postMessage等。
微任务：microtask 包括：Promise.then、await后面的代码。
事件执行顺序：
1.先执行主进程中同步的代码，promise中的代码为同步代码
2.主进程代码执行完毕后执行微任务中的代码，从上到下一个一个放到主进程中执行。
3.微任务执行完毕之后从上到下把宏任务中的代码放到主进程中执行，如果这期间产生微任务，则执行完当前宏任务后重新执行微任务队列，然后继续回到执行宏任务队列
4.重复 2，3
3.iframe通信的方法和优缺点，父子通信，父子跨域通信
方法一 postMessage
// top 是目标iframe，可以使iframe的name属性；target是目标iframe的域名
top.postMessage('数据', target);
// e.currentTarget.parent是他的父iframe
window.addEventListener('message', (e) => {
// 发送回去一条消息
e.currentTarget.parent.postMessage('消息', '*')
});
postMessage优点
1.可以跨域发送消息
postMessage缺点
1.低版本浏览器不支持
方法二 通过调用目标iframe的方法
// 父传子
target.window.fun()
// 子传父
window.parent.window.fun()
优点
缺点
1.不能跨域
2.必须等页面加载完毕才能调用
HTTP常用的Method
简单的请求
HEAD，GET, POST
GET:
1.参数可见
2.可以缓存
3.会生成历史记录
4.长度有限制
POST：
1.参数不可见
2.不可以缓存
3.不会生成历史记录
4.不限制长度
5.数据类型不限制
6.会先提交HEAD请求，得到100响应后才能继续提交
HEAD：
和GET类似，但是不会返回响应主体
特点
1.没有自定义的报文头
2.MIME Type in text/plain、multipart/form-data、application/x-www-form-urlencoded
预检请求
OPTIONS： 主要目的是获取服务器允许的请求方式
特点
1.自定义请求头信息
2.MIME Type Not in text/plain、multipart/form-data、application/x-www-form-urlencoded
其他请求
PUT和PATCH
DELETE：删除资源
TCP和UDP（OICQ，NDS）区别
1.TCP面向连接，必须先建立连接；UDP发送数据之前不需要连接
2.TCP是可靠的链接，不会丢失重复，按顺序到达；UDP不保证可靠
3.UDP效率更高，可以实现实时传输和广播通信
4.TCP是点对点，UDP都可以
5.TCP对系统资源有要求，UDP要求相对较小
TCP过程
1.创建socket socket();
2.设置socket属性，setsocketopt() 可选
3.绑定 ip地址，端口号
4.开启监听 listen()
5.接收客户端的链接， accept()
6.收发数据 send()
7.关闭连接
8.关闭监听
UDP过程
1.创建socket
2.设置socket属性
3.绑定ip，端口到socket上 可选
4.循环的接收数据
5.关闭连接
WebSocket和socket
socket其实是控制传输的接口，底层是操作TCP或者UDP
websocket是应用层的协议，保持连接不断开
node服务器优缺点
优点：事件驱动，是的输入输出性能很高
缺点：cpu计算差，比如做很多计算操作，代码运行效率要求高，所以用底层的语言来做，比如C
io密集型：需要处理比较多的任务
解释型语言和编译型语言
编译型语言:
1.编译时候会判断错误，无法继续编辑
2.效率高，一次编译多次运行
解释型语言：
1.执行时候才会判断错误
2.逐句翻译，执行效率低
require和import
require是commonjs规范，运行时候加载
import是es6规范，是编译时候加载
hash和history
监听hash window.onhashchange
监听history window.onreplaceState
