[JavaScript知识库]2021Web前端面试必问！

跨域如何解决

解决方案：

1. jsonp(利用script标签没有跨域限制的漏洞实现。缺点：只支持GET请求)
2. CORS(设置Access-Control-Allow-Origin：指定可访问资源的域名)
3. postMessage(message, targetOrigin, [transfer])(HTML5新增API 用于多窗口消息、页面内嵌iframe消息传递),通过onmessage监听 传递过来的数据
4. Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。
5. Node中间件代理
6. Nginx反向代理
7. 各种嵌套iframe的方式，不常用。
8. 日常工作中用的最多的跨域方案是CORS和Nginx反向代理

浏览器的本地存储？各自优劣如何？

1. 浏览器的本地存储主要分为Cookie、WebStorage和IndexDB,其中WebStorage又可以分为localStorage和sessionStorage.

2. 共同点：都是保存在浏览器端、且同源的

3. 不同点：

   1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

   2. 存储大小限制也不同，

   3. cookie数据不能超过4K，sessionStorage和localStorage可以达到5M

   4. sessionStorage：仅在当前浏览器窗口关闭之前有效；

   5. localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

   6. cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

   7. 作用域不同

   8. sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

   9. localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在

   10. cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

token原理

客户端输入用户名和密码，将这次请求提交到服务器，服务器根据用户这次请求验证用户是否存在，验证成功之后，服务器端会向客户端返回一个唯一的token值，客户端需要把服务器端返回的token值记录到客户端本地，之后客户端要请求服务器端的接口就必须要携带token，才能正常的进行操作，因为token是保证你登录成功之后的唯一身份令牌。

说一说你对闭包的理解

闭包是指有权访问另一个函数作用域中的变量的函数

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执m行

• 闭包用途：
  1. 能够访问函数定义时所在的词法作用域(阻止其被回收)
  2. 私有化变量
  3. 模拟块级作用域
  4. 创建模块
• 闭包缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏

vue组件的通信方式

父子组件通信

父->子props，子->父 $on、$emit` 获取父子组件实例 parent、children、Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex

跨级组件通信

$attrs、$listeners Provide、inject

组件化与模块化

??????? 模块化:从代码的的逻辑操作划分的,将不同功能的代码逻辑划分成不同的模块,方便代码的分层开发,方便后期对于代码的维护,确保了每个功能模块功能单一

??????? 组件化:从UI设计角度出发划分的，前端组件化，为了方便UI组件重复使用，相当于在模块化的基础上添加了页面结构

git常用的命令以及与其他版本控制器的区别

常用命令：

 git remote -v 查看远程仓库地址	 
 git remote rm origin 删除当前远程仓库地址
 git remote add origin url  添加新的远程仓库地址
 git add 把要提交的所有修改放到暂存区
 git commit -m ' '  一次性把暂存区的所有修改提交到分支
 rm -rf .git/ 删除git
 git push origin master -u 将文件推送到远程仓库
 git diff 比较的是工作区与资源库的不同
 git diff --staged（比较的是暂存区和资源库的不同）
 git log 查看提交日志(显示从最近到最远的日志)
 git log --oneline 查看提交日志 在一行显示
 git reset --soft HEAD~ 回到暂存区
 git restore --staged 还原
 git revert 恢复文件的历史版本
 git checkout --<file> 撤销修改
 git stash 保存，恢复，删除工作状态
 git branch  dev 创建分支 /git branch 查看当前分支
 git checkout dev 切换分支
 git checkout -b dev 创建并切换（相当于上面两条命令）
 git merge dev 用于合并指定分支到当前分支
 git switch master 切换分支 
 git switch -c dev 创建并切换到新的分支
 git branch -m dev-3 dev-4 重命名
 git branch -d dev-4 删除分支
 git push origin dev 相当于在远程建立一个新的dev分支
 git pull 拉取（每次提交前先pull一下）
 git push 推送

GIT与SVN的区别：

SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而工作的时候，用的都是自己的电脑，所以首先要从中央服务器得到最新的版本，然后工作，完成工作后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作，对网络带宽要求较高。

Git是分布式版本控制系统，每个人的电脑就是一个完整的版本库，工作的时候不需要联网了，因为版本都在自己电脑上。协同的方法是这样的：比如说自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，你们俩之间只需把各自的修改推送给对方，就可以互相看到对方的修改了。Git可以直接看到更新了哪些代码和文件！

前端性能优化的几种方式

浏览器缓存

防抖、节流

资源懒加载、预加载

开启Nginx gzip压缩

三个方面来说明前端性能优化

webpack优化与开启gzip压缩

• babel-loader用include或exclude来帮我们避免不必要的转译，不转译node_moudules中的js文件，其次在缓存当前转译的js文件，设置loader：'babel-loader?cacheDirectory=true'

• 文件采用按需加载等

• 具体的做法非常简单，只需要你在你的request headers中加上这么一句：accepc-encoding:gzip

• 图片优化，采用svg图片或字体图标

• 浏览器缓存机制，它又分为强缓存和协商缓存

本地存储——从Cookie到Web Storage、IndexeDB

• 说明一下sessionStorage和localStorage还有cookie的区别和优缺点

代码优化

• 事件代理

• 事件的节流和防抖

• 页面的回流和重绘

• EventLoop事件循环机制

• 代码优化等