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 问
