前端面试题总结原生js+react+vue+webpack+node+算法+计算机基础

+小子日常更新！画地为坑先

ts

类
与js中class类似、修饰符有public、private、protected、readonly
接口
借助interface关键字，对对象进行约束
泛型
在定义函数、类、接口时不指定什么类型，而是在在使用的时候指定

js

闭包

函数外部对函数内部变量保持引用的函数
优点：独立命名空间
缺点：内存泄露
应用：单例模式、防抖

opp（继承、封装、多态）

封装：保存状态和方法，为后续使用做准备，有利于大量数据的维护和使用
继承：避免方法的重复创建，涉及原型对象{
	构造函数继承:[
		call,
		apply
	],
	原型继承:[
		son.prototype = new Preson()
	],
	Object.create（寄生式继承）:[
		son.prototype = Object.create(person.prototype),
		son.prototype.constructor = person.prototype
	],
	ES6继承:[
		class son extends person
	]
}
多态：同一个函数在不同状态下执行不同的内容

原型原型链

每一个引用对象都有一个隐式原型__proto__
每一个函数都有原型prototype
引用类型的__proto__都指向其构造函数的prototype

查找对象属性时会先查找其自身，没查找到会沿着其隐式原型去查找（其构造函数的原型），一直到Object.prototype.__proto__=null

this

在函数定义时是确认不了的，只有在函数执行的时候才能确定this的指向吗，一般来说this指向调用他的对象；
方法中指向方法所在对象；
单独使用指向全局；
函数中指向全局（严格模式下，this未定义undefined）；
事件中指向接收事件的元素；
call\apply可以改变this的指向；

作用域、作用域链

变量与函数可访问的范围；
本作用域查找变量或者函数没有找到时，会去上一层作用域查找相同变量名的变量；

es6

箭头函数、let、const、symble()、set、map、结构赋值、扩展运算符、模板字符串

promise
可跳此

ES5新增异步解决方案，三种状态，两种状态变化；
自身有all、reject、resolve这几个方法，原型上有then、catch方法
promise对象的状态不受外界影响，且状态一旦发生改变就不会再改变

cookie

服务端种在客户端的文件，用于存储用户信息等，在登录成功后再次请求
服务器时，会把cookie也携带上，这样服务器就可以辨别用户及其登录态

图片懒加载

根据滚动条判断
getBoundingClientRect()//获取元素的大小及其相对于视口位置
var bound = el.getBoundingClientRect();
var clientHeight = window.innerHeight;//获取视区高度
//document.documentElement.clientHeight;//获取可视区域高度
bound.top也就是元素距离视口的位置小于等于clientHeight是显示图片

数组的方法
字符串的方法
async await
可跳此

async是ES7新出的特性，表面当前函数为异步函数，不会阻碍代码执行
await表示后面的表达式需要等待结果

react

virtual dom

真实dom的映射，描述了页面的ui，通过render方法渲染成真实dom

生命周期
描述初次渲染与更新过程

初始化属性与状态->componentWillmount->render->componentDidmount
更新：shouldcomponentUpdate->componentwillreceiveprops->componentsWillupdate->render->componentDidupdate
废弃一些生命周期后
static getDriviedStatefromPops -> render->componentDidmount
更新：static getdrivedStatefromProps -> shouldcomponentdUpdate->render->getsnapshortBeforeUpdate->componentDidupdate

render

reactDom.render 会把react元素转为真实dom（babel编译后会调用createElement的方法）

jsx

是react基于js的语法扩展，可以很好的描述ui，展示ui应有的交互

router

react-router-dom
<Route path='' component='' />
<Switch/>
<BrowserRouter/><HashRouter/>
WithRouter()

高阶组件

一个函数接收参数，接收组件（connect(params)(com)）,返回一个含有加工过的组件，组件的属性被加工过

路由跳转

histoy.push()
link

redux
redux-thunk/saga
hooks

useState()hooks中接收一个参数，class可以接受两个
useCallback()返回新的函数，依赖项没有变化的话，依赖缓存，减少创建函数的开销
useMemo()有依赖项,需要return出一个值，来计算状态，有需要计算状态时使用
useContext()用useContext()类似useState()的形式创建变量，在用createContext()创建标签，使用标签.provider包裹住子组件即可传参
useStore()拿到redux的方法getSate()
useSelector()拿到redux中的状态
useDispatch()拿到dispatch方法
useInperativeHandler()配合useref(),把子组件用forwordRef包裹，即可以在父组件使用子组件的方法
useRef()可以用于获取dom节点，也可以使用其保存变量

vue

vdom

vue用js对象描述真实dom，其实就是真实dom的映射

MVVM

model层（jsobj） viewmodel（vue） view（dom）
当model层数据发生改变时，作为核心的vm层会根据监听改变的数据实时更新虚拟dom，将变化映射到view层。
同时，如果用户操作了view层，与客户端进行了交互，那么vm依旧会监听改变的数据将其同步给model层。
符合数据驱动理念。
每一个vue实例都会对应一个wacher实例，watcher会把组件的数据作为依赖，当数据发生改变时render组件

事件修饰符

修饰符可以链式调用
.stop 组织冒泡
.prevent 组织默认行为
.capture 使用捕获
.self 只针对当前元素

生命周期

beforecreated 
created //创建
beforemounted
mounted  //挂载
beforeupdated
updated  //更新
beforedestoryed
destoryed //销毁

描述初次渲染与更新过程

执行vue实例后会自动初始化实例，这个时候就有了生命周期；
在created结束后就可以拿到数据（并在这时生成虚拟dom）；
在mounted之后就可以拿到节点，因为这个时候节点已经挂载了，并完成数据双向绑定；
updated阶段可以拿到最新数据，生成新的vdom，根据补丁去更新视图；
destroyed可以进行善后收尾工作，比如清除定时器及销毁父组件对子组件的重复监听

过滤器

对于即将拿到的值进行格式化
filters: {
	toUpperCase: function (value){
		return value.toUpperCase();
	}
}

动画

在这里插入代码片

导航守卫

1、全局首位
beforeEach（to,from,next）{next()}
2、组件内导航守卫
beforeRouterEnter(){}
beforeRouterUpdate(){}
beforeRouterLeave(){}
3、路由独享守卫
beforeEnter(){}

keep-alive

提供缓存,在包裹动态组件时会缓存不活动的组件实例，而不是销毁

event-bus

event.vue
a.vue
b.vue

vux
v-if/v-for
v-if/v-else/v-show

v-for的优先级更高
v-show控制节点css属性display,v-if则是销毁与创建

key

在v-for时，给子节点加上key属性，方便vue在diff算法时比较同级节点，性能优化

conputed/watch/method

computed是依赖缓存的，如果依赖的属性没有改变的话，多次访问computed属性的话，会直接返回之前计算的结果；需要返回值；根据已有数据派生出所需要的数据；不支持异步；
method会再次执行相关代码；
watch支持异步，不需要返回值，根据某个数据变化而执行相关代码

为何data是一个函数

防止组件重用的时候导致数据相互影响

webpack

与gulp的区别

gulp并不强调模块化，旨在规范前端工程
webpack强调模块化，压缩预处理等都是他附带的功能

核心属性

entry
outpt
module
plugin
optimization
devServe

常用优化plugin

HtmlWebpackPlugin
UgifyJsPlugin

node

可跳此
http模块、fs模块、url模块
commonjs
中间件
express
ejs模板引擎

算法

排序
递归
函数柯里化
手写promise
async、await
深拷贝

计算机基础

http、https、websocket

http
超文本传输协议，规定了计算机网络如何在万维网上通信的传输协议
https = http + 证书验证 + 内容加密 + 完整性校验
[websocket](https://juejin.cn/post/6844903608618582023#heading-9)是一种→html5提供的在单个tcp连接上进行双全工通讯的协议。常用场景有实时聊天等

同源策略

是浏览器安全的基石,放置恶意网站窃听数据，要求请求网站必须协议、域名、端口号相同。
如果非同源：
1、无法发起ajax请求
2、DOM无法获取
3、cookie、localstorage、indexDB无法获取
如何解决呢：
1、设置domin（域名）仅适用于一级域名相同，二级域名不同
2、h5提供的api，window.postMessage()
3、jsonp、websocket、cors

[专业性参考移步](https://juejin.cn/post/6844903580927787015)

垃圾回收机制

浏览器用来追踪内存中的垃圾，在用不到的时候回收垃圾
常见算法有引用计数、标记清除、复制算法
内存泄露：（ie9以前回收算法采用的是引用计数法，如果变量之间相互引用，
GC则无法回收应该被回收的内存，造成了无意义的内存占用）

AST

抽象语法树（AST)抽象表示把js代码进行了结构化的转化，
转化为一种数据结构,这种数据结构其实就是一个大的json对象

base64

有些网络渠道并不支持所有的字节传输
base64就是基于64个可打印字符表示二进制数据的表示方法
扩展（encodeURI\decodeURI）

DNS解析（domain name system）

域名：ip，这种形式的键值对，DNS解析则是反应这种关系，
根据域名找到对应主机地址，发起请求并访问
解析流程分四个部分
1、本地host（不改变线上域名的配置，直接输入域名访问所需要的机器）
2、本地DNS解析
3、DNS服务器缓存
4、DNS服务器查找

CDN作用(content delivery network)

将源站内容发布到接近用户的网络边缘，使得用户就近获取数据
优点：减少源站压力，提升请求速度

编译原理
设计模式

（1）、react的优势

1、单向数据流，专注视图层
2、组件化开发
3、虚拟dom，易于跨端开发

（2）、diff算法的理解

what:目的是为了进行新老dom对比
why:判断更新需求，更小程度的更新需要更新的，从而减少开支
when:页面更新重新渲染

（3）、为什么要单向数据流、组件交互。
（4）、prop和state的区别

初始化属性与私有状态

（5）、前端工程化的理解、如何自己实现一个文件打包，比如一个JS文件里同时又ES5 和ES6写的代码，如何编译兼容他们？
（6）、如何实现垂直和水平居中，多种方法。
定位、flex
（7）、流式布局如何实现，响应式布局如何实现？
（8）、对移动端开发了解多少？
（9）、跨域的方法：自己实现JSONP，如何设计？为什么要跨域？为什么JS会对跨域做出限制？
（10）、原型、原型链、继承如何实现？
（11）、web存储、cookies、localstroge、如何实现一个在一定时间后过期的localstorage、session和cookies的区别、cookies存储在哪？
（12）、let const的优点
（13）、如何自己实现一个promise
（14）、JQ源码的一些问题
（15）、JS如何实现重载和多态
（16）、js的基本类型有哪些？引用类型有哪些？
（17）、null和undefined的区别
typeof(null)
“object”
typeof(undefined)
“undefined”
（18）、Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
（19）、js的继承有哪些？分别列出他们的特点？
（20）、原型链的概念？原型和原型链的区别？
（21）、es6的继承和es5的继承有什么区别？
（22）、vue1和vue2的区别？
（23）、css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？
（24）、用过flex嘛？用flex怎么实现一个直径100px的圆放在屏幕中间？你又有什么其他方法吗？
justify-content && align-item || position
（25）、网络url输入到输出怎么做？
dns解析得到主机名，发起请求拿到资源，解析资源浏览器渲染
（26）、https有几次握手和挥手？https的原理。
3，4 基于tcp和ip
（27）、http有几次挥手和握手？
（28）、TLS的中文名？TLS在哪一网络层？
（29）、负载均衡有哪些方法？
（30）、Dns怎么做负载均衡的原理？dns是基于tcp还是udp？Nginx的原理？正向代理和反向代理的区别？
（31）、网络模型中有几层？Http在哪一层tcp在哪一层？
（32）、浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？
（33）、Nodejs中的Stream和Buffer有什么区别？
（34）、C++中的析构函数有什么作用？
（35）、github的项目怎么样维护？
（36）、排序算法用过哪些？查找用过哪些？他们的复杂度是什么？什么情况下更适合？
（37）、js的设计模式知道那些？
（38）、盒模型
（39）、框架（双向数据绑定 vue，react）
（40）、flex布局
（41）、响应式的原理
（42）、什么情况下使用闭包？
（43）、类式继承
（44）、前端性能
（45）、死锁检测
（46）、浮点型如何存储
（47）、有向图检测环
（48）、数据库如何自己实现表之类的
（49）、C和java的区别
（50）、C如何实现类
（51）、如何将一个html页面解析
（52）、ajax实现原理
（53）、输入网址后如何查找服务器
（54）、服务器如何知道你
（55）、轮播10000张图片过程
（56）、网络层原理
（57）、java的特性
（58）、数据库的四大特性，什么是原子性，表的关系
（59）、ajax跨域