Web前端最全分享一位同学的阿里、百度前端面经，手撕面简介

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

基本上以上准备，让我面试前增加了不少信心。

【第二部分 面试题目】

---

美团、阿里的具体面试题目，我按照「前端基础知识、前端框架的底层原理、性能优化、计算机网络、算法、前端工程化、项目经验」这七大部分来给大家总结：

1. 前端基础知识，主要从前端四大模块 HTML\CSS\JavaScript\DOM, BOM 方面以及前端框架如React\Vue 等准备。

CSS：

大概会有1-2个问题，主要考察各个常见布局的实现，比如垂直水平居中、双栏布局、随窗口变化的正方形、网格布局等等，一般需要手写代码，这里推荐张鑫旭老师的 CSS 世界，多看几遍足够应对面试。

HTML：

在我面试的过程中这个问的不多，之前 winter 老师有一道面试题，说说你常用的 HTML 标签，然后由这道问题可以延伸出很多细节，进而考察你对 HTML 知识的掌握。

JavaScript：

考察 JavaScript 的细节问题是最多的，通常包括但不限于：

1）JavaScript的基本类型

2）setTimeout、Promise、async/await 三者之间异步解决方案的区别？

3）宏任务和微任务，通常会给出一段代码，让你给出输出结果，并解释？

4）解释 JavaScript 的单线程模型，以及为什么这样设计？setTimeout 的延时为何做不到精确？

5）手写实现 Promise?

6）原型链知识的考察，形式也是给出一段代码，让你给出输出结果，并解释?

7）说说你用过的 ES6 语法的功能点，对 ES2017-9 的新增功能点是否有关注？

8）解释 JavaScript 的闭包？解释 this 指针指向的问题以及常用改变 this 指针指向的函数? apply, bind, call 三者之间的区别？

9）JavaScript 继承的几种方式及优缺点？

10）实现节流或者防抖代码？

11）fetch 是否可以共享 Cookie?两个 then 分别对应着什么？

12）手写代码实现红绿灯效果，红灯3秒，绿灯1秒，黄灯2秒，循环重复?

13）JavaScript 是如何操作 Cookie 的？

DOM API：

这方面也很少被问到，印象中有这几道：

1）如何翻转 DOM？冒泡和捕获机制，实际应用有哪些？

2）冒泡和捕获机制，以及实际应用？

1. 前端框架的底层原理

我们以 React 为例，经常会考察内容包括：

1）setState 的内部实现？

2）什么是虚拟 DOM，引入虚拟 DOM 的目的，虚拟 DOM 一定能解决性能问题么？

3）React Hooks 有哪些了解？

4）react redux 的底层原理？如何完成异步请求？介绍自己常用哪些 redux 中间件？以组合函数的方式手写代码实现中间件的级联功能？

5）react 的 diff 算法了解么？

6）react 的 fiber 算法了解么？

7）react pureComponent 和 Component 有何区别？

8）react 的生命周期，新版和旧版都需要了解

9）react 的单向数据流如何理解？

10）如何设计组件？

11）react memo？

12）react 无尽列表是如何实现的？

1. 性能优化

1）浏览器的渲染原理是一定会被问到的？

2）浏览器输入一个 url 之后的过程，以及过程中应用了哪些缓存，如何优化？

3）script 标签和 link 标签的先后顺序对页面加载的影响？

4）async 和 defer 的区别？

5）react native（因为我的简历中有写到使用过 RN）有哪些坑？

1. 计算机网络

1）解释 TCP/IP 的三次握手和四次挥手？

2）解释跨域问题以及前端常用的解决方案？

3）CORS 的细节，哪些是简单请求？哪些是非简单请求？

4）解释 HTTPS? 解释 HTTP/2？

5）HTTP 报文的格式？

1. 算法

1）手写冒泡排序？

2）给定两组数，分别以链表方式存储，求和？注意进位

3）数组去重？

4）微信红包是如何实现的？

5）给定一组数，求和函数是带延时的网络请求，如何在最快的时间内计算出这组数据的和？

1. 前端工程化

1）webpack 如何拆分大文件？

2）webpack 打包的过程?

3）webpack 的基本配置？

1. 项目经验

这部分大概很多同学都很关心，到底应该怎么写自己的项目经验。出场率最高的问题也是介绍一下你做得最出色的项目？

首先最重要的是，实事求是。

这方面我认为主要考察候选人在工作中所承担的角色，以及平时工作中是否注意积累和总结，其实大多数人平时是不善于总结的，我自己也是，所以平时注意写“详历”是对自己很有帮助的。

关于祥历如何写，极客时间《面试现场》专栏中有提到，我觉得非常好，分享给大家

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

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