前端知识结构

  • JavaScript 基础
    • 数据类型及其判断方式、判断对象是否为空
    • bindapplycall 及其实现
    • script 标签加载的顺序
    • 三种作用域
    • 数组去重
    • 对象的深浅拷贝的区别
    • 对象深拷贝的方法
    • 继承方式
      • 原型链继承
      • 经典继承
      • 拷贝继承
      • 原型式继承
      • 寄生组合式继承(经典继承 + 原型式继承)
    • 立即执行函数(IIFE)的定义、应用和作用域
    • 前端路由类型及表现
    • 闭包及其应用
    • 算符优先级(包括二进制运算符)
    • 内存泄漏的定义、识别和处理方法
    • 面向对象的理解
      • 管理、分类数据
      • 高内聚、低耦合
    • 函数式编程的理解
      • 输入唯一确定输出
      • 无副作用
    • 防止递归爆栈、尾调用优化
    • 函数柯里化
    • 函数重载的实现
    • 事件流、事件的捕获、冒泡机制
    • addEventListener
    • this 的指向(包括 ES 6 箭头函数)
    • Object.defineProperty
    • 原型、原型链、类
    • 防抖、节流及其应用
    • 前端路由
    • 垃圾回收机制底层原理和实现
    • requestAnimationFrame
    • DOM 级别
    • DOM 事件级别
    • 跨域的解决方式(JSONP、响应头、反向代理等)
      • 扩展:正向代理和反向代理的应用
    • 浏览器和 Node.js 事件循环机制(同步/异步、宏任务/微任务的调度方式)
    • XHR、Axios、Fetch 相同点和区别
    • 轮播图的实现
    • ES 6+
      • Promise
        • 手写实现
        • then 链的处理
        • 基本用法、allretry
      • 字符串、数组、对象扩展的 API
      • 变量扩展
        • letconst
        • 解构赋值
        • 块级作用域
        • 暂时性死区
        • 变量提升
        • 使用 let 解决循环体的循环变量泄漏
      • 函数扩展
        • 箭头函数
        • 默认参数
        • rest 参数
      • 展开运算符
      • 模板字符串
      • SetMap 数据结构
      • 迭代器和生成器函数
        • nextyield 的理解
      • Proxy 对象
        • 属性的读取(get)和设置(set)相关操作
      • async/await
        • 异步编程的终极方案 Promise + Generator 的语法糖
      • Proxy 与 Object.defineProperty 的优劣
    • 模块化
      • UMD、CMD、AMD 规范
      • CommonJS 规范
        • module.exports 的用法、特性
        • exports.xxx 的用法、特性
        • 循环导入、导出
      • ES Module
        • 与 CommonJS 规范的对比
        • 循环 exportimport
      • 项目分类、各类文件整理、分类
      • 各类功能封装
      • 组件和功能模块的抽离、解耦、复用
    • 框架
      • 优化
        • 首屏优化方法
      • Dva/Redux
        • 数据流向
        • 工作流程和整体架构
        • 操作原语
      • React.js
        • 基本特征和特性
          • JSX 原理
          • 生命周期钩子
        • setState 到底是同步的还是异步的
        • setState 工作原理
          • dirtyComponent
          • isBatchingUpdate
          • setState 任务何时加入队列,何时处理
        • Virtual DOM
          • fiber 算法
          • diff 算法
          • patch 算法
        • 高阶组件(HOC)
          • 两种形式
          • 本质
          • 修饰器写法
        • 无状态函数式组件的声明和 React Hooks
          • useContext 和 React Context 的关系
        • React Mixin
        • React render 渲染过程,何时执行,何时完成
      • Vue.js
        • 基本特征和特性
          • 双向数据流的特性、原理
          • 文件结构特性
          • 生命周期
          • Vue.prototype
        • ES 6 Proxy 在 Vue 中的应用
        • 数据响应式原理
        • 路由导航守卫
        • 实例化仓库的 5 大属性的使用
          • state
          • getters
          • mutations
          • actions
          • modules
        • 辅助函数 mapState
        • 向父组件传值(Event Bus)
        • Virtual DOM
          • diff 算法
        • $nextTick
      • React 和 Vue 的对比
        • 从架构上(MVVM 等)
        • 从数据流上(双向绑定)
        • 从属性变化感知的粒度上(或从底层原理分析两者的实现上的不同)
        • 从组件的代码结构上
        • 从 Virtual DOM 上
        • 从路由机制上
        • 从组合功能上(mixin、HoC等)
    • 架构
      • MVC 和 MVP
      • MVVM
      • Flux、Dva 和 Redux + Redux Saga
      • RxJS 原理
    • 设计模式
      • 观察者模式
      • 发布者-订阅者模式
      • 单体模式
      • Mixin 模式
      • 工厂模式
      • 原型模式
      • 中介者模式
      • 享元模式
      • 装饰模式
    • 工程化
      • Webpack
        • 常用配置
        • Webpack 3 和 4 的特性对比
        • Webpack 和 Grunt、Gulp 相比的区别
        • Loader 和 Plugin 的区别
        • 打包过程、优化
        • 实现 Loader 和 Plugin 的思路
  • CSS / CSS 3 基础
    • 三原色定理、三基色定理
    • HSL、HSV、RGB 模型
    • 常用的布局方式
      • 页面构造方式
        • 双飞翼
        • 圣杯
        • “厂”字形
      • Flexbox 布局
      • position 布局(特别注意新特性:sticky
      • z-index 深入理解
      • Float 布局
    • 响应式原理(分析 Bootstrap 采用的媒体查询方式的栅格化布局)
    • 居中布局
    • 动画、移动、3D移动等
      • transform
      • translate
      • transition
      • animation
    • 移动端适配
      • 物理单位的梳理
      • Flexible(rem)适配方案
      • vw 适配方案
    • CSS 盒子模型
      • W3C 标准的盒子模型与低版本 IE 盒子模型的对比及互相转换
      • 通过 DOM 获取盒子的宽高等属性
    • BFC 规范及对其的理解
    • 层叠上下文以及七阶层叠水平图
    • 选择器的优先权
    • 几种常用的水平、垂直局中方案
    • 0.5 px 问题及解决方案
    • 隐藏元素的几种方法及其区别(displayvisibility
    • 内联元素和块级元素
      • 高度如何确定及有效性
      • 两者之间的转换
    • 百分比宽高的有效性问题
    • 伪元素的概念和使用方式
    • positiondisplayoverflowfloat 相互叠加及其优先级规则
    • 几种常用的图片格式及其区别
    • 全屏滚动、视差滚动效果
    • rgba()opacity 实现效果上的区别
    • em 单位的相对对象
    • CSS 实现列布局/瀑布流
    • 单词间距和字母间距(letter-spacing word-spacing
    • 如何避免 FOUC 现象(使用 link 标签加载,考虑 HTML 的顺序加载)
    • link 与 @import 的区别
    • 渐进增强、优雅降级(https://www.jianshu.com/p/d313f1108862
  • HTML / HTML 5 基础
    • XHTML 和 HTML 的区别
    • DOCTYPE 的作用、标准模式与混杂模式
    • HTML 5 为何只需要写 <!DOCTYPE html>
    • DOCTYPE 的取值
    • title 属性和 alt 属性的作用
    • meta 标签的各个属性
    • Canvas
    • iframe 的优缺点
    • 对于语义化的理解
    • 对于结构化的理解
    • SEO 优化的要点
    • cookielocalStoragesessionStorage的区别
    • 可替换元素的特性
    • HTML 5 的新特性
      • data-*
      • className
      • 拖拽 API
      • Canvas API
      • 地理位置信息
  • Web 规范
  • 数据结构
    • 栈的定义、实现及其应用
    • 队列
      • 单链队列的实现及其应用
      • 循环队列的实现及其应用
    • 链表的递归实现
      • 基本概念和应用场景
      • 二叉树的定义、实现及其应用
      • 二分查找树的定义、与二叉树的区别和联系、实现及其应用
      • 二叉树寻找共同祖先
      • AVL 树
      • 红黑树
      • 有向图与无向图
      • 邻接矩阵和邻接表
      • 广度优先遍历算法和深度优先遍历算法
      • 求节点间的最短距离
    • 哈希表
  • 算法基础
    • 排序算法
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 快速排序
      • 堆排序
      • 桶排序
      • 归并排序
    • 时间复杂度计算
      • 最好复杂度
      • 最坏复杂度
      • 平均复杂度
      • 均摊
    • 数组的扁平化(Flatten)
    • 思想
      • 动态规划
      • 贪心
      • 分治
      • 回溯
  • 计算机网络 / HTTP
    • TCP、UDP
      • TCP/IP 五层模型,每层有哪些协议
      • TCP 协议报文格式,工作在什么层
      • TCP 三次握手、四次挥手的过程、设计原因
      • TCP 流量控制和相关算法
      • TCP 拥塞控制和相关算法
      • TCP 和 UDP 的比较
    • HTTP
        • 从传递参数的方式上
        • 从日志安全性上
        • 从传递参数的长度上
        • 从对资源有无影响上
      • HTTP 1.1 和 2.0 的区别
      • HTTP 通信原理
      • 常见的 HTTP 状态码
      • HTTP 长连接的建立和应用
      • HTTP 缓存和浏览器缓存
      • HTTP 的优缺点
      • URL 的组成
      • cookie、session、token 的名词解释和区别
  • 安全
    • XSS 的三种类型的区别
    • XSS 和 CSRF 的区别
    • XSS 和 CSRF 攻击的原理和避免
  • 浏览器
    • 浏览器内核以及对浏览器引擎的理解
    • 浏览器的构成和运行机制
    • 浏览器交互:BOM 和 DOM 相关 Web API,监听事件
    • 浏览器缓存机制
    • 浏览器的渲染原理
    • 浏览器的安全性:同源策略、跨域和攻击
  • 前端性能优化
    • 测试前端性能的方法和工具
    • 如何提升前端的性能
      • 组件、依赖的懒加载
      • 图片的压缩
      • linkscript 的引入位置
      • Gzip 压缩
      • DNS 优化
      • CDN 优化
      • 如何优化重绘和回流
      • CSS 3 开启硬件加速
      • 其他
  • 行业应用
    • 扫码登录
    • 大文件上传