1. 编程思想
   1. 架构模式
      1. MVC
      2. MVVM
      3. MVP
      4. Code Blocks
      5. Code Behind
   2. 设计模式
      1. 单例模式
      2. 工厂模式
      3. 策略模式
      4. 发布订阅模式
      5. 代理模式
      6. 命令模式
      7. 适配器模式
      8. .....
   3. 编程范型
      1. 面向对象编程（OOP）
      2. 面向切面编程（AOP）
      3. 函数式编程
      4. 响应式编程
   4. 程序设计
      1. 结构化程序
         1. 自顶而下
         2. 逐步求精
         3. 模块化
         4. 限制使用goto
      2. 面向对象程序
         1. 单一功能原则（S）
         2. 开放关闭原则（O）
         3. 里氏替换原则（L）
         4. 接口隔离原则（I）
         5. 依赖反转原则（D）
   5. 解决方案
      1. 适配方案
         1. 通过媒体查询
         2. viewport缩放
            1. 简单、高效
         3. rem布局
            1. 动态设置根元素font-size，等比缩放元素大小
      2. lazyimage
         1. 图片先用占位图表示，属性放到data里面
         2. 页面加载完成后，监听窗口滚动，
         3. 当图片出现在视口内，再赋予真实的地址
      3. 移动端300ms延时
      4. 骨架屏
2. 前端基础
   1. HTML（5）
      1. Canvas
      2. SVG
      3. Drag 、 drop 拖拽
      4. Video、audio
      5. web worker
      6. localStorage、sessionStorage
      7. navigator.geolocation.getCurrentPosition() 地理定位
   2. CSS
      1. 权重
         1. !important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
      2. 盒模型
         1. 将所有元素表示为一个矩形盒
         2. 这个模型描述了元素所占空间的内容。 每个盒子有四个边：外边距, 边框, 内填充边与 内容。
         3. 两种
            1. 标准
            2. box-sizing: content-box
            3. width = content
            4. IE
            5. box-sizing: border-box
            6. width = content+padding+margin
            7. IE盒模型用的最多，也是被推荐使用的
      3. 流式布局
         1. 以“块”和“内联”元素的最基础的自动排列方式
         2. 本质上是一系列的元素，都在布局中一起工作，项目了解，一旦脱离的流，就会独立的工作
         3. 规则
            1. 按照先后位置从上而下布局
            2. 行内元素水平排列，占满一行后后换行
            3. 块级元素独占一行
      4. 选择器匹配规则
         1. 从右向左
         2. 探究 CSS 解析原理
            1. https://juejin.im/entry/5a123c55f265da432240cc90
         3. css *号
            1. *可以继承
            2. 从后向前
            3. ？
      5. 定位方案
         1. 浮动定位
            1. 先按照普通流的位置出现
            2. 然后脱离文档流，根据浮动的方向尽可能的向左或右偏移
         2. 绝对定位
            1. 脱离普通流
            2. 不会影响其兄弟元素
            3. 具体坐标由决定定位的坐标决定
      6. FC
         1. 概念
            1. 格式化上下文
            2. 特定规则的区域，独立的容器和布局环境
            3. 一个封闭的大箱子，内部无论如何变化，都不会影响到外部
         2. 分类
            1. IFC
            2. 高度
            3. 由包含元素的实际高度计算得出
            4. 不受竖直方向margin/padding影响
            5. BFC
            6. 规则
            7. 继承了普通流的定位规则
            8. 浮动
            9. 高度包含内部的浮动元素
            10. 不会与外部的浮动元素重叠
            11. 垂直方向的距离由margin决定。 属于同一个BFC的两个相邻的BlockBox的margin会发生重叠。
            12. 创建
            13. 根元素 body
            14. overflow 值不为 visible 的块元素
            15. 浮动元素 float不为none
            16. 绝对定位元素
            17. position为absolute和fixed
            18. 行内块元素
            19. inline-block
            20. 弹性元素
            21. 网格元素
            22. 应用
            23. 外边距折叠（Margin collapsing）
            24. 有的译成外边距塌陷
            25. 规范
            26. 相邻盒子(可以是兄弟或祖先关系？)的外边距可以结合成一个单独的外边距
            27. 发生情况
            28. 属于同一个BFC的块级元素
            29. 在normal flow的布局中
            30. 也就是说绝对定位元素和浮动元素不会发生折叠
            31. 垂直方向相邻
            32. 块级盒子
            33. 也就是说inline-block不会发生折叠
            34. 也就是说水平方向不会发生折叠
            35. 解决
            36. 放在个BFC中
            37. BFC可以包含浮动的元素
            38. 场景描述
            39. 一个block元素中，包含一个浮动元素，此时block元素会失去高度
            40. 解决
            41. 为block元素加入overflow:hidden属性，触发BFC
            42. 那么容器就回包裹着元素
            43. 阻止被浮动元素覆盖
            44. 两列布局
            45. GFC
            46. FFC
      7. position和zindex
         1. 决定同一父元素中的同级子元素的垂直方向顺序
         2. position属性：relative、absolute、fixed
      8. 常见行内元素和块级元素
         1. 行内
            1. b, em, strong,
            2. a, br, img, span, sub, sup
            3. button, input, label, select, textarea
         2. 块级
            1. canvas，div，dl，footer，form，h1，header，hr，p，pre，section，table，ul，li
      9. inline和inline-block
         1. inline
            1. 不会独占一行
            2. 多个相邻的行内元素会排列在同一行里，直到一行排列不下
            3. 设置width,height属性无效
            4. 水平margin、padding有效， 垂直margin、padding无效
         2. block
            1. 独占一行
            2. 默认情况下，block元素宽度自动填满其父元素宽度
            3. 可以设置width,height属性
            4. 设置margin和padding有效
         3. inline-block
            1. 对象呈现为inline对象，但是对象的内容作为block对象呈现
            2. Margin?
      10. margin: 0 auto水平居中原因
          1. 水平方向独占一行
          2. auto是自动分配剩余空间的意思
      11. 清除浮动
          1. 利用overflow包裹浮动
          2. clear
             1. 利用伪元素（clearfix）
             2. 父元素结束标签之前插入清除浮动的块级元素
             3. 利用clear样式
      12. css3技巧
          1. vw、vh
          2. calc
          3. transition
      13. 居中
          1. 水平居中
             1. 行内元素
             2. text-align: center
             3. 块级元素
             4. 定宽
             5. margin: 0 auto
             6. 不定宽
             7. flex
             8. inline-block + text-align:center
          2. 垂直居中布局
             1. 文本垂直居中
             2. line-height:height
             3. margin + translate
             4. Relative + margin + top
             5. 表格
             6. flex
             7. justify-content
             8. 主轴
             9. align-center
             10. 交叉轴
             11. margin: auto
      14. 布局案例
          1. https://github.com/hookex/layout
   3. JS
      1. XMLHttpRequest
         1. new XMLHttpRequest()
         2. xhr.open
         3. onload
            1. status == 200 || status == 304
      2. dom操作
         1. 基础
            1. 创建
            2. document.createElement
            3. document.createTextNode
            4. 删除
            5. removeChild
            6. 修改
            7. insertBefore
            8. replaceChild
            9. appendChild
            10. 查
            11. document.getElementById
            12. document.querySelector
         2. JS交换两个节点如何实现
      3. 创建对象
         1. {}
         2. new
            1. 模拟
            2. https://gist.github.com/hookex/25eaf1338110cdcac24ea27f02d42de6#file-new-ts
         3. Object.create(proto, [propertiesObject])
            1. Object.create(null) 无原型的对象
      4. 数组判断
         1. Array.isArray([])
         2. Object.prototype.toString.apply([]) === "[object Array]"
         3. [].constructor === Array
         4. [] instanceof Array === true
      5. slice vs splice
         1. slice
            1. 切片
            2. return 选定的元素作为新的数组对象
            3. 不更改原始数组
         2. splice
            1. 铰接
            2. return 已删除的项
            3. 更改原始数组
      6. for-in for-of
         1. for-in
            1. 循环对象&数组
            2. 循环只遍历可枚举属性
            3. 可枚举属性 从构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
            4. 如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable)
         2. for-of
            1. 循环数组
            2. ES6新特性
            3. 不会循环对象的key，只会循环对象的value
            4. 遍历实现iterator接口
      7. 箭头函数
         1. 更简短&不绑定this
         2. 没有this, arguments
         3. 不能用作构造函数
      8. ES6
         1. let
            1. 暂时性死区
            2. 存在，但是不让使用
            3. 所以提前使用会报错
         2. const
            1. 除了不能再赋值以外，和let相同
         3. 块级作用域
         4. =>
         5. 解构
         6. Set
         7. map
         8. symbol
            1. 不可改变且唯一的
            2. 以被用做对象属性的键
            3. 对原始数据类型的隐式对象包装器。
            4. 可以用来避免被覆盖
         9. 模板字符串
         10. module
             1. 和CMD的区别
             2. ES6
             3. 静态分析
             4. 引用方式
             5. 异步
      9. 类型化数组
         1. 通用的、固定长度的二进制数据缓冲区
      10. JS开始执行时机
          1. window.load
             1. 必须等待网页中所有内容加载完毕后才能执行
          2. ondomcontentloaded
             1. dom结构绘制完毕后开始执行
             2. $(document).ready
             3. 封装了ondomcontentready、ondomcontentloaded
      11. 事件
          1. 本质
             1. 事件驱动
             2. 浏览器中很多行为是异步
             3. 会创建事件并放入执行队列，等待当前代码执行完成
             4. GUI渲染线程与JS引擎线程互斥
          2. 绑定，监听，委托的区别
             1. 绑定
             2. HTML直接绑定
             3. 在JavaScript代码中绑定
             4. 绑定事件监听函数
          3. 事件委托
             1. 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
             2. 好处
             3. 减少重复工作
             4. 减少内存消耗
          4. 异步事件驱动
             1. 浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件
             2. 只有前面的处理完毕了，空闲了才会执行这个事件
          5. 事件流
             1. 冒泡
             2. 事件捕获
             3. 目标阶段
             4. 事件冒泡 （常用）
          6. 宏任务&微任务
             1. promise & setTimeout
      12. js异步操作
          1. 　　回调函数
             1. 执行一个函数时，在函数内部处理操作，把操作结果以参数形式传入回调函数中
             2. 坏处
             3. 回调地狱
             4. 不利于阅读
             5. 不利于调整回调顺序
             6. 好处
             7. 代码清晰地表达出了执行关系
          2. 　　监听事件
          3. 　　定时器
             1. 宏任务
          4. ajax
             1. Ajax请求确实是异步的，这请求是由浏览器新开一个线程请求，事件回调的时候是放入Event loop单线程事件队列等候处理
          5. Promise
             1. 标准
             2. 立即执行
             3. 微任务
             4. 同步的立即执行函数
          6. generator
             1. 交出函数的执行权
             2. 调用 Generator 函数，会返回一个内部指针
             3. next 方法的作用是分阶段执行 Generator 函数
             4. 流程不方便管理
          7. async/await
             1. 好
             2. 异步操作的同步写法
             3. 坏
             4. 反设计
             5. 容易引起性能问题
             6. async返回一个promise
             7. await让出线程，跳出async函数体
             8. Generator/function* 来实现
             9. await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。
          8. Observable
          9. 事件循环
             1. 执行一个宏任务（栈中没有就从事件队列中获取）
             2. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
             3. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
             4. 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
             5. 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
      13. 复制对象
          1. for-in
          2. object.assign()
             1. 浅拷贝
          3. JSON.parse(JSON.stringify(obj))
             1. 方法不能用于复制用户定义的对象方法
             2. 不能用于复制循环引用对象。
          4. 展开操作符(…)
             1. 浅拷贝
          5. 自实现
             1. https://gist.github.com/hookex/25eaf1338110cdcac24ea27f02d42de6#file-copy-ts
      14. 编解码
          1. escape
             1. 已从Web 标准中删除
             2. 对字符串进行编码，让计算机可以读取
             3. 编码集合
             4. 除
             5. ASCII 字母和数字
             6. ASCII 标点符号 - _ . ! ~ * ' ( )
          2. encode
             1. encodeURI
             2. 把字符串作为URI进行编码
             3. 目的是对 URI 进行完整的编码
             4. 编码集合
             5. 除
             6. 非转义字符
             7. 字母 数字 - _ . ! ~ * ' ( )
             8. 保留字符
             9. ; , / ? : @ & = + $
             10. 数字符号
             11. #
             12. encodeURIComponent
             13. 编码集合
             14. 除
             15. 字母 数字 - _ . ! ~ * ' ( )
             16. ;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号
             17. 十六进制的转义序列
          3. decode
             1. docodeURI
             2. decodeURIComponent
          4. 为什么需要编解码？
      15. 事件阻止
          1. 阻止传播
             1. event.Propagation()
             2. W3C
             3. event.cancleBubble()
             4. IE
          2. 默认事件
             1. event.preventDefault()
             2. W3C
             3. return false
             4. 原生JS事件
             5. 阻止默认行为
             6. jQuery
             7. 阻止默认行为
             8. 阻止冒泡
             9. W3c
             10. e.returnValue = false
             11. IE
      16. 闭包
          1. 定义
             1. 函数和其相关引用对象组成的实体
          2. 闭包原理
             1. 从schema语言借鉴来
             2. 基础
             3. 词法作用域
             4. 函数的变量作用范围可以超越创建的它的环境
             5. 在一些语言中，函数可以嵌套函数，当内部函数引用了外部函数的变量时，就有可能会形成闭包
             6. 由于有引用，不会被垃圾回收
          3. 弊端
             1. 内存占用过多
          4. 应用场景
             1. 模仿块级作用域
             2. settimeout 拿到正确的值
             3. 创建私有变量
             4. 封装相关的功能集
             5. 模块化
             6. jquery
             7. 设计单例模式？
             8. 惰性求值？
      17. 上下文
          1. 变量对象
             1. 变量 (var, 变量声明);
             2. 函数的形参
             3. 函数声明 (FunctionDeclaration, 缩写为FD);
          2. 作用域链
             1. 本质
             2. 是指向变量对象的指针列表
             3. 变量对象
             4. arguments
             5. this
             6. 局部属性和方法
             7. 定义
             8. 每个函数都有自己的执行环境
             9. 当代码在一个环境中执行时，会创建作用域链
             10. 作用
             11. 保证对执行环境的所有变量和函数的有序访问
             12. 链
             13. 前端
             14. 当前代码所在环境的的变量对象
             15. 下一个变量，来自外部执行环境
             16. 最外层为全局执行环境
             17. 作用域链的尽头
             18. node
             19. global
             20. web
             21. window
             22. 变量搜索
             23. 静态作用域
          3. this
             1. this是面向对象的表示
             2. 通过对象调用
             3. 其它
             4. window
             5. 本质
             6. this引用的是函数据以执行的环境对象
             7. 执行环境
             8. 全局执行环境
             9. 创建
             10. 当执行流进入一个函数时，函数的执行环境就会被推入环境栈中
             11. 销毁
             12. 在函数执行完之后，栈将其环境弹出，该环境被销毁
             13. 定义
             14. 每个执行环境都有一个与之关联的变量对象
             15. 环境中定义的所有变量和函数都保存在这个对象中
             16. 函数执行环境
             17. 函数调用时时
             18. 函数入栈
             19. 创建执行环境
             20. 创建作用域链
      18. 原型
          1. 两方面
             1. 对constructor模式的改善
             2. 对constructor模式的改善
             3. 避免重复定义
             4. 设计思想
             5. JS的设计思想
             6. 不同于面向类，基于原型的语言是对实例友好的
             7. 实现继承
          2. 铁三角
             1. 实例
             2. prototype指向原型对象
             3. constructor指向构造函数
             4. 构造函数
             5. prototype指向原型对象
             6. constructor指向构Function
             7. 原型对象
             8. constructor指向构造函数
             9. prototype指向原型的原型
          3. 组合继承？
          4. 读写
             1. 读
             2. 先遍历自身的属性，如果没有一层层往上层寻找
             3. 写
             4. 如果原型存在该属性，则对该实例自身创建属性
3. 类库/框架
   1. 工具库
      1. jQuery
      2. Zepto
      3. Bootstrap
      4. RxJS
      5. Moment.js
      6. Animate.css
      7. MUI
      8. Layui
   2. 开发库/框架
      1. Vue
         1. Vuex
         2. Vue-router
         3. Vue-cli
         4. 数据绑定
            1. 实现原理
            2. 数据劫持的方式来做数据绑定
            3. 方法
            4. Object.defineProperty()
            5. getter
            6. setter
            7. notify
            8. 监听变化
            9. Watcher
            10. Observer
         5. UI库
            1. Element UI
            2. iView
            3. mint-ui
      2. React
         1. 本质
            1. 规范
            2. 接口
         2. 生命周期
            1. shouldComponentUpdate
            2. componentWillUpdate
            3. componentDidUpdate
            4. componentWillMount
            5. componentDidMount
            6. componentWillReciveProps
            7. componentWillUnmout
            8. shouldComponentUpdate
            9. getSnapshotBeforeUpdate
         3. state和props
            1. state是做为状态管理
            2. 而props相当于api，由外界传入
         4. setState
            1. 合并旧state
            2. 放进state队列，等待更新
            3. 集齐一批需要更新的组件然后一起更新
            4. updater
            5. react-dom
            6. render
            7. reconciler
            8. 同步，但延后
         5. 数组中的key
            1. 提高比对效率
         6. Virtual Dom
            1. 可能非MVVM模式的必须选择
            2. 性能
            3. 不一定比原生更快
            4. 同MVVM一样，速度在过得去的范围内
            5. virtual DOM
            6. 原理
            7. 本质上就是在 JS 和 DOM 之间做了一个缓存
            8. 会跟踪每一个组件的依赖关系
            9. 弊端
            10. 如果你的应用中，交互复杂，需要处理大量的UI变化，那么使用 Virtual DOM 是一个好主意。如果你更新元素并不频繁，那么 Virtual DOM 并不一定适用，性能很可能还不如直接操控 DOM。
            11. 好处
            12. diff
            13. 抽象
            14. diff算法
         7. Redux
            1. Predictable State Container
            2. 三大原则
            3. 单一数据源：state
            4. state只读：action
            5. 纯函数：reducer
            6. 优势
            7. 让视图层简单&快照化
            8. 编程对数据的中心化处理
            9. 针对数据更易操作
            10. 函数话编程
            11. 时间化
            12. 状态持久性
         8. Ant Design
         9. diff时间复杂度
            1. O(n)
            2. 问题定义：讲一棵树转换成另一颗树的最小操作数
            3. 新旧虚拟树比对，返回补丁对象
            4. 折中的算法
            5. 两个不同类型的元素会产生不同的树
            6. 可以通过key prop来暗示哪些子元素在不同的渲染下保持稳定
      3. Angular
         1. 脏值检查
            1. 数据何时变化
            2. 用户输入
            3. 请求服务端数据
            4. 定时事件
            5. 监听变化
            6. 使用zone.js Monkey patch的方式，监听所有异步事件
            7. 变化检测
            8. 新旧数据对比
            9. angular改善的脏检查
            10. 组件树
            11. 每个组件都有自己的变化检测器
            12. 变化检测器树
            13. 数据流自上而下
            14. 高效
            15. 可预测
            16. 相比之下，AngularJS采用的是双向数据流，错综复杂的数据流使得它不得不多次检查，使得数据最终趋向稳定。理论上，数据可能永远不稳定。AngularJS给出的策略是，脏检查超过10次，就认为程序有问题，不再进行检查。这个10，我不知道它的给出依据是什么，也许是个经验值吧。
            17. 变化检测对象
            18. 定制变化检测
         2. DI
            1. 目标
            2. 控制反转
            3. 好处
            4. 降低代码之间的耦合度
            5. 每个对象都需要获取与其合作的对象（也就是它所依赖的对象）的引用。如果这个获取过程要靠自身实
            6. 实现方式
            7. 依赖注入
            8. Injector会自动帮你将需要的依赖注入到类的构造器里，并返回这个类的实例
            9. 使用的三个技术
            10. reflect-metadata
            11. typescript
            12. Decorator
         3. 数组绑定
         4. 生命周期
            1. ngOnChanges
            2. ngOnInit
            3. ngDoCheck
            4. ngAfterContentInit
            5. 在外来内容被投影到组件中之后/投影组件内容的变更检测之后调用
            6. ngAfterContentChecked
            7. ngAfterViewInit
            8. 初始化完/检测变更完组件视图及其子视图之后调用。
            9. ngAfterViewChecked
            10. ngOnDestroy
      4. Ember.js
      5. Knockout.js
      6. Backbone.js
4. 领域分支
   1. 移动端
      1. H5网页
         1. 例：微信里的网页
      2. Web App
         1. SPA（single page web application）
            1. SSR
            2. Nuxt.js
            3. Next.js
         2. PWA（Progressive Web App）
            1. Service Worker
         3. 例：扫码点餐
      3. hybrid App
         1. Native + WebView
            1. jsBridge
         2. Ionic 平台
         3. Dcloud 平台
         4. Cordova （PhoneGap前身）
         5. 例：电商App
      4. Web to Native
         1. React Native
         2. Flutter
         3. Weex
            1. WeexSDK
         4. Taro
         5. uni-app
      5. 小程序（微信/支付宝/百度/头条/QQ/钉钉）
         1. webview渲染
      6. 快应用（十大手机厂商，共同发布快应用标准）
         1. native渲染
   2. 可视化
      1. Canvas 2D
         1. Echarts
         2. HighCharts
         3. AntV
      2. SVG
         1. D3
         2. Snap
         3. Raphael
      3. WebGL
         1. Three.js
   3. 前端微服务
      1. Egg.js
   4. 系统设计
      1. 性能体验质量等较高的层面往下回答解决方案
      2. 设计思路
         1. 面向问题的分析
            1. 发现可以做的事情
            2. 解决什么问题
            3. ROI
         2. 规划
            1. 项目设计（明确重点）
            2. 性能
            3. 量化
            4. 链路分析
            5. 体验
            6. 质量
            7. 分层
            8. 工程
            9. 效率
            10. 明确需要调用的资源
            11. 如何推广
         3. 把控过程
            1. 排期
            2. 时间
            3. 难度
            4. 任务量
         4. 事后
            1. 推广
            2. 量化或质化分析
      3. 案例
   5. WebAssembly
   6. 复杂性管理
      1. 概念
         1. 相互作用的成分组成的系统
      2. 应对
         1. 较优选择、逐渐认知、相对有序
      3. 应用
         1. 模型管理
            1. 建模
            2. 实践
            3. 开发技术栈
            4. 研发流程
            5. 基础库
            6. 工具栈
            7. 开发规范
            8. 代码规范
            9. Commit规范
            10. 版本规范
            11. 最佳实践
            12. 知识库
         2. 不确定性管理
            1. 未来、预期和风险
            2. 实践
            3. 奖惩规则明确
            4. 提高对未来的信息
            5. 技术的积累
            6. 分享
         3. 模块间效率管理
            1. 实践
            2. 团队如何分工
            3. 跨团队配合
      4. 持续优化
   7. web游戏开发
      1. Cocos2d
      2. Egret Engine
5. 服务端分支
   1. Node.js
      1. Express
      2. Koa
      3. Egg
      4. 压力测试
   2. web服务器
      1. Nginx
      2. Apache
      3. Tomcat
   3. 数据库模型
      1. 层次模型
      2. 网状模型
      3. 关系模型
         1. SQL
            1. MySQL
            2. Oracle
            3. SQL Server
            4. .....
         2. NOSQL
            1. MongoDB
            2. memcached
            3. Redis
            4. Cassandra
            5. .....
6. 全链路分支
   1. 模块化
      1. CommonJS
      2. SeaJS/CMD
      3. RequireJS/AMD
      4. CSS Module
      5. ES6 Module
   2. 依赖管理
      1. npm
      2. Yarn
      3. cnpm
   3. 构建工具
      1. Webpack
         1. npm install
            1. 查找
            2. 寻找package.json并解析
            3. 执行勾子preInstall
            4. 确定首层依赖
            5. 从根节点（项目）进行多进程遍历
            6. 下载
            7. 向指定源查找
            8. 确定语义化版本
            9. 和lock文件进行优先级比对
            10. 三个优先级
            11. 项目node_modules
            12. .npm
            13. 网络
            14. 安装
            15. deduple
            16. 去除冗余模块
            17. 扁平化处理
            18. 安装模块
            19. 更新node_modules
            20. 执行勾子postInstall
         2. webpack热更新
            1. 监听变化
            2. 对变化模块进行打包编译
            3. 把编译后结果以JS对象形式写进内存
            4. 通道传回
            5. 建立webpack-dev-server和websocket的连接通道
            6. 传递消息
            7. 变化模块hash值
            8. 更新代码
            9. HotMuduleReplacement
            10. 接收到变化模块hash值
            11. JsonpMainTemplate
            12. 根据hash集合，通过jsonp获取最新的模块代码
            13. 如果热更失败，则退回到live reload操作
         3. webpack loader和plugin区别
            1. loader
            2. 文件翻译器
            3. plugin
            4. 扩展编译过程
            5. 在对应的事件节点定义操作
            6. 资源管理
            7. bundle文件优化
            8. 输出信息
         4. webpack模块化
            1. 吸取了各个模块化的经验，把模块化的概念用于更多文件类型
         5. webpack性能优化
            1. 多进程处理
            2. sourcemap可选
            3. 编译成较新的es标准（ts的）
            4. 缩小源文件定义范围
            5. 平衡压缩配置
            6. 平衡eslint配置
            7. 代码分割
         6. webpack vs rollup
            1. rollup
            2. tree-shaking
            3. 对es6支持好
            4. 基于2015模块
            5. webpack使用CommonJS
            6. 更适合开发基础库
         7. 原理和思想
            1. 核心是一个静态模块捆绑器，内部维护一个依赖关系图，映射每个模块并生成捆绑包
            2. 概念
            3. 配置化
            4. 模块化
            5. entry
            6. loader
            7. plugin
            8. trunk
            9. 过程
            10. 模块依赖分析
            11. webpack处理
            12. 静态资源包
            13. WebPack打包原理
            14. require
            15. 根据node的规范封装的模块化
            16. 名词
            17. loader
            18. 模块转换器
            19. plugin
            20. 自定义打包流程
            21. 过程
            22. 准备
            23. 加载所有插件
            24. 确定入口文件
            25. 编译
            26. 递归寻找模块依赖
            27. 调用loader对模块进行编译
            28. 资源输出
            29. 输出chunk文件
         8. 整套构建部署流程
            1. 工作流平台
            2. gitlab | jenkins
            3. DSL
            4. runner
            5. 考虑环境
            6. 是否容器化
            7. pipline
            8. webhook
            9. prepare
            10. build
            11. test
            12. unit test
            13. 安全检查
            14. deploy
            15. dev
            16. prod
            17. rollback
      2. Gulp
   4. 语言增强
      1. CSS
         1. Less
         2. Sass（scss）
         3. Stylus
         4. Post css
      2. JavaScript
         1. TypeScript
         2. CoffeeScript
         3. Flow
   5. 代码质量
      1. 自动化测试
         1. puppeteer
      2. 单元测试
      3. UI测试
      4. E2E测试
   6. 转换器
      1. Babel
      2. Traceur
   7. CI / CD
      1. Git web hook
      2. Jenkins
7. 进阶分支
   1. 网络通信
      1. HTTP 应用层协议
         1. 基本概念
            1. 请求头
            2. request header
            3. 响应头
            4. response header
            5. 状态码
            6. 分类
            7. 1xx
            8. 信息响应类
            9. 100
            10. 服务端收到请求头，客户端应继续发送body
            11. 2xx
            12. 处理成功响应类
            13. 200
            14. 请求成功
            15. 请求的内容，随此返回
            16. 3xx
            17. 重定向响应类
            18. 301
            19. 请求的资源已永久移到新位置
            20. 304 Not Modifyed
            21. 版本未修改
            22. 客户端仍有以前的副本，服务端无需传回资源
            23. 4xx
            24. 客户端错误类
            25. 400
            26. 客户端有语法错误，不能被服务器理解
            27. 401 未授权
            28. 403 拒绝提供服务
            29. 404 资源不存在
            30. 5xx
            31. 通用错误消息
            32. 500
            33. 服务端异常，没有给出具体信息
            34. 解决了什么问题
            35. 报文
            36. 是什么
            37. 承载多个请求参数的数据
            38. 报文格式
            39. 一次http完整的过程
            40. 输入网址
            41. 根据DNS，将域名解析为IP地址
            42. 建立TCP连接
            43. 三次握手
            44. 客户端发送报文
            45. 服务端应答
            46. 服务端返回状态码和请求体
            47. 关闭TCP连接
         2. http2
            1. 基于google SPDY
            2. 多路复用
            3. 相同域名请求，同一个TCP链接并发完成
            4. 1.x keep alive 串行传输
            5. 一个TCP连接分为若干流
            6. 一个流可以传输若干消息
            7. 每个消息由若干二进制Frame组成
            8. 1.x为文本格式
            9. Hpack头压缩
            10. 二进制传输
            11. 服务端推送
            12. 解决队头阻塞问题
         3. Accept - Encoding
            1. 和性能有关，对body部分进行编码，达到压缩的目的
            2. 编码类型
            3. gzip
            4. 好处
            5. 节省空间
            6. 弊端
            7. JPEG这类文件用gzip压缩的不够好
            8. compress
            9. deflate
            10. zlib
         4. websocket
            1. 使用HTTP 101状态码进行握手
            2. 持久性连接
            3. 双向通信
            4. 依赖TCP协议
            5. 同HTTP
            6. 使用HTTP Upgrade头
            7. 从HTTP协议更改为WebSocket协议
            8. 优点
            9. 较少的控制开销
            10. 更强的实时性
            11. 持久性
            12. 更好的二进制支持
         5. 异步请求和同步请求的区别
            1. 异步请求
            2. 并行处理
            3. 不等待
            4. 同步请求
            5. 顺序处理
            6. 等待
         6. cookie & session
            1. cookie
            2. 服务器在本地机器上存储的小段文本
            3. 只能保管ASCII字符串
            4. 受浏览器安全策略限制
            5. 而Cookie保管在客户端，不占用服务器资源
            6. session
            7. 服务器端的机制
            8. 任何类型的数据
            9. Session存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险
            10. Session是保管在服务器端的，每个用户都会产生一个Session。假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存
         7. https？
            1. 对称加密 + 证书颁发机构CA
            2. https的信任基于预先安装在浏览器中的证书颁发机构
            3. 我信任证书颁发机构我应该信任的
            4. HTTPS报文中的任何东西都被加密，包括所有报头和荷载。
            5. 和http的差异
            6. 端口
            7. http
            8. 默认80端口
            9. https
            10. 默认443端口
            11. 加密
            12. 对称加密
            13. 加、解密用同一串秘钥
            14. 只有一个私钥
            15. 非对称加密
            16. 公钥、私钥
            17. 效率低
            18. 中心化加密
            19. 去中心化加密
            20. https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74
            21. get
            22. 参数也是加密的
            23. 加密层：SSL/TSL
         8. 请求方式
            1. get和post区别
            2. 同
            3. TCP链接
            4. 底层是TCP/IP
            5. GET和POST能做的事情是一样的
            6. 定义
            7. get
            8. Get是向服务器发索取数据的一种请求
            9. post
            10. Post是向服务器提交数据的一种请求
            11. 不同
            12. 长度
            13. get
            14. 无长度限制
            15. 但是浏览器会对URL厂区做出限制，2000多个字符
            16. post
            17. 无长度限制
            18. 大多数服务器最多处理64K大小的url
            19. 字符
            20. get
            21. ASCII字符
            22. post
            23. 没有限制
            24. 编码
            25. get
            26. application/x-www-form-urlencoded
            27. post
            28. POST支持多种编码方式
            29. 安全
            30. get
            31. GET参数直接暴露在URL上
            32. post
            33. POST参数在HTTP消息主体中
            34. 不会被保存在浏览器历史
            35. 缓存
            36. get
            37. 请求会被浏览器主动缓存
            38. post
            39. POST不会
            40. 浏览器
            41. GET请求参数会被完整保留在浏览器历史记录里
            42. 而POST中的参数不会被保留
            43. 建立过程？
            44. 产生一个TCP数据包
            45. 浏览器会把http header和data一并发送出去，服务器响应200（返回数据）
            46. 产生两个TCP数据包
            47. 浏览器先发送header，服务器响应100 continue
            48. 浏览器再发送data，服务器响应200 ok（返回数据）
            49. https://zhuanlan.zhihu.com/p/25028045
            50. https://www.zhihu.com/question/20552352
            51. 请求类型
            52. get
            53. post
            54. 创建
            55. put
            56. 更新
            57. delete
            58. head
            59. 仅仅返回相应的头部，没有具体的响应体。它也不会对服务器造成其他影响
            60. TRACE
            61. options
            62. OPTIONS允许客户端请求一个服务所支持的请求方法。它所对应的响应头是Allow，它非常简洁地列出了支持的方法。下面为服务端成功处理了OPTIONS请求后，响应的内容：
            63. Allow: HEAD,GET,PUT,DELETE,OPTIONS
            64. 发生时机？
            65. connect
            66. 用途？
         9. 跨域携带cookie
      2. TCP/IP
         1. 全双工通信
            1. 输入通道
            2. 输出通道
         2. 协议集
            1. 应用层
            2. 传输层
            3. 网络层
            4. 网络访问层
         3. 握手 & 分手
            1. 建立连接的最小安全次数
            2. 三次握手
            3. 1 客户端 发起请求
            4. 等待确认
            5. 2 服务器收到消息 & 发送确认请求
            6. 等待状态
            7. 3 客户端收到消息，发送确认包
            8. 连接建立
            9. 四次分手
            10. 1 客户端提出分手请求
            11. 2 服务端收到请求，关闭连接
            12. 3 并提出反方向关闭请求
            13. 4 客户端对服务端请求确认，双方向的关闭结束
            14. 断开连接时服务器和客户端均可以主动发起断开TCP连接的请求
   2. 前端监控
      1. 行为（数据）监控
         1. PV/PU(点击量/不同IP人数)
         2. 用户在每个页面的停留时间
         3. 用户通过什么入口访问该页面
         4. 用户在相应的页面中触发的行为
      2. 异常监控
         1. 1.服务端异常，2.浏览器抛出异常，3.样式加载异常
      3. 性能监控
         1. 不同用户、机型、系统下的首屏加载时间
         2. 白屏（骨架屏）时间
         3. http等请求的响应时间
         4. 静态资源整体下载时间
         5. 页面渲染时间
         6. 页面交互动画完成时间
      4. 埋点，点击流
         1. 对事件的拦截
         2. 根据统一的用户标识 把一系列的事件上报的用户行为串起来
      5. 性能优化
   3. 前端性能
      1. 性能指标
         1. 首次绘制（FP）
         2. 首次内容绘制（FCP）
         3. 首次有效绘制（FMP）
         4. 每秒传输帧数（FPS）
         5. DNS解析时间
         6. TCP连接时间
         7. HTTP请求响应时间
         8. 用户可交互时间
      2. 评估工具
         1. Page Speed
         2. Lighthouse
         3. Chrome dev tools
      3. 性能优化
         1. 页面加载链路优化
            1. 网络
            2. 缓存技术
            3. 负载均衡
            4. 压缩
            5. 优化协议（HTTP,HTTP2.TCP/IP）
            6. CDN
            7. HTTP请求数量
            8. 资源
            9. 分包
            10. 压缩
            11. 懒加载
            12. 缓存
            13. 热加载&离线包
            14. 首屏
            15. 首屏处理
            16. 外壳处理
            17. 拆分过程，并行处理
            18. 构建
            19. 压缩
            20. 分包
            21. tree shaking
            22. aot
            23. 并行处理
         2. runtime优化
            1. 容器
            2. WKWebview
            3. V8
            4. 内联类
            5. wasm
            6. RN
            7. canvas
            8. webgl
            9. 硬件加速
            10. 语言层面
            11. CSS
            12. JS
            13. 框架层面
            14. 视觉
            15. 动画
            16. 交互
            17. 避免重排重绘
            18. fastclick
            19. 解决问题
            20. 300ms延迟
            21. 原因
            22. 移动浏览器存在双击缩放或双击放大操作
            23. 第一次点击之后，系统需要等待300ms，以判断用户是否再次点击了屏幕
            24. 事件发生顺序
            25. touchstart
            26. touchmove
            27. touchend
            28. click
            29. 解决方法
            30. 禁用缩放
            31. user-scalable=no
            32. 但同时也禁用了双指缩放操作
            33. 更累默认视口宽度
            34. <meta name="viewport" content="width=device-width"></code>
            35. 仍可进行双指缩放操作
            36. 指针事件
            37. pointerdown事件
            38. css touchaction: none
            39. 是否触摸操作会触发用户代理的默认行为
            40. zepto tap
            41. document
            42. touch事件
            43. 计算时间和位置差
            44. fastlick
            45. 监听touchend
            46. 发出自定义click事件
            47. 把原来的click事件阻止掉
      4. 性能优化
   4. 安全
      1. HTTP劫持与对策
         1. https
      2. DOS攻击
         1. 阻断服务攻击
         2. 使网络和系统资源耗尽
      3. XSS攻击与防御
         1. 含义
            1. 跨站脚本攻击
         2. 方法
            1. 恶意将未经过滤的代码植入到页面中
         3. 分类
            1. 反射性
            2. URL到页面
            3. 持久型
            4. 数据库
         4. 避免
            1. 常见符号编码转换
            2. & < > " ' /
            3. 对诸如<script>、<img>、<a>等标签进行过滤
            4. HttpOnly
            5. 避免cookie劫持
         5. HTML 属性、HTML 文字内容、HTML 注释、跳转链接、内联 JavaScript 字符串、内联 CSS 样式表等，所需要的转义规则不一致。 业务 RD 需要选取合适的转义库，并针对不同的上下文调用不同的转义规则。
      4. CSRF攻击
         1. 跨站请求伪造
            1. 攻击者盗用了用户的身份，以用户的名义发送恶意请求
            2. 在不同的domain下，攻击者却能为造出”用户本人发出的request“
         2. 避免
            1. 关键请求使用验证码或者token机制
            2. 验证码
            3. 在HTTP 头中自定义属性并验证
            4. Cross Site
            5. 验证 HTTP Referer 字段
            6. 具体来说就是服务器每次返回客户端页面的时候，在页面中埋上一个token字段
            7. SameSite
         3. 参考
            1. https://blog.techbridge.cc/2017/02/25/csrf-introduction/
         4. 有了同源策略，为什么还会发生csrf
            1. http://tech.jiu-shu.com/Web-Applications-Technologies/web-security-csrf
      5. 接口如何防刷
         1. 在nginx代理层控制IP限制调用次数
         2. 验证码
         3. 人机验证
8. 浏览器
   1. 同源策略
      1. 定义
         1. 限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
      2. 协议，端口（如果有指定）和域名
   2. 缓存策略
      1. 分类
         1. DNS缓存
         2. CDN缓存
         3. 浏览器缓存
            1. 强缓存
            2. cache-control
            3. no-cache
            4. max-age=<seconds>
            5. expires
            6. 协商缓存
            7. Last-Modify
            8. ETag
   3. 渲染引擎
      1. KHTML
      2. Webkit
         1. 排版引擎
         2. 01年开始苹果
         3. 组件
            1. JS Core
            2. webcore
            3. Drosera
            4. 调试工具
         4. 组成
            1. 渲染引擎
            2. HTML解释器
            3. CSS解释器
            4. 布局
      3. Blink
         1. blink
            1. 13年，webkit的分支
            2. V8
   4. 事件模型
      1. DOM0级模型
         1. 事件不会传播，即没有事件流的概念
         2. btn.onclick = fun;
      2. DOM2级模型
         1. W3C标准模型
         2. 三个阶段
            1. 捕获
            2. 目标
            3. 冒泡
   5. WebGL渲染的过程？
   6. 页面加载
      1. HTMl
         1. 下载
         2. 解析
         3. 合并渲染
      2. CSS
         1. 下载
         2. 解析
         3. 合并渲染
      3. JS
         1. 下载
         2. 解释和执行
   7. 内存管理
      1. 概念
         1. 像C语言一般都有自己的内存管理接口，JS创建变量时分配内存，而不再使用时再释放内存。
         2. 在定义变量时完成内存分配
      2. 方法
         1. 引用计数
            1. 问题定义
            2. 对象有没有其它对象引用它
            3. 优势
            4. 算法简单
            5. 释放时间快
            6. 劣势
            7. 循环引用问题
            8. 对计数要求高
            9. 不能并行计算
         2. 标记清除
            1. 问题定义
            2. 对象是否可获得
            3. 从根部开始遍历，找出不再使用的变量
            4. 阶段
            5. 初始阶段
            6. 标记阶段
            7. JS会停止运行
            8. 清楚阶段
            9. V8
            10. 增量标记
      3. 堆内存
         1. 全局变量
         2. 对象的引用
         3. 事件
         4. 定时器
      4. 堆和栈的区别
         1. 堆
            1. 动态分配的内存，大小不定也不会自动释放
            2. JS中引用类型占据空间大、大小不固定，栈内存中存放地址指向堆内存中的对象。按引用访问
         2. 栈
            1. 自动分配的内存空间，由系统自动释放
            2. 基本类型占据空间小、大小固定，值保存在栈空间。按值来访问
      5. 内存泄漏实例？
   8. 浏览器和Node事件循环的区别
      1. https://muyiy.cn/question/browser/25.html
   9. JS引擎
      1. JS 引擎
         1. 下载源代码
            1. 并行解析
            2. 字节码缓存
         2. AST
         3. 字节码
         4. JIT
         5. 机器码，执行
   10. 输入URL到页面渲染的经历
       1. http://fex.baidu.com/blog/2014/05/what-happen/
   11. HTML加载过程？
       1. 输入地址，返回HTML，解析
       2. 解析DOM
          1. 遇到body标签
             1. 加载并渲染DOM
          2. 浏览器遇到dom元素时，正常顺序加载，边加载边渲染
          3. CSS
             1. 内联CSS
             2. 浏览器继续加载，但渲染被阻塞
             3. 生成新的CSS Rule Tree
             4. 生成后重新渲染界面
             5. 外联CSS
             6. 并行下载
             7. 不会阻止DOM树解析
             8. CSS继续下载
             9. 会阻止渲染
          4. JS
             1. 内联Javascript
             2. DOM的加载和渲染同时被阻塞
             3. 由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞
             4. 外联Javascript
             5. DOM的加载和渲染同时被阻塞
             6. 现代浏览器并行下载JS文件，以增强下载过程。但是他们也按照dom中出现的顺序解释和执行JS。
       3. render tree
       4. layout
       5. 文档碎片？
          1. 内存
          2. 合成一个DOM？
   12. 渲染过程
       1. JS触发reflow？
          1. 过程
             1. JS影响Dom
             2. 影响DOM变化，dom树变化并解析
             3. JS影响到CSS
             4. 影响css变化，css树变化并解析
             5. 两树合并
             6. 生成一个渲染树，记录每个节点的布局和样式信息
             7. layout or reflow (option)
             8. 计算每个 DOM 元素最终在屏幕上显示的大小和位置
             9. Paint
             10. 为每个dom填充像素
             11. 本质上就是填充像素
             12. 一个DOM的所有可能效果
             13. 这个绘制过程是在多个层上完成的。
             14. Composite
             15. 渲染层合并
             16. 在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上
             17. 完成绘制之后，浏览器会按照所有层顺序，合理的合并成一个图层，显示在屏幕上
             18. 某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，
             19. 调用图形接口
          2. 扩展
             1. 某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
             2. 每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。
          3. http://taobaofed.org/blog/2016/04/25/performance-composite/
       2. 层压缩
          1. 原因
             1. 大量合成层来，而每个合成层都要消耗 CPU 和内存资源，岂不是严重影响页面性能
9. 计算机基础
   1. 计算机网络
      1. OSI七层模型
         1. 应用层
            1. HTTP，FTP，DNS, SMTP，SNMP
         2. 表示层
         3. 会话层
         4. 传输层
            1. TCP，UDP
         5. 网络层
            1. IP，ICMP，OSPF，EIGRP，IGMP
         6. 数据链路层
            1. SLIP，CSLIP，PPP，MTU
         7. 物理层
            1. ISO2110，IEEE802，IEEE802.2
      2. 五层协议的体系结构
   2. 操作系统
      1. 常用PC
         1. Linux
         2. Windows
         3. Mac OS
         4. UNIX
      2. 常用Mobile
         1. Android
         2. IOS
   3. 数据结构
      1. 堆（Heap）
      2. 栈（Stack）
      3. 队列（Queue）
      4. 链表（Linked List）
      5. 数组（Array）
      6. 树（tree）
      7. 集合（Set）
      8. 哈希表（Map）
   4. 算法
      1. 排序
         1. 冒泡排序
         2. 插入排序
         3. 快速排序
         4. 选择排序
         5. 希尔排序
         6. 归并排序
         7. 堆排序
      2. 检索
         1. 线性查找
         2. 二分查找
         3. 索引
         4. 深度优先搜索（DFS）
         5. 广度优先搜索（BFS）
      3. Diff
         1. Element Diff
         2. Tree Diff
         3. Component Diff