web前端必考面试题

HTML + CSS：

什么是 BFC，它的作用是什么，有哪些触发方式

简单说下 opacity: 0、visibility: hidden、display: none 的区别

说一下 CSS 权重

em、rem、vw、vh、vmin、vmax 分别是做什么的

开发阶段中，img 图片中间为什么会有 4-6px 的间距，而在生产环境就没了

项目做到一半，iconfont 图标库中添加了新的图标，那么如何将单个新的字体图标添加到项目中

Javascript：

简单说下 js 中的变量提升

作用域链和闭包又有什么关系

new 的原理是什么

this 的原理是什么，怎么控制 this 的指向

bind 和 call、apply 最大的区别是什么

简单说下 Event Loop 事件循环机制

简单说下 setTimeout、Promise、Async/Await 的区别

什么是防抖，什么是节流

它们的区别是什么

分别应用到哪种场景中

onmouseover out 和 onmouseenter leave 的区别是什么

onload 和 DOMContentLoaded 是什么

简单说下 js 加载时间线

什么是 base64

为什么转换成 base64 后体积会膨胀

Vue：

Vue 官网明确表示它只是做视图的，那么 Vue 到底是不是 MVVM 框架，以及你对 MVVM 的理解

请说一下 Vue 响应式数据的理解

Vue 中如何检测数组变化

Vue 中如何进行依赖收集

如何理解 Vue中 模板编译原理

Vue 生命周期钩子是如何实现的

Vue 的 2 个生命周期方法 created 和 mounted，你一般在哪一步发送请求，为什么

Vue.mixin 的使用场景和原理

Vue 组件 data 为什么必须是个函数

nextTick 在哪里使用？原理是什么?

Vue.set 方法是如何实现的

Vue 中 diff 算法原理

既然 Vue 通过数据劫持可以精准探测数据变化，为什么还需要虚拟 DOM 进行 diff 检测差异？

简单说下 Vue 中 key 的作用和原理，谈谈你对它的理解

Vue 的组件渲染流程

Vue 组件更新流程

Vue 中异步组件原理

Vue 中函数组件的优势及原理

Vue 组件间传值的方式及之间区别

$attrs 是为了解决什么问题出现的，provide 和 inject 不能解决它能解决的问题吗？

v-if 和 v-for 哪个优先级更高？项目中碰到同时需要这 2 个点地方，你说怎么解决的

v-if，v-model，v-for 的实现原理

Vue 中 slot 是如何实现的？什么时候使用它？

Vue.use 是干什么的？原理是什么？

组件中写 name 选项有哪些好处及作用？

Vue 事件修饰符有哪些？其实现原理是什么？

Vue 中 .sync 修饰符的作用，用法及实现原理

如何理解自定义指令

keep-alive 平时在哪里使用？原理是什么？

你在 Vue 项目中常用的性能优化有哪些？

vue-router + vuex：

linkActiveClass 和 linkExactActiveClass 的区别和作用

parseQuery 和 stringifyQuery 的区别和作用

scrollBehavior 的作用

Vue-Router 有几种钩子函数，具体是什么，以及执行流程是怎样的

简单说下 Vue-Router 中，三种路由模式的区别

vuex 中，mutation 和 action 的区别是什么

vuex 的 subscribe 是做什么的

React：

React 里面为什么不能写 class，而一定要写成 className，有探究过原因吗？

React组件里面，有哪几种操作会导致整个组件重新渲染？

React 的行内样式 style，为什么会有 2 层花括号 {{ }}

组件输出，为什么要用 key

简单说下 props 和 state 的作用和区别

getSnapshotBeforeUpdate 是干什么的，它主要做了什么事

为什么不能再 componentDidUpdate 中更新 state

为什么不推荐在 componentWillUnmount 中做销毁操作

react 中的 ref，和 vue 中的 ref 有什么不同

字符串 ref 和 createRef 的区别

Context 的作用是什么，简单说下 contextType、useContext、Consumer 三种方式

什么是 Fiber，为什么需要 Fiber

什么是 bailing out 机制

为什么所有的 hook，一定要写在顶层，而不能放在if、for、while 中

useLayoutEffect 和 useEffect 的区别

react-router 中，有哪些路由

简单说下它们的作用和场景

react-redux 中，reducer 为什么一定要返回一个新对象，这么做的意义是什么？

react-redux 中，为什么一个 action，可以触发多个 reducer？

这样做意义是什么，有没有什么影响

react-router 和 react-redux 一起用的时候，会产生冲突，有探究过它里面的原因是什么吗

Webpack：

webpack 对 DevServer 中，proxy 你是怎么做的

打包后 map 文件的用途是什么

loader 是做什么的，原理是什么

plugin 是做什么的，原理是什么

Tree Shaking 是做什么的

Code Splitting 是做什么的

在异步加载组件中，有一种语法叫魔法注释，它是做什么的

Prefetching 和 Preloading 的作用分别是什么，主要用在哪些场景下

有做过 Shimming 垫片吗，它主要是解决什么问题的，你一般是怎么做的

混合移动开发：

网页显示问题中，图片模糊、边框问题的原因是什么，如何解决

页面适配，rem 方案中，原理是什么

移动开发中字体你一般用什么单位，为什么

移动开发中，安卓是不支持 cookies 的，如何解决

在 ios 中，meta viewport 是无效的，那么你是如何阻止页面缩放的

在 ios 中，你是如何解决刘海屏的问题

因为我们并不是原生开发，所以在 APP 内其实还是 webview 加载页面，这时候 navigator.userAgent 的内容都是一样的，那么你是如何判断是网页，还是在 APP 中通过 webview 打开的

http + node：

简单说下为什么要进行三次握手？

URI、URL、URN 分别是什么

说下常见的 http code

CORS 跨域的认定标准是什么，为什么不能跨域

缓存头 Cache-Control 的特性和作用

max-age 的生效过程

详细的说下缓存的过程

简单说下 no-cache 和 no-store 的区别

Accept 和 Content-Type 分别是做什么的

简单说下浏览器 TCP 连接的并发限制

cookie 的缺点有哪些

cookie 不安全为什么还要用

session 是如何实现的，什么是 session 劫持，怎么解决

cookie 和 session 的区别

简单说下签名的过程

*********