前端面试题[学习总结]

学习前端面试题

*1.css选择器样式优先级*
2.css实现三列布局(左右固定宽度，中间自适应)
(1)css浮动
第一个float:left，第二个float:right，第三个设置margin-left和margin-right
(2)绝对定位法
第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
(3)flex布局

.left{
	flex:0 0 200px;
}
.right{
	flex:0 0 200px;
}
.center{
	flex:1;
}

3.CSS提高性能优化的方法
内敛首屏关键CSS，异步加载CSS，资源压缩；
合理使用选择器，减少使用昂贵的属性，不使用@import
4.js的防抖和节流
防抖和节流都是防止某一时间频繁发生，但是原理却不一样。
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
使用场景：
防抖：search搜索联想，用户在不断输入值时，用防抖来节约请求。
window触发resize的时候，不断地调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。
节流：鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多。
5.闭包
闭包是函数和函数内部都能访问到的变量(也叫环境)的总和。
6.继承
原型链继承，实例继承，es6继承extends，组合式继承
借用构造函数继承，寄生组合继承，
7.深拷贝浅拷贝以及实现方式
基本数据类型：string，number，Boolean，undefined，null
引用数据类型：object，array，function
JS数据类型分为基本数据类型和引用数据类型，基本数据类型存的是值，引用数据类型存的是引用地址(this指针)。
浅拷贝共用一个引用地址，深拷贝会创建新的引用地址。
Object.assign:对象的合并(第一级属性深拷贝，第一级以下的属性浅拷贝)。
ES6中的Object.assign()，第一个参数必须是空对象。
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
8.数组常用方法以及slice和splice区别
数组常用方法：
join()用指定的分隔符将数组每一项拼接为字符串。
push()向数组末尾添加新元素。
pop()删除数组的最后一项。
shift()删除数组的第一项。
unshift()向数组首位添加新元素。
slice()按照条件查找出其中的部分元素。
splice()对数组进行增删改。
fill()使用特定值填充数组中的一个或多个元素。
filter()过滤功能。
concat()用于连接两个或多个数组。
indexOf()检测当前值在数组中第一次出现的位置索引。
lastIndexOf()检测当前值在数组中最后一次出现的位置索引。
every()判断数组中每一项都是否满足条件。
some()判断数组中是否存在满足条件的项。
includes()判断一个数组中是否包含一个指定的值。
sort()对数组元素排序。
reverse()对数组进行倒序。
forEach()ES5及以下循环遍历数组每一项。
map()ES6循环遍历数组每一项。
find()返回匹配的值。
findIndex()返回匹配位置的索引。

slice()和splice()区别：
splice()改变原数组，slice()不改变原数组。
splice()除了删除之外还可以插入。
splice()可以传递三个参数，slice()接受两个参数。
9.Promise.all和Promise.race区别和应用场景
Promise.all()可以将多个实例组装成一个实例，成功的时候返回一个成功的数组；失败的时候返回最先被reject失败状态的值。
适用场景：比如当一个页面需要在很多个模块的数据都返回来时才正常显示，否则loading。
promise.all()中的子任务是并发执行的，适用于前后没有依赖关系的。
Promise.rece()数组中任务哪个获取的快就返回哪个，不管结果本身是成功还是失败。
适用场景：一般用于和定时器绑定，比如将一个请求和三秒的定时器包装成Promise实例，加入到Promise队列中，请求三秒中还没有回应时，给用户一些提示或相应的操作。
10.微任务和宏任务
宏任务：当前调用栈中执行的代码成为宏任务。（主代码块，定时器等）
微任务：当前(此次事件循环中)宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务事件放在微任务队列中，由JS引擎线程维护。
11.vue中的通信方式，隔代组件的通信解决方式
props/$emit 适用父子组件通信
ref与parent/children 适用父子组件通信
attrs/listeners,provide/inject 适用于隔代组件通信
vuex,EventBus (事件总线)适用于父子，隔代，兄弟组件通信
slot 插槽方式
12.v-show和v-if指令异同点
v-show时css切换，v-if是完整的销毁和重新创建，若频繁切换时用v-show，运行较少改变时用v-if
13.用key的作用
做唯一标识，Diff算法可以正确的识别此节点。作用主要是为了高效的更新虚拟的DOM.
14.简述computed和watch的适用场景
computed：
支持缓存，数据变，直接会触发相应的操作。监听的函数接收两个参数(第一个是最新的值，第二个是输入之前的值)。
当一个属性发生变化时，需执行对应的操作；即一个属性受多个属性影响，多对一的关系。监听的是这个属性自身的变化，且不会操作缓存。
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据发生变化时，触发其他操作，函数有两个参数(一个是计算属性，类似于过滤器，对绑定到view的数据进行处理)
典型使用场景：购物车商品结算。
watch:
是观察的动作。无缓存性，页面重新渲染时值不变化也会执行。
应用：监听props,$emit或本组件的值执行异步操作。
适用场景：当一条数据影响条数据时用watch，如搜索数据。
15.$route和$router的区别
$router是VueRouter的一个对象，通过Vue.use(VueRouter)和vue构造函数得到一个router的实例对象，是一个全局对象，它包含了所有的路由，包含了许多关键的对象和属性。
$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个全局的对象，可以获取对应的name，path，params，query等。
$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews。
$route.params 对象，含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面。
$route.query 对象，包含路由中查询参数的键值对，会拼接到路由url后面。
$route.router 路由规则所属的路由器。
$route.matched 数组，包含当前匹配的路径中所包含的所有片段所有对象的配置参数对象。
$route.name 当前路由的名字，如果没有使用具体路径，则名字为空。
16.vue-router导航钩子
全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截，组件内的钩子，单独路由独享组件。
路由独享钩子可以在路由配置上直接定义beforeEnter
组件内的导航钩子：
beforeRouteEnter 在进入当前组件对应的路由前调用。
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用。
beforeRouteLeave 在离开当前组件对应的路由前调用。
17.vue生命周期
vue实例从创建到销毁的过程，就是生命周期。
即开始创建–>初始化数据–>编译模板–>挂载dom–>数据更新重新渲染虚拟dom–>最后销毁。这一系列的过程就是vue的生命周期。所以mounted阶段真实DOM就已经存在了。
beforeCreate：vue实例的挂载元素el和data都还没有进行初始化，还是一个undefined状态。
created：此时vue的实例对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom。
beforeMount：在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点。
mounted：vue实例已经挂在真实的dom了，可以通过对dom操作来获取dom节点。
beforeUpdate：响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom，比如手动移除已添加的事件监听器。
update：虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数中操作数据，防止死循环。
beforeDestory：vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。
destoryed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。
18.vuex属性使用方法和场景
vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state。
vuex的状态存储是响应式的，当vue组件中store中读取状态时，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从Store中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到计算属性。
Mutation：唯一更改store中状态的方法，且必须是同步函数。
Action：用于提交muatation，而不是直接变更状态，可以包含任意异步操作。
Module：modules，可以让每一个模块拥有自己的state，mutation，action，getters，使结构非常清晰，方便管理；如果所有的状态或者方法1都写在一个store里，会变得非常臃肿，难以维护。
19.vuex中state存储的数据如果页面刷新此时数据还会有吗?
刷新之后销毁了
20.v-bind和v-model的区别
v-bind是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面。
v-model是双向绑定，数据能从data流向页面，也能从页面流向data。
v-bind可以给任何属性赋值，v-model只能给表单类，也就是具有value属性的元素进行数据双向绑定，如text，redio，checkbox，selected。
21.vue中常见的指令

v-text，v-html，v-for，v-show，v-if，v-else，v-cloak，v-bind，v-on，v-model，v-slot

22.改变this指向call，apply与bind的区别。
call和apply可以自动执行，但是bind不会自动执行，需要手动调用。
call，bind，apply区别：前两个有无数个参数，apply只有两个参数，而且第二个参数为数组。
23.vue路由的两种模式
1.hash模式
特点：在url地址上有#号。
实现的原理：原生的hasChange事件来实现，监听hash值的变化。
window.onhaschange=function(){}
刷新页面时不会去发送请求，页面不会有任何问题，不需要后端来配合。
2.history模式
特点：在url地址上没有#号，比较与hash模式看起来好看一些。
实现原理：利用history的api来实现的popState()来实现的。
刷新页面时会去发送请求然后会导致页面出现找不到的情况，需要后端来配合解决。
24.vue的响应式原理
vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()数据劫持，来劫持各个属性的setter,getter，在数据更新时发布消息给订阅者，触发相应监听回调。
当把一个普通js对象传给vue实例来作为它的data选项时，vue将遍历它的属性，用Object.defineProperty()将他们转为getter，setter，在数据更新时发布消息给订阅者，触发相应监听回调。
vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Oberver来监听自己的model的数据变化，通过Compile来解析编译模板指令。
最终利用watcher搭起observer和compile之间的通信桥梁，达到数据变化–>试图更新；视图交互变化–>数据model变更双向绑定效果。
25.flex容器属性
1.flex-direction主轴方向(row默认值)：
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
2.flex-wrap(nowrap默认值):
nowrap：不换行。
wrap：换行。
wrap-reverse：换行，第一行在下方。
3.flex-flow：1，2的简写形式
4.justify-content项目在主轴上的对齐方式(flex-start默认值)：
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框之间的距离大一倍。
5.align-items项目在交叉轴上如何对齐(stretch默认值)：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目第一行文字的基线对齐
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
6.align-content只适用多行的flex布局
26.标准盒模型和怪异盒模型的区别
标准盒大小计算：width(content)+padding+border+margin
怪异盒大小计算：width(content+padding+border)+margin
27.vue插槽(slot)
vue插槽主要分三种：默认插槽，具名插槽，作用域插槽。
vue中的插槽，指的是子组件中提供给父组件使用的一个占位符。
用标签表示，父组件可以在这个占位符中填充任何模板代码，比如html，组件等，填充的内容会替换掉子组件的标签(替换占位符)。
28.vue数据的双向绑定
vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
其核心是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化视图也发生变化，视图发生变化数据也发生变化。
29.Git常用命令
git config：
git中有三层config文件：系统，全局，本地
查看系统config：git config --system --list
查看当前用户(global)配置：git config --global --list
查看当前仓库配置信息：git config --local --list
设置用户名与邮箱：

git config --global user.name "***" #名称
git config --global user.email ****@qq.com #邮箱

git config --local user.name xxx 设置当前项目的用户名为xxx
HEAD当前版本的指针，当切换本地版本时会迅速指向指定版本文件。
master git为我们创建主分支
origin远程仓库的名称
git init 在当前目录新建一个仓库
git init [project-name] 在目录下新建本地仓库
git clone [url] 克隆一个远程仓库
git status [file-name] 查看指定文件状态
git status 查看所有文件状态
git add [file-name] 从工作区添加指定文件到暂存区
git add . 将工作区的被修改的文件和新增的文件提交到暂存区，不包括被删除的文件。
git add -u . 将工作区被修改文件和被删除文件提交到暂存区，不包括新增的文件。
git add -A . 将工作区被修改，被删除，新增的文件都提交到暂存区。
git commit -m [message] 将暂存区所有文件添加到本地仓库
git commit [file-name] 将暂存区指定文件添加到本地仓库
git clean -df 加-d 是指包含目录，加-f 是指强制，删除所有未跟踪的文件
git log 显示所有commit日志
git log --online --decorate --greph --all 查看分支历史，包括提交历史，各个分支的指向以及项目的分支分叉情况。
git push 将文件添加到远程仓库。
git push -f 强制提交
git push origin [branch -name] 推送当前本地分支到指定远程分支
git rm --cached [file name] 删除暂存区的文件
git checkout [branch] 切换分支
git checkout -b [new-branch-name] 创建并切换分支
git reset --hard [commit id] 用指定版本的所有文件撤回到工作区
git branch [branch-name] 创建分支
git branch 查看当前分支
git branch -a 查看本地和远程的所有分支
git branch -r 查看远程所有分支
git branch -d [branch-name] 删除一个分支
git branch -D [branch-name] 强制删除一个没有合并的分支
git merge [branch-name] 用于合并指定分支到当前分支
git switch -c [branch-name] 创建新分支并切换到该分支
git switch [branch-name] 切换到已有分支
git remote add origin 远程地址 关联远程仓库
git fetch 拉取远程分支最新的commit到本地仓库的origin/[branch-name]
git pull 从远程仓库拉取代码到工作空间

linux基本命令：
cd 进入某个目录
pwd 显示当前目录路径
ls(ll) 列出当前目录的文件 ll即ls -l，列出详细信息
touch 新建一个文件
rm 删除文件 rm -rf 强制删除目录
mkdir 新建一个目录
clear 清屏
reset 重新初始化终端/清屏
cat 显示文件内容
30.es6新特性
1.let和const：
let表示声明变量。
const表示声明常量，常量定义了就不允许改，对象除外，因为对象指向的地址没变。若const再声明是必须被赋值。
两者都是块级作用域。
2.模板字符串,
3.解构,
4.函数的默认值,
5.Spread/Rest操作符，扩展运算符三个点...,
6.箭头函数,
7.for of (for of 遍历的是键值对中的值；for in 遍历的是键值对中的键)
8.class类 (原型链的语法糖表现形式)
9.导入导出 (导入import；导出export default)
10.promise (用于更优雅的异步请求)
11.async/await (比promise更好的解决了回调地狱)
12.symbol，新的基本类型
13.set集合(存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构)。
例如数组去重：let arr = new Set(待去重的数组)
31.webpack
1.webpack的作用以及理解：
现在的前端网页功能丰富，特别是SPA技术流行后，js的复杂度增加，需要一大堆依赖包，还要解决Scss，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于webpack的辅助了。
现在流行的三大前端框架官方推出和自身框架依赖的webpack构建工具。
react.js+webpack，vue.js+webpack，angluarJS+webpack。
2.webpack的工作原理：
webpack可以看作是模块打包机：它会分析你的项目结构，找到JS模块以及其他的一些浏览器不能直接运行的拓展语言(如ts,Sass等)，并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，webpack还肩负起了优化项目的责任。
3.webpack打包原理：
一切被视为模块：不管是css，JS，image还是html都可以互相引用，通过定义entry.js，对所有依赖的文件进行跟踪，将各个模块通过loader和plugins处理，然后打包在一起。
按需加载：打包过程中webpack通过Code Splitting功能将文件分为多个chunks，还可以将重复的部分单独提取出来作为comminChunk，从而实现按需加载。把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。
4.webpack核心概念：
Entry：入口，webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output：出口， 告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist。
Module：模块，在webpack里一切皆模块，一个模块对应着一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。
Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并于分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在webpack构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
5.webpack基本功能：
代码转换：typescript编译成javascript，scss编译成css等。
文件优化：压缩js，css，html代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器。
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
6.gulp/grunt与webpack的区别：
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。
grunt和gulp是基于任务和流的。类似jquery，找到一个(或一类)文件，对其作一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。
webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
7.webpack是为解决什么问题而生的：
如果像以前开发时一个html文件可能会引用十几个js文件，而且顺序还不能乱，因为他们存在依赖关系，同时对ES6+等新的语法，less，sass等css预处理都不能很好的解决，此时需要一个处理这些问题的工具。
32.MVVM
1.mvvm相比较于mvp，将presenter变成viewmodel，viewmodel可以理解成view的数据模型和presenter的合体。
2.mvvm中的数据可以实现双向绑定，即view层数据变化则viewmodel中的数据也随之变化，反之viewmodel中数据变化则view层数据也会变化。
注：MVC指的是model-view-controller，分别代表着模型层，视图层，控制器。
33.原型链
当JS试图得到一个对象的属性时，会先去这个对象的本身寻找，如果这个本身没有找到这个属性，那么JS就会去它构造函数的prototype属性中寻找，也就是去proto中寻找，如果prototype属性本身中依旧没有找到，prototype中依旧有一个proto。
原型可以的问题：对象共享属性和方法。
谁有原型：函数拥有prototype；对象拥有proto。
对象查找属性或者方法的顺序：先在对象本身查找–>构造函数中查找–>对象原型中查找–>构造函数的原型中查找–>当前原型中查找
原型链的顶端是null。
34.闭包
闭包就是指有权访问另一个函数作用域中的变量的函数。mdn上说闭包是一种特殊的现象。
闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
闭包的注意事项：
通常，函数的作用域及其所有变量都会在函数执行结束后被摧毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。
闭包三个特性：
函数嵌套函数；函数内部可以引用函数外部的参数和变量；参数和变量不会被垃圾回收机制回收。
闭包优点：
(1)保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突。
(2)在内存中维持一个变量，可以做缓存(但使用多了同时也是一项缺点，消耗内存)
(3)匿名自执行函数可以减少内存消耗。
闭包缺点：
常驻内存会增大内存使用量，并且使用不当很容易造成内存泄漏。
如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。
35.vue和react区别
(1)核心思想不同
vue是一个灵活易用的渐进式双向绑定的MVVM框架。
react的核心思想是声明式渲染和组件化，单向数据流，react既不属于MVC也不属于MVVM架构。
注：react的单向数据流指的是数据主要从父节点通过props传递到子节点。如果顶层某个props改变了，react会重新渲染所有的子节点，但是单向数据流并非单向绑定，react想要从一个组件去更新另一个组件的状态，需要进行状态提升，即状态提升到他们最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那麽各组件的状态改变就会变得难以追溯。
(2)组件写法不同
vue的组件写法是通过template的单文件组件格式。
react的组件写法是JSX+inline style，也就是把html和css全部写进js中。
(3)Diff算法不同
diff是一种对比算法，主要是对比旧的虚拟DOM和新的虚拟DOM，找出发生更改的节点，并只更新这些节点，而不更新未发生变化的节点，从而准确的更新DOM，减少操作真实DOM的次数，提高性能。
vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性。
vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次对比的方式，当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效。
(4)响应式原理不同
react主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。
vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和setter，每个vue组件实例都有一个对应的watcher实例，在组件初次渲染时会记录组件用到了哪些数据，当数据发生改变时，会触发setter方法，并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法，进行渲染数据。
36.rem特点
1.rem的大小是根据html根目录下的字体大小进行计算的，是所有DOM节点对于根节点html的相对值。em字体大小是根据父元素字体大小设置的。
2.当我们改变根目录下的字体大小时，下面字体都改变。
3.rem不仅可以设置字体大小，也可以设置元素宽，高等属性。
4.rem特点与换算：
浏览器默认字号是16px，因此如果没有设置根节点html的字号，这将会是一个默认基数。
rem与px的换算：px=rem*设置的根节点字号
注意：html字体大小最小为12px，如果设置为10px，则换算后仍然按照12px计算。
37.http请求过程
浏览器发起请求–>解析域名得到ip进行tcp连接–>浏览器发送http请求和头信息发送–>服务器对浏览器进行应答，响应头信息和浏览器所需的内容–>关闭tcp连接或保持–>浏览器得到数据进行渲染。
38.前端跨域
出自浏览器同源策略限制，当一个请求url的协议，域名，端口三者之间任意一个与当前页面url不同即为跨域。
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
(1)JSONP原理：
利用script元素的开放策略，网页可以得到从其他来源动态产生的JSON数据。
但是jsonp请求一定需要对方服务器做支持才可以。
JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。
缺点是仅支持get方法具有局限性。
(2)CORS原理:
实现CORS通信的关键是服务器，需要在服务器做改造。
只要服务器实现了CORS接口，就可以跨源通信。
在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址，同源策略默认地址是网页本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那麽就不会拦截请求响应。
3.Nginx:
浏览器在访问受限时，可通过不受限的代理服务器访问目标站点。
proxy代理是前端用的最多的解决跨域的方法。即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，而后因为浏览器和代理服务器端口一致，不存在跨域问题，因此浏览器不会拦截从代理服务器收到的数据，顺利拿到请求数据。

例如：浏览器端口8080，目标服务器端口5000，在vue中配置代理服务器来访问目标服务器。
//vue.config.js中配置代理
devServer:{
	proxy:"http://localhost:5000"
}
//使用代理
axios.get('http://localhost:8080/students').then(
	response => {
		console.log('请求成功了',response.data)
	},
	error => {
		console.log('请求失败了',error.message)
	}
)

39.vue中的keep-alive
keep-alive是vue的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染DOM；
keep-alive是包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；
设置了keep-alive缓存的组件，会多出两个生命周期钩子(activated 和 deactivated)。
activated：当组件被激活时会自动触发。页面激活后，即进入页面就触发。
deactivated：当组件被缓存时会自动触发。
activated 和 deactivated在服务端渲染期间不被调用，即在挂载后和更新前被调用。但如果该组件中没有使用缓存，也就是没有被 < keep-alive > 包裹的话，activated是不起作用的。
40.vue.nextTick()方法
在下次DOM更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的DOM。

this.$nextTick(function(){
	console.log(that.$refs.aa.innerText);
})

vue.nextTick()使用时间：
(1)Vue生命周期的created()钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中。因为是在created()钩子函数执行的时候DOM其实并未进行任何的渲染，而此时进行DOM操作无异于徒劳，所以一定要将DOM操作的js代码放进vue.nextTick()的回调函数中，与之对应的是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
(2)vue改变dom元素结构后使用vue.nextTick()方法来实现dom数据更新后延迟执行后续代码。
41.组件化，模块化和工程化的理解
(1)组件化：把重复的代码提取出来合并成为一个组件，组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。组件化更多关注UI部分，每个组件有独立的html,css,js代码，可以根据需要把它放在页面的任意位置，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。
(2)模块化：分属同一功能/业务的代码进行封装，让它成独立的模块，可以独立运行，以页面，功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。侧重功能的封装，主要是针对js代码，隔离，组织复制的js代码，将它封装成一个个具有特定功能的模块。模块可以通过传递参数的不同修改这个功能的相关配置，每个模块都是一个单独的作用域，根据需要调用。一个模块的实现可以依赖于其他模块。
(3)工程化：前端工程化不是具体的某项技术和方法，只要我们引入的方法，技术方案，工具可以提升开发效率，提高前端应用质量，那么都属于前端工程化。前端工程化就是通过一系列工具，方法，工程化的思维，将成千上万个模块，组件或其他静态资源进行有序，规范，标准化，可控，可追踪的组织起来，作为一个整体运行，以便提高前端工程的性能，稳定性，可用性，可维护性等。
优点：复用编码；简化项目编码；提高运行效率。可维护性强；避免阻断；版本管理更容易。
如何做到前端工程化：页面组件化；代码模块化；代码质量管理(ESLint)；代码编译(babel,less,sass,scss等)；代码构建(webpack)；项目国际化；代码版本管理(Git，SVN)。
React
42.JSX
jsx是js语法的一种语法扩展，并拥有js的全部功能。jsx生产react元素，可以将js表达式封装在花括号里，然后将其嵌入到jsx中。在编译完成之后，jsx表达式就变成了常规的js对象，这意味着你可以在if语句和for循环内部使用jsx，将它赋值给变量，接受它作为参数，并从函数中返回它。
43。调用setState之后发生了什么
在代码中调用setState函数之后，react会将传入的参数与之前状态进行合并，然后触发所谓的调和过程。经过调和过程，react会以相对高效的方式根据新的状态构建react元素树并且着手重新渲染整个UI界面。在react得到元素树之后，react会计算出新的树和老的树之间的差异，然后根据差异对界面进行最小化重新渲染。通过diff算法，react能够精确知道哪些位置发生了变化以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

• 在setState的时候，react会为当前节点创建一个updateQueue的更新队列。
• 然后会触发reconciliation过程，在这个过程中，会使用名为Fiber的调度算法，开始生成新的Fiber树，Fiber算法的最大特点是可以做到异步可中断的执行。
• 然后react scheduler会根据优先级高低，先执行优先级高的节点，具体是执行dowork方法。
• 在dowork方法中，react会执行一遍updateQueue中的方法，以获得新的节点，然后对比新旧节点，为旧节点打上更新，插入，替换等tag。
• 当前节点dowork完成后，会执行performUnitOfWork方法获得新节点，然后再重复上面的过程。
• 当所有节点都dowork完成后，会触发commitRoot方法，react进入commit阶段。
• 在commit阶段中，react会根据前面为各个节点打的tag，一次性更新整个dom元素。
  44.TypeScript
  TypeScript又叫静态的JS，不直接引入html中，扩展了js的语法，不能直接被浏览器识别，需要经过ts转换器或babel转换后才能使用。
  静态语言是在编译期间就会做数据类型的检查，也就是在写代码的时候就声明变量的数据类型，如ts，java，php等。
  动态语言是指在运行期间才会做类型检查的语言，也就是说动态语言声明时不需要指定数据类型，比如js，python等。
  45.浏览器兼容性
  浏览器网络问题
  有问题请指正，谢谢~