2021前端社招面试题总结

Flex

flex:1 是flex-grow: 1 flex-shrink:1 flex-basis:0% 的缩写，即项目的放大比例、缩小比例、项目占据空间

Flex:2 = flex-grow: 2 flex-shrink: 1 flex-basis: 0%
Flex:auto = flex-basis:auto跟flex:1效果是一样的， 1 1 auto
Flex:none那每个项目保持不变，还是占据没有使用flex的空间 0 0 auto

如果每个项目都加了flex:1,项目等分空间
如果只有1个项目加了flex:1（flex:2, flex:3…），那么其余项目占据空间不变，此项目占据剩余所有空间

Flex-driction项目排列方向

flex-wrap 项目换行方式

Flex-flow：row nowrap

Vuex

含义和用法

mapGetters :
Cumputed计算方法里用的
mapActions:
methods方法里用的
Map
action里使用commit方法触发mutations里改变state的方法
getters获取state状态

Vuex 数据更新流程：

通过 mapAction 异步提交事件到 action,action 通过 commit 提交到 mutation,然后 mutation会修改 state 中的值，getters 获取state 状态，然后页面中引入 getters 获取更新状态

Mutation 必须是同步的，如果需要异步就要使用 action

action 中使用 this.$store.commit进行同步修改，使用this.$store.dispatch 进行异步修改

mutation 与 action 区别：

Mutation 第一个参数是 state，是改变状态，里边是同步操作。action 是提交mutation,里边可以异步操作

调用 mutation ：

1.引入 mapMutations函数，
methods:{
…mapMutations([‘add’,‘addN’]);
}
this.add()
2.触发 action

Vue渲染过程：

1. new Vue，执行初始化
2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3. 通过Watcher监听数据的变化
4. 当数据发生变化时，Render函数执行生成VNode对象
5. 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

Vue-router如何实现无刷新跳转

前端路由分为两种模式，分别是hash模式和history模式

hash模式

原理实现是通过监听hashchange的改变进行无刷新渲染

history模式

原理通过调用history.pushState（无刷新插入历史状态，更新url）更新url，并且监听popstate回退键事件进行渲染

vue dom diff算法：

先比较dom树，如果有组件不存在了直接销毁；然后比较组件，最后比较element节点，返回一个patch节点包含两个虚拟dom的差异进行渲染

箭头函数与普通函数区别

1.写法不一样
2.箭头函数都没有名字
3.this指向不一样，普通 函数作用域为调用它的对象，箭头函数为当前上下文（如声明在全局那么this的作用域即为上下文）
4.箭头函数不能使用New 实例化

算法时间复杂度：

1.没有循环等复杂结构的都是O（1）
2.有一层循环，算法的性能会随着输入数据的大小变化而线性变化的是O(n)
3.有多层循环，算法性能随着数据呈现数次增长，算法性能为O(n^2)、O(n3)、O(n^4)

call、apply、bind含义与区别

http 状态码

204 无内容，服务器成功处理但未返回内容
205 重置内容，提醒用户刷新
301 页面永久重定向
302页面临时重定向
303 查看其他地址，使用 get post
304该资源未更新
400客户端请求语法错误
404找不到服务器
500服务器内部错误

前端缓存

分为强制缓存和协商缓存，浏览器读取缓存过程为内存-硬盘-服务器缓存

1.强制缓存：Cache-control和expries

Expries 是对比客户端和服务器时间差异，比较缓存是否过期，值为一个时间绝对值
Cache-control相对时间，如300S

2.协商缓存

强制缓存失效后，浏览器携带缓存标识请求服务器，由服务器缓存标识决定是否使用缓存
Last-modified/If-modified-since上次请求返回的最后被修改时间,检查服务器资源是否被更新
Etag/If-node-since返回校验码，etag 保证每个资源都是唯一的

react 生命周期

vue keep-alive

vue event-bus

Nuxt 是如何运行、渲染的

react、vue 如何选型

React 适用于大型工程、多人协作工作，和 ts 配合更好

node、vue、webpack 是什么关系

Vue 本身不依赖webpack，但 vue-cli 里边的webpack环境 依赖 node 开发出来的，webpack 是依赖 node 的
移动端跨平台使用 react native

javascript 常见设计模式

单例模式
工厂模式
发布订阅模式

node+express

script 标签属性

Diff 异步加载

页面防抖、节流

1.Lodash debounce throttle 限制函数在一定时间内的调用次数
2.想要页面在第一次加载时请求，之后使用节流，点击按钮的时候获取当前时间戳，距离当前时间戳 XX 秒后调用节流函数

防抖函数：

节流函数：

前端性能优化

1.Css 文件、js 文件 与html 文件的顺序，将 css 写入行内样式，script 文件放在上边，能保证其与 html 一起渲染，提高渲染速度
2.页面图片资源限制大小、使用 cdn
3.按钮、接口做防止二次点击处理
4.分页加载

事件冒泡

从元素到父元素一直到 window 称为冒泡
从 window 一直到子元素称为捕获
阻止冒泡：1.return false 2.e.sstopPropagation()

ts

算法：

找出两个左边相交面积的左上角与右下角左边
合并两个有序数组，用on1
限制函数并发

Vue父子组件生命周期执行顺序

渲染过程：

父beforeCreate-父create-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

解释：当父组件执行完beforeMount挂载开始后，开始执行子组件的钩子，直到全部子组件挂载到实例上，再开始执行父组件的钩子

子组件触发更新过程：

父beforeUpdate-子beforeUpdate-子mounted-父updated-父beforeUpdate-父updated

销毁过程：

父beforeDestory-子beforeDestory-子destoryed-父destoryed