Web前端最全面试官常问的一些初中级前端知识点(2)，一份非常适合收藏的Web前端进阶面试题

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

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

9. React useEffect 的使用

对于 useEffect，常问的几点是：

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

10. React useRef 的使用

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript