作为面试官常问的一些初中级前端知识点

作为快 7 年的前端开发，有时会参与公司的招人面试，面试的对象主要是初中级前端人员。一般会先围绕项目经历问一些问题，随后就问一些前端基础知识。下面就谈谈个人常问的一些基础技术问题。

CSS

1. 介绍下 CSS 盒子模型

回答到以下两点就可以：

• 一个盒子由四个部分组成：content、padding、border、margin。两种盒子模型：W3C 标准盒子模型、IE 怪异盒子模型
• 标准盒子模型 width / height 只是内容高度，不包含 padding 和 border 值；IE 怪异盒子模型 width / height 包含了 padding 和 border 值

2. flexbox 布局的属性和使用场景

关于 flex 常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

容器成员属性如下：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

使用场景：实现元素水平垂直方向的居中，以及在两栏三栏自适应布局

3. 移动端自适应方案

• rem 方案
• vw、vh

需要理解细节实现以及开发中单位如何转化，有兴趣可以看这篇文章移动端自适应指北

Javascript

1. ES6 常用的一些特性

1. 解构赋值

const { a = 2 } = { a: null }
const { a = 2 } = { a: undefined }

上面两个 a 的值是什么

1. let、var、const 的区别
2. 怎么优化 const value = a && a.b && a.b.c，这边主要参考 ?. 用法

2. JS 类型检测的方法

• typeof
• instanceOf
• Object.prototype.toString()

需要理解各个检查方法的输出

3.本地存储方式

• cookie
• sessionStorage
• localStorage
• indexedDB

各个存储方式的特点，以及使用场景。

4. 如何判断一个元素是否在可视区域中？

• offsetTop、scrollTop
• getBoundingClientRect，这个 API 的读取值如下

• Intersection Observer

此 API 提供了一种异步观察目标元素与祖先元素或顶级文档视图交叉处变化的方法，简单的来说就是可以检测子元素在父元素中的可见性

5. JS 模块化方案

• 立即执行函数
• CommonJS
• AMD、CMD、UMD
• ES6 Module

大部分情况下主要问 CommonJS 和 ES6 Module 的使用和区别，有时也会问问其他方案。

6. Webpack 常使用的 Loader 和 Plugin

常见的 Loader：

• style-loader: 将 css 添加到DOM的内联样式标签 style 里
• css-loader :允许将 css 文件通过 require 的方式引入，并返回 css 代码
• less-loader: 处理 less
• sass-loader: 处理 sass
• postcss-loader: 用 postcss 来处理 CSS
• file-loader: 分发文件到 output 目录并返回相对路径，wepakck5 asset/resource 内置支持
• url-loader: 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url，wepakck5 asset/inline 内置支持
• babel-loader: 用 babel 来转换 ES6 文件到 ES

常见的 Plugin

• html-webpack-plugin：在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中
• clean-webpack-plugin：删除（清理）构建目录，webpack5 已内置功能 output.clean
• mini-css-extract-plugin：提取 CSS 到一个单独的文件中
• copy-webpack-plugin：复制文件或目录到执行区域，如 vue 的打包过程中，如果我们将一些文件放到 public 的目录下，那么这个目录会被复制到 dist 文件夹中

7. React key 的作用

React 存在 Diff 算法，而元素 key 属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的元素渲染。

进一步可以了解下 React Diff 算法的三个特点

• tree 层级：DOM 节点跨层级的操作不做优化，只会对相同层级的节点进行比较
• conponent 层级：如果是同一个类的组件，则会继续往下 diff 运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的
• element 层级：对于比较同一层级的节点们，每个节点在对应的层级用唯一的 key 作为标识

8. React 事件机制

主要问 React 事件的目的和与原生事件触发的先后顺序。

React 团队在源码中实现了一套事件机制来代替原生浏览器事件，其目的是：

1. 抹平事件对象在不同浏览器上的差异，如：在不同浏览器下阻止事件冒泡（SyntheticEvent 合成事件）；
2. 与底层架构上的任务调度「优先级机制」衔接

React 采用事件委托方式，将冒泡和捕获事件统一绑定在 document， React17 及以后，不再将事件委托到 document 上，而是委托在渲染 React 应用的根 DOM 容器中

9. React useEffect 的使用

对于 useEffect，常问的几点是：

1. useEffect 的使用，两个参数的作用
2. useEffect 怎么模拟 componentDidMount 和 componentDidUpdate
3. 为什么不建议 useEffect 的把第一个函数参数为设置为 async 函数

10. React useRef 的使用

useRef 这块主要问平时的使用

1. 获取 DOM 元素，或者配置 forwardRef 获取组件示例
2. 保存变量，相当于组件的实例变量

11. JSBrige

因为公司项目很多是手机端 h5，所有少不了和原生交互，这块知识点也会问问。

深入浅出JSBridge：从原理到使用

通用知识

1. 谈谈 HTTP 缓存

主要问 HTTP 缓存相关的知识，要了解浏览器请求什么时候会返回 disk cache、304、200。

具体可以看这篇文章图解 HTTP 缓存

2. 使用过哪些设计模式

前端开发中用的比较多的就是策略模式、单例模式、发布订阅、外观模式

总结

面试的题目大都是开发中会使用到的，回答的时候要讲重点，逻辑清晰即可。