SELF-EXAMINATION BECOMES A FRONTEND MASTER ✨

自省-成为前端大师

目录

• Javascript 基础
  • 变量和类型
  • 原型和原型链
  • 作用域和闭包
  • 执行机制
  • 语法和 API
• HTML 和 CSS
  • HTML
  • CSS
• 计算机基础
  • 编译原理
  • 网络协议
  • 网络安全
• 数据结构与算法
  • Javascript 编码能力
  • 手动实现前端轮子
  • 数据结构
  • 算法
• 运行环境
  • 浏览器 API
  • 浏览器原理
  • Node
• 框架和类库
  • 框架概念
  • React
  • Vue
  • 多端开发
• 前端工程
  • 前端工具
  • Webpack
• 引用

Javascript 基础

变量和类型

• Javascript 规定了几种语言类型

• Javascript 对象的底层数据结构是什么

• Symbol 类型在实际开发中的应用、可手动实现一个简单的 Symbol

• Javascript 中的变量在内存中的具体存储形式

• 为什么要将基本类型存储在栈内存中，而将引用类型存储在堆内存

• 基本类型对应的内置对象，以及他们之间的装箱拆箱操作

• null 和 undefined的区别

• 至少可以说出三种判断 Javascript 数据类型的方式，以及他们的优缺点，如何准确的判断数组类型

• 理解 Map、WeakMap、Set、WeakSet 的区别

原型和原型链

• 理解原型设计模式以及 Javascript 中的原型规则

• instanceof 底层实现原理，手动实现一个 instanceof

• 实现继承的几种方式以及他们的优缺点

• 至少说出一种开源项目(如Node.js)中应用原型继承的案例

• 可以描述 new 一个对象的详细过程，手动实现一个 new 操作符

• 理解 ES6 class 构造以及继承的底层实现原理

作用域和闭包

• 理解词法作用域和动态作用域

• 理解 Javascript 的作用域和作用域链

• 理解 Javascript 中的执行上下文栈，可以应用堆栈信息快速定位问题

• 理解暂时性死区

• this 的原理以及几种不同使用场景的取值

• 闭包的实现原理和作用，可以列举几个开发中闭包的实际应用

• 理解堆栈溢出和内存泄漏的原理，以及如何防止

• 如何处理循环的异步操作

执行机制

• 了解 Javascript 的编译时和运行时

• 为何 try 里面放 return，finally 还会执行，理解其内部机制

• Javascript 如何实现异步编程，可以详细描述 EventLoop 机制

• 宏任务和微任务分别有哪些

• Node 与 Browser EventLoop 的差异

• async/await 如何通过同步的方式实现异步

语法和 API

• 理解 ECMAScript 和 Javascript 的关系

• ES Module 与 Common JS 的区别

• 理解 call、apply 和 bind 三者的作用和区别

• 熟练应用 map、reduce、filter 等高阶函数解决问题

• setInterval 需要注意的点，使用 setTimeout 实现 setInterval

• 掌握 Javascript 提供的正则表达式 API、可以使用正则表达式（邮箱校验、URL 解析、 去重等）解决常见问题

• Javascript 异常处理的方式，统一的异常处理方案

HTML 和 CSS

HTML

• 从规范的角度理解 HTML，从分类和语义的角度使用标签

• XHMTL 和 HTML 的区别

• 元信息类标签(head、title、meta) 的使用目的和配置方法

• 了解 prefetch、preload 的使用方式和功能

• HTML5 离线缓存原理

• attribute 和 property 的区别是什么

• 使用 data- 属性的好处

• CSS 和 Javascript 引入放在 HTML 的位置及原因

• 请说说 Canvas 和 SVG 的区别

CSS

• CSS 都有哪些新的特性和功能

• 了解 CSS 盒模型，在不同浏览器的差异

• CSS 所有选择器及其优先级、使用场景，哪些可以继承，如何运用 at(@) 规则

• HTML 文档流的排版规则，CSS 几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理

• BFC 实现原理，可以解决的问题，如何创建 BFC

• CSS 模块化方案、如何配置按需加载、如何防止 CSS 阻塞渲染

• 了解并实现常用布局（三栏、圣杯、双飞翼、吸顶）

• CSS 中的长度单位

计算机基础

编译原理

• 正则表达式的匹配原理和性能优化

• 如何将 Javascript 代码解析成抽象语法树(AST)

• Base64 的编码原理

网络协议

• 理解什么是协议，了解 TCP/IP 网络协议族的构成，每层协议在应用程序中发挥的作用

• 三次握手和四次挥手详细原理，为什么要使用这种机制

• DNS 的作用、解析的详细过程、优化原理

• CDN 的作用和原理

• HTTP 请求报文和响应报文的具体组成，能理解常见请求头的含义，有几种请求方式，区别是什么

• HTTP 所有状态码的具体含义，看到异常状态码能快速定位问题

• HTTP/1.1、HTTP/2 带来的改变，再说说 HTTP/3

• 了解 HTTPS 协议和原理

• 理解 WebSocket 协议的底层原理、与 HTTP 的区别

• SSE 的原理和如何使用

网络安全

• 请说说 xss、csrf 攻击原理和防范措施

数据结构与算法

Javascript 编码能力

• 多种方式实现数组去重，并对比优缺点

• 实现一个被迭代的 object

• 多种方式实现深拷贝、对比优缺点

• 手写防抖和节流工具函数、并理解其内部原理和应用场景

• 实现一个可以控制并发数的 Promise

• 已知数据格式，实现一个函数 fn 找出链条中所有的父级 id

• 实现数组打平（数组扁平化）

• 实现一个 sleep 函数

• ['1','2','3'].map(parseInt) 结果和原因

• 按照版本号由小到大排序

手动实现前端轮子

• 手动实现 call、apply、bind

• 手动实现符合 Promise/A+ 规范的 Promise

• 手写 JSON.stringify

数据结构

• 理解 哈希表 的基本结构和特点

• 理解数组、字符串的存储原理，并熟练应用他们解决问题

算法

• 常见的排序算法和对应的时间复杂度

运行环境

浏览器 API

• 浏览器的同源策略，如何避免同源策略，几种方式的异同点以及如何选型

• 浏览器提供的几种存储机制、优缺点、开发中正确的选择

• 浏览器事件流模型都有什么

• 原生事件绑定（跨浏览器），dom0 和 dom2 的区别

• DOM 事件中 target 和 currentTarget 的区别

• Web 端 cookie 的获取和设置

• 说说 navigation、location 和 history 对象

浏览器原理

• 可详细描述浏览器从输入 URL 到页面展现的详细过程

• 深入理解浏览器的缓存机制

• 浏览器资源解析机制

• 浏览器解析 HTML 代码的原理，以及构建 DOM 树的流程

• 浏览器如何解析 CSS 规则，并将其应用到 DOM 树上

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

• 浏览器的标准模式和怪异模式

• 什么是 "use strict"，以及好处和坏处

Node

• 掌握一种 Node 开发框架，如 Express、Koa，并了解两者的区别

框架和类库

框架概念

• 虚拟 DOM 是否真的比操作原生 DOM 快

• MVVM、MVC、MVP 三者的区别

React

• React 中的 DOM 更新策略

• React 的事件底层实现机制

• 理解 React 中 onClick 绑定后的工作原理

• React 父组件 props 变化的时候子组件怎么监听

• 什么是高阶组件，受控组件，非受控组件

• useEffect 能完全模拟 componentDidUpdate 么？

• hook 为什么不能出现在控制语句中？为什么要用链表或数组，用其他的数据结构不行么

• useEffect 与 useLayoutEffect 的区别

• 说说 Hook 与普通函数的区别

Vue

• 说一说 Vue 和 React 的区别

• Vue Router 和 React Router 的原理，为什么有了 Hash 模式还需要 History

• Vue 中的 DOM 更新策略

• nextTick 的实现原理

• 手写实现 computed 函数

• 为什么 Vue3 使用了 Proxy 进行数据监听

状态管理

• 理解 Redux 实现原理和其中间件的实现原理

• 理解 Mobx 实现原理，相比于 Redux 有什么优势

多端开发

• 理解 Viewport、em、rem 的原理和用法，分辨率、px、ppi、dpi、dp 的区别和实际应用

前端工程

前端工具

• Babel 的核心原理，可以自己编写一个 Babel 插件

• 理解 npm、yarn 和 pnpm 的区别

Webpack

• Tree-shaking 的原理

• Webpack 中 loader 的作用，有哪些常见的 loader

• Webpack 中 plugin 的作用，有哪些常见的 plugin

• loader 与 plugin 的不同是什么

• Webpack proxy 的工作原理，为什么可以解决跨域问题

项目和业务

• 站在前端的角度说说 toC 和 toB 的不同

引用

• 前端工程师的自检清单

• 前端 100 问