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

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

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

3. 移动端自适应方案

• rem 方案
• vw、vh

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

Javascript

1. ES6 常用的一些特性

1. 解构赋值

js

复制代码

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 容器中