1. HTML
    1. doctype
      1. web页面使用哪个HTML版本的指令
        1. 不是HTML标签
      2. html5
        1. <!DOCTYPE html>
  2. CSS
    1. 盒模型
      1. 盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距, 边框, 内填充边与 内容。
      2. 将所有元素表示为一个矩形盒
      3. 两种
        1. 标准
          1. box-sizing: content-box
          2. width = content
        2. IE
          1. box-sizing: border-box
          2. width = content+padding+margin
          3. IE盒模型用的最多，也是被推荐使用的
    2. 常见定位方案
      1. 普通流 normal flow
        1. 按照先后位置从上而下布局
          1. 行内元素水平排列，直到当行被沾满然后换行
          2. 块级元素则会被渲染为完整的新行
          3. 所有元素都是普通流定位
        2. BFC
          1. Block Formatting Context
          2. 定义
          3. 是区域：布局过程中生成块级盒子的区域，独立的容器和布局环境
          4. 有规则：浮动元素与其他元素的交互限定区域
          5. 通俗来讲
          6. BFC是一个封闭的大箱子，内部无论如何变化，都不会影响到外部
          7. 创建
          8. 根元素 body
          9. overflow 值不为 visible 的块元素
          10. 浮动元素 float不为none
          11. 绝对定位元素
          12. position为absolute和fixed
          13. 行内块元素
          14. inline-block
          15. 弹性元素
          16. 网格元素
          17. 规则
          18. 继承了普通流的定位规则
          19. 容器里的子元素不会影响到外面的元素
          20. BFC的高度包含了内部的浮动元素
          21. BFC区域不会与外部的浮动元素重叠
          22. 垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
          23. 应用
          24. 外边距折叠（Margin collapsing）
          25. 有的译成外边距塌陷
          26. 规范
          27. 相邻盒子(可以是兄弟或祖先关系？)的外边距可以结合成一个单独的外边距
          28. 发生情况
          29. 属于同一个BFC的块级元素
          30. 在normal flow的布局中
          31. 也就是说绝对定位元素和浮动元素不会发生折叠
          32. 垂直方向相邻
          33. 块级盒子
          34. 也就是说inline-block不会发生折叠
          35. 也就是说水平方向不会发生折叠
          36. 解决
          37. 放在两BFC中
          38. BFC可以包含浮动的元素
          39. 场景描述
          40. 一个block元素中，包含一个浮动元素，此时block元素会失去高度
          41. 解决
          42. 为block元素加入overflow:hidden属性，触发BFC
          43. 那么容器就回包裹着元素
          44. 阻止被浮动元素覆盖
          45. 两列布局
      2. 浮动 float
        1. 元素首先按照普通流的位置出现
        2. 然后脱离文档流，根据浮动的方向尽可能的向左或右偏移
      3. 绝对定位 absolute positioning
        1. 元素整体脱离普通流
        2. 不会影响其兄弟元素
        3. 具体坐标由决定定位的坐标决定
    3. position和zindex
      1. zindex
        1. z-index值只决定同一父元素中的同级子元素的堆叠顺序
        2. z-index只能在position属性值为relative或absolute或fixed
        3. z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）
    4. Style标签放置的最佳位置
      1. head 里，提前加载样式
    5. 常见行内元素和块级元素
      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
    6. 居中
      1. 水平居中
        1. 行内元素
          1. text-align: center
        2. 块级元素
          1. 定宽
          2. margin: 0 auto
          3. 不定宽
          4. flex
          5. inline-block + text-align:center
      2. 垂直居中布局
        1. 文本垂直居中
          1. line-height:height
        2. margin + translate
        3. 表格
        4. flex
          1. justify-content
          2. 主轴
          3. align-center
          4. 交叉轴
          5. margin: auto
        5. margin + top
    7. 很好用的css3技能但可能比较少人知道的点
      1. vw、vh
      2. calc
      3. transition
    8. 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属性
        5. margin和padding属性，水平方向产生效果
      3. inline-block
        1. 对象呈现为inline对象，但是对象的内容作为block对象呈现
    9. margin: 0 auto水平居中原因
      1. 水平方向独占一行
      2. auto是自动分配剩余空间的意思
    10. 清除浮动
      1. 利用overflow清除浮动
      2. clear
        1. 利用伪元素（clearfix）
        2. 父元素结束标签之前插入清除浮动的块级元素
        3. 利用clear样式
    11. css *号
      1. *可以继承
      2. 从后向前
    12. 权重
      1. !important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
    13. 选择器匹配规则
      1. 从右向左
      2. 探究 CSS 解析原理
        1. https://juejin.im/entry/5a123c55f265da432240cc90
  3. JS
    1. XMLHttpRequest
      1. new XMLHttpRequest()
      2. xhr.open
      3. onload
        1. this.status == 200||this.status == 304
      4. jquery实现Ajax
    2. dom操作
      1. 基础
        1. 查
          1. document.getElementById
          2. document.querySelector
        2. 创建
          1. document.createElement
          2. document.createTextNode
        3. 修改
          1. appendChild
          2. insertBefore
          3. replaceChild
        4. 删除
          1. removeChild
      2. JS交换两个节点如何实现
    3. 事件
      1. 本质
        1. 事件驱动
          1. 浏览器中很多行为是异步
        2. 会创建事件并放入执行队列，等待当前代码执行完成
        3. GUI渲染线程与JS引擎线程互斥
      2. 绑定，监听，委托的区别
        1. 绑定
          1. HTML直接绑定
          2. 在JavaScript代码中绑定
          3. 绑定事件监听函数
      3. 事件委托
        1. 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
        2. 好处
          1. 减少重复工作
          2. 减少内存消耗
      4. 异步事件驱动
        1. 浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件
        2. 只有前面的处理完毕了，空闲了才会执行这个事件
      5. 事件流
        1. 冒泡
          1. 事件捕获
          2. 目标阶段
          3. 事件冒泡 （常用）
      6. 宏任务&微任务
        1. promise & setTimeout
    4. new & Object.create
      1. Object.create(proto, [propertiesObject])
      2. new 的过程？
      3. Object.create(null)
        1. 无原型的对象
    5. JavaScript是单线程还是多线程
      1. 单线程的，每个window包含一个JS线程
    6. 深拷贝和浅拷贝区别
      1. 子对象
    7. 模块化
      1. 好处
        1. 封装
        2. 可复用性
      2. 分类
        1. CommonJS
          1. 服务端环境
          2. 在浏览器端，模块需要提前编译打包处理
          3. 基于文件
          4. 同步加载
          5. 首次加载模块后，会缓存
          6. 输出的是一个值的拷贝
        2. AMD？
          1. AMD规范则是非同步加载模块，允许指定回调函数
          2. 为浏览器环境设计
          3. 异步
          4. 回调函数形式
        3. ES6 import
          1. 标准
          2. 输入值的引用
          3. 基于文件
          4. 静态分析
          5. 必须被用在其他语句或表达式的外部，而不能使用在if等代码块内部
          6. 原因之一是模块语法需要让 JS 能静态判断需要导出什么，正因为此，你只能在模块的顶级作用域使用 export与import
          7. 异步
        4. CMD
          1. CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行
        5. UMD
          1. 整合AMD和CMD，自动判断当前环境
      3. 循环引用问题
        1. commonjs
          1. 加载时执行
          2. 输入已执行部分
        2. ES6
          1. 动态引用，不存在这个问题
          2. 遇到import不会去执行模块，而是只生成一个引用
          3. 而是用到的时候再去取值
    8. js异步操作
      1. 　　回调函数
        1. 执行一个函数时，在函数内部处理操作，把操作结果以参数形式传入回调函数中
        2. 坏处
          1. 回调地狱
          2. 不利于阅读
          3. 不利于调整回调顺序
        3. 好处
          1. 代码清晰地表达出了执行关系
      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. 好
          1. 异步操作的同步写法
        2. 坏
          1. 反设计
          2. 容易引起性能问题
        3. async返回一个promise
        4. await让出线程，跳出async函数体
        5. Generator/function* 来实现
        6. await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。
      8. Observable
      9. 事件循环
        1. 执行一个宏任务（栈中没有就从事件队列中获取）
        2. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
        3. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
        4. 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
        5. 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
    9. 上下文
      1. 作用域链
        1. 本质
          1. 是指向变量对象的指针列表
          2. 变量对象
          3. arguments
          4. this
          5. 局部属性和方法
        2. 定义
          1. 每个函数都有自己的执行环境
          2. 当代码在一个环境中执行时，会创建作用域链
        3. 作用
          1. 保证对执行环境的所有变量和函数的有序访问
        4. 链
          1. 前端
          2. 当前代码所在环境的的变量对象
          3. 下一个变量，来自外部执行环境
          4. 最外层为全局执行环境
          5. 作用域链的尽头
          6. node
          7. global
          8. web
          9. window
        5. 变量搜索
        6. 静态作用域
      2. 变量对象
        1. 变量 (var, 变量声明);
        2. 函数的形参
        3. 函数声明 (FunctionDeclaration, 缩写为FD);
      3. this
        1. this是面向对象的表示
        2. 通过对象调用
        3. 其它
          1. window
        4. 本质
          1. this引用的是函数据以执行的环境对象
          2. 执行环境
          3. 全局执行环境
          4. 创建
          5. 当执行流进入一个函数时，函数的执行环境就会被推入环境栈中
          6. 销毁
          7. 在函数执行完之后，栈将其环境弹出，该环境被销毁
          8. 定义
          9. 每个执行环境都有一个与之关联的变量对象
          10. 环境中定义的所有变量和函数都保存在这个对象中
          11. 函数执行环境
          12. 函数调用时时
          13. 函数入栈
          14. 创建执行环境
          15. 创建作用域链
    10. 闭包
      1. 定义
        1. 函数和其相关引用对象组成的实体
      2. 闭包原理
        1. 从scheme语言借鉴来
        2. 基础
          1. 词法作用域
          2. 函数的变量作用范围可以超越创建的它的环境
        3. 在一些语言中，函数可以嵌套函数，当内部函数引用了外部函数的变量时，就有可能会形成闭包
        4. 由于有引用，不会被垃圾回收
      3. 弊端
        1. 内存占用过多
      4. 应用场景
        1. 模仿块级作用域
          1. settimeout 拿到正确的值
        2. 创建私有变量
        3. 封装相关的功能集
          1. 模块化
          2. jquery
        4. 设计单例模式？
        5. 惰性求值？
    11. 原型
      1. 两方面
        1. 对constructor模式的改善
          1. 对constructor模式的改善
          2. 避免重复定义
        2. 设计思想
          1. JS的设计思想
          2. 不同于面向类，基于原型的语言是对实例友好的
          3. 实现继承
      2. 铁三角
        1. 构造函数
          1. prototype指向原型对象
          2. constructor指向构Function
        2. 原型对象
          1. constructor指向构造函数
          2. prototype指向原型的原型
        3. 实例
          1. prototype指向原型对象
          2. constructor指向构造函数
      3. 组合继承？
      4. 读写
        1. 读
          1. 先遍历自身的属性，如果没有一层层往上层寻找
        2. 写
          1. 如果原型存在该属性，则对该实例自身创建属性
    12. ES6
      1. let
        1. 暂时性死区
          1. 存在，但是不让使用
          2. 所以提前使用会报错
      2. const
      3. 块级作用域
      4. =>
      5. 解构
      6. module
        1. 和CMD的区别
          1. ES6
          2. 静态分析
          3. 引用方式
          4. 异步
      7. Set
      8. map
      9. Object.observer()
      10. symbol
        1. 不可改变且唯一的
        2. 以被用做对象属性的键
        3. 对原始数据类型的隐式对象包装器。
        4. 可以用来避免被覆盖
      11. 模板字符串
    13. 数组判断
      1. Object.prototype.toString.apply([]) === "[object Array]"
      2. [].constructor === Array
      3. [] instanceof Array === true
      4. Array.isArray([])
    14. 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接口
    15. 箭头函数
      1. 比函数表达书更简洁
      2. 没有this和arguments
    16. 复制对象
      1. for-in
      2. object.assign()
        1. 浅拷贝
      3. JSON.parse(JSON.stringify(obj))
        1. 方法不能用于复制用户定义的对象方法
        2. 不能用于复制循环引用对象。
      4. 展开操作符(…)
        1. 浅拷贝
      5. 自实现
    17. 类型判断
      1. Object.prototype.toString.call('')
    18. 事件阻止
      1. 阻止传播
        1. event.Propagation()
          1. W3C
        2. event.cancleBubble()
          1. IE
      2. 默认事件
        1. event.preventDefault()
          1. W3C
        2. return false
          1. 原生JS事件
          2. 阻止默认行为
          3. jQuery
          4. 阻止默认行为
          5. 阻止冒泡
          6. W3c
        3. e.returnValue = false
          1. IE
    19. iterator接口？
      1. 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
      2. 各种数据结构，提供一个统一的、简便的访问接口
      3. 数据结构的成员能够按某种次序排列
      4. 供for...of消费
    20. 编解码
      1. escape
        1. 已从Web 标准中删除
        2. 对字符串进行编码，让计算机可以读取
        3. 编码集合
          1. 除
          2. ASCII 字母和数字
          3. ASCII 标点符号 - _ . ! ~ * ' ( )
      2. encode
        1. encodeURI
          1. 把字符串作为URI进行编码
          2. 目的是对 URI 进行完整的编码
          3. 编码集合
          4. 除
          5. 非转义字符
          6. 字母 数字 - _ . ! ~ * ' ( )
          7. 保留字符
          8. ; , / ? : @ & = + $
          9. 数字符号
          10. #
        2. encodeURIComponent
          1. 编码集合
          2. 除
          3. 字母 数字 - _ . ! ~ * ' ( )
          4. ;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号
          5. 十六进制的转义序列
      3. decode
        1. docodeURI
        2. decodeURIComponent
    21. 类型化数组
      1. 通用的、固定长度的二进制数据缓冲区
    22. JS开始执行时机
      1. window.load
        1. 必须等待网页中所有内容加载完毕后才能执行
      2. $(document).ready
        1. dom结构绘制完毕后开始执行
        2. 封装了ondomcontentready、ondomcontentloaded
  4. HTTP
    1. cookie和session
      1. cookie
        1. 服务器在本地机器上存储的小段文本
        2. 只能保管ASCII字符串
        3. 受浏览器安全策略限制
        4. 而Cookie保管在客户端，不占用服务器资源
      2. session
        1. 服务器端的机制
        2. 任何类型的数据
        3. Session存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险
        4. Session是保管在服务器端的，每个用户都会产生一个Session。假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存
    2. 基本概念
      1. 请求头
        1. request header
      2. 响应头
        1. response header
      3. 状态码
        1. 分类
          1. 1xx
          2. 信息响应类
          3. 2xx
          4. 处理成功响应类
          5. 3xx
          6. 重定向响应类
          7. 4xx
          8. 客户端错误类
          9. 400
          10. 客户端有语法错误，不能被服务器理解
          11. 401 未授权
          12. 403 拒绝提供服务
          13. 404
          14. 资源不存在
          15. 5xx
          16. 服务端错误
        2. 解决了什么问题
      4. 报文
        1. 是什么
          1. 承载多个请求参数的数据
        2. 报文格式
      5. 一次http完整的过程
        1. 输入网址
        2. 根据DNS，将域名解析为IP地址
        3. 建立TCP连接
          1. 三次握手
        4. 客户端发送报文
        5. 服务端应答
          1. 服务端返回状态码和请求体
        6. 关闭TCP连接
    3. Accept - Encoding的作用，和性能有关系
      1. 对body部分进行编码，达到压缩的目的
      2. 编码类型
        1. gzip
          1. 好处
          2. 节省空间
          3. 弊端
          4. JPEG这类文件用gzip压缩的不够好
        2. compress
        3. deflate
          1. zlib
    4. 请求方式
      1. get和post区别
        1. 同
          1. TCP链接
          2. 底层是TCP/IP
          3. GET和POST能做的事情是一样的
        2. 定义
          1. get
          2. Get是向服务器发索取数据的一种请求
          3. post
          4. Post是向服务器提交数据的一种请求
        3. 不同
          1. 长度
          2. get
          3. 无长度限制
          4. 但是浏览器会对URL厂区做出限制，2000多个字符
          5. post
          6. 无长度限制
          7. 大多数服务器最多处理64K大小的url
          8. 字符
          9. get
          10. ASCII字符
          11. post
          12. 没有限制
          13. 编码
          14. get
          15. application/x-www-form-urlencoded
          16. post
          17. POST支持多种编码方式
          18. 安全
          19. get
          20. GET参数直接暴露在URL上
          21. post
          22. POST参数在HTTP消息主体中
          23. 不会被保存在浏览器历史
          24. 缓存
          25. get
          26. 请求会被浏览器主动缓存
          27. post
          28. POST不会
          29. 浏览器
          30. GET请求参数会被完整保留在浏览器历史记录里
          31. 而POST中的参数不会被保留
          32. 建立过程？
          33. 产生一个TCP数据包
          34. 浏览器会把http header和data一并发送出去，服务器响应200（返回数据）
          35. 产生两个TCP数据包
          36. 浏览器先发送header，服务器响应100 continue
          37. 浏览器再发送data，服务器响应200 ok（返回数据）
          38. https://zhuanlan.zhihu.com/p/25028045
        4. https://www.zhihu.com/question/20552352
      2. 请求类型
        1. get
        2. post
          1. 创建
        3. put
          1. 更新
        4. delete
        5. head
          1. 仅仅返回相应的头部，没有具体的响应体。它也不会对服务器造成其他影响
        6. TRACE
        7. options
          1. OPTIONS允许客户端请求一个服务所支持的请求方法。它所对应的响应头是Allow，它非常简洁地列出了支持的方法。下面为服务端成功处理了OPTIONS请求后，响应的内容：
          2. Allow: HEAD,GET,PUT,DELETE,OPTIONS
          3. 发生时机？
        8. connect
        9. 用途？
    5. websocket
    6. 异步请求和同步请求的区别
      1. 异步请求
        1. 并行处理
        2. 不等待
      2. 同步请求
        1. 顺序处理
        2. 等待
    7. TCP/IP
      1. 协议集
        1. 应用层
        2. 传输层
        3. 网络层
        4. 网络访问层
      2. 三次握手
        1. 1 客户端到服务器
          1. 等待确认
        2. 2 服务器告诉客户端，收到消息，进入等待状态
        3. 3 客户端收到消息，发送确认包
        4. 然后，再传递消息
        5. 断开连接时服务器和客户端均可以主动发起断开TCP连接的请求
      3. 四次分手
        1. 客户端提出分手请求
        2. 服务端收到请求，关闭连接
        3. 并提出反方向关闭请求
        4. 客户端对服务端请求确认，双方向的关闭结束
    8. http2
      1. 多路复用
        1. 相同域名请求通过同一个TCP链接并发完成
      2. Hpack头压缩
      3. 二进制传输
        1. 1.x为文本格式
      4. 服务端推送
      5. 解决队头阻塞问题
        1. 帧
        2. 流
      6. vs 1.x keep alive
        1. 1.x 串行传输
    9. https？
      1. 证书颁发机构CA
      2. https的信任基于预先安装在浏览器中的证书颁发机构
        1. 我信任证书颁发机构我应该信任的
      3. HTTPS报文中的任何东西都被加密，包括所有报头和荷载。
      4. 和http的差异
        1. 端口
          1. http
          2. 默认80端口
          3. https
          4. 默认443端口
      5. 加密
        1. 对称加密
        2. 非对称加密
        3. 中心化加密
        4. 去中心化加密
      6. https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74
  5. 优化
    1. 性能优化
      1. 原则
        1. 选择合适的衡量指标、测试用例、测试环境，找到瓶颈
          1. 度量
          2. 首次有效渲染
          3. 重要渲染时间
          4. 可交互时间
          5. 输入响应
        2. 不要过早优化
        3. 忌过度优化
        4. 性能优化是持久战
      2. 方向
        1. 语言本身
          1. css
          2. 嵌套
          3. 合理使用硬件加速
          4. 少用高消耗属性
          5. calc
          6. shadow
          7. js
          8. 语法
          9. 针对JIT的优化
          10. 隐藏类
          11. WebWorker
          12. 框架
        2. 网络
          1. 分类
          2. 缓存技术
          3. 负载均衡
          4. 压缩
          5. 优化协议（HTTP,HTTP2.TCP/IP）
          6. CDN
          7. 减少HTTP请求为何能优化速度
        3. 构建
          1. 压缩
          2. 分包
          3. tree shaking
          4. aot
          5. 并行处理
        4. 容器类优化
          1. 引擎优化
          2. Wasm
          3. 整体结构优化
          4. RN
          5. fluter
          6. 混合应用
          7. Hybrid
          8. 小程序
    2. 性能优化
      1. 页面加载链路优化
        1. 网络
          1. CDN
          2. HTTP请求数量
          3. 压缩
        2. 资源
          1. 分包
          2. 压缩
          3. 懒加载
          4. 缓存
          5. 热加载&离线包
        3. 首屏
          1. 首屏处理
          2. 外壳处理
          3. 拆分过程，并行处理
      2. runtime优化
        1. 容器
          1. WKWebview
          2. V8
          3. 内联类
          4. wasm
          5. RN
          6. canvas
          7. webgl
          8. 硬件加速
        2. 语言层面
          1. CSS
          2. JS
        3. 框架层面
        4. 视觉
          1. 动画
        5. 交互
          1. 避免重排重绘
          2. fastclick
          3. 解决问题
          4. 300ms延迟
          5. 原因
          6. 移动浏览器存在双击缩放或双击放大操作
          7. 第一次点击之后，系统需要等待300ms，以判断用户是否再次点击了屏幕
          8. 事件发生顺序
          9. touchstart
          10. touchmove
          11. touchend
          12. click
          13. 解决方法
          14. 禁用缩放
          15. user-scalable=no
          16. 但同时也禁用了双指缩放操作
          17. 更累默认视口宽度
          18. <meta name="viewport" content="width=device-width"></code>
          19. 仍可进行双指缩放操作
          20. 指针事件
          21. pointerdown事件
          22. css touchaction: none
          23. 是否触摸操作会触发用户代理的默认行为
          24. zepto tap
          25. document
          26. touch事件
          27. 计算时间和位置差
          28. fastlick
          29. 监听touchend
          30. 发出自定义click事件
          31. 把原来的click事件阻止掉
  6. 方案
    1. 自适应方案
      1. 响应式布局
        1. 通过媒体查询
        2. viewport缩放
          1. 简单、高效
        3. rem布局
          1. 动态设置根元素font-size，等比缩放元素大小
    2. lazyimage
      1. 图片先用占位图表示，属性放到data里面
      2. 页面加载完成后，监听窗口滚动，
      3. 当图片出现在视口内，再赋予真实的地址
  7. 安全
    1. DOS攻击
    2. XSS攻击与防御
      1. 含义
        1. 跨站脚本攻击
      2. 方法
        1. 恶意将未经过滤的代码植入到页面中
      3. 分类
        1. 反射性
          1. URL到页面
        2. 持久型
          1. 数据库
      4. 避免
        1. 常见符号编码转换
          1. & < > " ' /
        2. 对诸如<script>、<img>、<a>等标签进行过滤
        3. HttpOnly
          1. 避免cookie劫持
      5. HTML 属性、HTML 文字内容、HTML 注释、跳转链接、内联 JavaScript 字符串、内联 CSS 样式表等，所需要的转义规则不一致。 业务 RD 需要选取合适的转义库，并针对不同的上下文调用不同的转义规则。
    3. CSRF攻击
      1. 跨站请求伪造
        1. 攻击者盗用了用户的身份，以用户的名义发送恶意请求
        2. 在不同的domain下，攻击者却能为造出”用户本人发出的request“
      2. 避免
        1. 关键请求使用验证码或者token机制
        2. 验证码
        3. 在HTTP 头中自定义属性并验证
        4. Cross Site
          1. 验证 HTTP Referer 字段
          2. 具体来说就是服务器每次返回客户端页面的时候，在页面中埋上一个token字段
        5. SameSite
      3. 参考
        1. https://blog.techbridge.cc/2017/02/25/csrf-introduction/
    4. HTTP劫持与对策
      1. https
  8. 浏览器
    1. 渲染过程
      1. JS触发reflow？
        1. JS
          1. 影响到DOM变化
        2. Style
          1. 根据css计算变化后的dom样式
        3. layout
          1. 计算每个 DOM 元素最终在屏幕上显示的大小和位置
        4. Paint
          1. 为每个dom填充像素
          2. 本质上就是填充像素
          3. 一个DOM的所有可是效果
          4. 这个绘制过程是在多个层上完成的。
        5. Composite
          1. 渲染层合并
          2. 在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上
          3. 完成绘制之后，浏览器会按照所有层顺序，合理的合并成一个图层，显示在屏幕上
          4. 某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，
        6. 扩展
          1. 某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
          2. 每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。
        7. http://taobaofed.org/blog/2016/04/25/performance-composite/
      2. 层压缩
        1. 原因
          1. 大量合成层来，而每个合成层都要消耗 CPU 和内存资源，岂不是严重影响页面性能
    2. 事件模型
      1. DOM0级模型
        1. 事件不会传播，即没有事件流的概念
        2. btn.onclick = fun;
      2. DOM2级模型
        1. W3C标准模型
        2. 三个阶段
          1. 捕获
          2. 目标
          3. 冒泡
    3. 兼容问题
    4. WebGL渲染的过程？
    5. 缓存策略
      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
    6. 同源策略
      1. 定义
        1. 限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
      2. 协议，端口（如果有指定）和域名
    7. web语义化
      1. 使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
    8. 线程
      1. 含义
        1. 程序执行中一个单一的顺序控制流程
      2. 为什么浏览器是单线程设计
        1. 如果JavaScript是多线程的方式来操作这些UI DOM，则可能出现UI操作的冲突
      3. 浏览器中的线程
        1. 界面渲染线程
          1. GUI 渲染线程 与 JavaScript引擎线程互斥
        2. javascript引擎线程
        3. Http请求线程
        4. 定时触发器线程
        5. 浏览器事件触发线程
    9. 进程
      1. 含义
        1. 代表CPU所能处理的单个任务
          1. 有单独的内存区域
      2. 和线程的关系
        1. 一个进程由一个或多个线程组成
        2. 线程是一个进程中代码的不同执行路线
        3. Chrome浏览器使用多个进程来隔离不同的网页
    10. HTML加载过程？
      1. 输入地址，返回HTML
      2. 加载DOM
        1. 遇到body标签
          1. 加载并渲染DOM
        2. 浏览器遇到dom元素时，正常顺序加载，边加载边渲染
        3. 内联CSS
          1. 浏览器继续加载，但渲染被阻塞
          2. 生成新的CSS Rule Tree
          3. 生成后重新渲染界面
        4. 内联Javascript
          1. DOM的加载和渲染同时被阻塞
          2. 由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞
        5. 外联Javascript
          1. DOM的加载和渲染同时被阻塞
      3. render tree
      4. layout
      5. 文档碎片？
        1. 内存
        2. 合成一个DOM？
    11. 内存管理
      1. 概念
        1. 像C语言一般都有自己的内存管理接口，JS创建变量时分配内存，而不再使用时再释放内存。
      2. 方法
        1. 标记清除
          1. 从根部开始遍历，找出不再使用的变量
          2. 阶段
          3. 初始阶段
          4. 标记阶段
          5. JS会停止运行
          6. 清楚阶段
          7. V8
          8. 增量标记
        2. 引用计数
          1. 优势
          2. 算法简单
          3. 释放时间快
          4. 劣势
          5. 循环引用问题
          6. 对计数要求高
          7. 不能并行计算
      3. 堆内存
        1. 全局变量
        2. 对象的引用
        3. 事件
        4. 定时器
      4. 堆和栈的区别
        1. 堆
          1. 动态分配的内存，大小不定也不会自动释放
          2. JS中引用类型占据空间大、大小不固定，栈内存中存放地址指向堆内存中的对象。按引用访问
        2. 栈
          1. 自动分配的内存空间，由系统自动释放
          2. 基本类型占据空间小、大小固定，值保存在栈空间。按值来访问
      5. 内存泄漏实例？
    12. 内核
      1. KHTML
      2. Webkit
        1. 是排版引擎
        2. 01年开始苹果
        3. 组件
          1. JS Core
          2. webcore
          3. Drosera
          4. 调试工具
        4. 组成
          1. 渲染引擎
          2. HTML解释器
          3. CSS解释器
          4. 布局
          5. JS引擎
          6. JS 引擎
          7. 源代码 –> 抽象语法树 –> 字节码（跨平台） –> JIT –> 本地代码
      3. Blink
        1. blink
          1. 13年，webkit的分支
          2. V8
  9. 框架
    1. Angular
      1. 脏值检查
        1. 数据何时变化
          1. 用户输入
          2. 请求服务端数据
          3. 定时事件
        2. 监听变化
          1. 使用zone.js Monkey patch的方式，监听所有异步事件
        3. 变化检测
          1. 新旧数据对比
          2. angular改善的脏检查
          3. 组件树
          4. 每个组件都有自己的变化检测器
          5. 变化检测器树
          6. 数据流自上而下
          7. 高效
          8. 可预测
          9. 相比之下，AngularJS采用的是双向数据流，错综复杂的数据流使得它不得不多次检查，使得数据最终趋向稳定。理论上，数据可能永远不稳定。AngularJS给出的策略是，脏检查超过10次，就认为程序有问题，不再进行检查。这个10，我不知道它的给出依据是什么，也许是个经验值吧。
          10. 变化检测对象
          11. 定制变化检测
      2. DI
        1. 目标
          1. 控制反转
          2. 好处
          3. 降低代码之间的耦合度
          4. 每个对象都需要获取与其合作的对象（也就是它所依赖的对象）的引用。如果这个获取过程要靠自身实
        2. 实现方式
          1. 依赖注入
          2. Injector会自动帮你将需要的依赖注入到类的构造器里，并返回这个类的实例
        3. 使用的三个技术
          1. reflect-metadata
          2. typescript
          3. Decorator
      3. 数组绑定
      4. 生命周期
        1. ngOnChanges
        2. ngOnInit
        3. ngDoCheck
        4. ngAfterContentInit
          1. 在外来内容被投影到组件中之后/投影组件内容的变更检测之后调用
        5. ngAfterContentChecked
        6. ngAfterViewInit
          1. 初始化完/检测变更完组件视图及其子视图之后调用。
        7. ngAfterViewChecked
        8. ngOnDestroy
    2. Vue
      1. 数据绑定
        1. 实现原理
          1. 数据劫持的方式来做数据绑定
          2. 方法
          3. Object.defineProperty()
          4. getter
          5. setter
          6. notify
          7. 监听变化
          8. Watcher
          9. Observer
    3. React
      1. 本质
        1. 规范
        2. 接口
      2. 数据绑定
        1. 数据变化
          1. setState()通知变化
        2. 数据更新
          1. virtual DOM
          2. 原理
          3. 本质上就是在 JS 和 DOM 之间做了一个缓存
          4. 会跟踪每一个组件的依赖关系
          5. 弊端
          6. 如果你的应用中，交互复杂，需要处理大量的UI变化，那么使用 Virtual DOM 是一个好主意。如果你更新元素并不频繁，那么 Virtual DOM 并不一定适用，性能很可能还不如直接操控 DOM。
          7. 好处
          8. diff
          9. 抽象
          10. diff算法
      3. react渲染机制、key的用途
      4. 生命周期
        1. shouldComponentUpdate
        2. componentWillUpdate
        3. componentDidUpdate
        4. componentWillMount
        5. componentDidMount
        6. componentWillReciveProps
        7. componentWillUnmout
        8. render
      5. state和props
        1. state是做为状态管理
        2. 而props相当于api，由外界传入
      6. 问题
      7. setState
        1. this.updater
          1. 合并旧state
          2. 放进state队列，等待更新
          3. 集齐一批需要更新的组件然后一起更新
          4. updater
          5. react-dom
          6. render
          7. 它是异步的
      8. 没有脏值检查？
    4. 大三框架的比较
      1. 同
        1. 都以组件化为核心
        2. 都利用了MVVM设计模式
        3. 都可以完成各式的前端项目，只是方式和灵活度不同
      2. 不同
        1. 核心思想
          1. react
          2. 对view层的抽象定义，规范化、接口化
          3. vue
          4. 以组件化和MVVM为核心，小而轻
          5. angular
          6. 利用用先进的设计模式和思想，提供系统化的解决方案，大而全
        2. 适合工程
          1. react
          2. 最适合抽象和跨端项目
          3. 中小型项目vue更合适，只是vue生态不及react
          4. vue
          5. 中小型工程
          6. angular
          7. 中大型工程
        3. 独特的优势
          1. react
          2. 极度抽象，跨平台
          3. vue
          4. 渐进式增强，对小项目非常友好
          5. angular
          6. 系统化、优秀的设计模式和思想
          7. 内置的优化解决方案
          8. MVC
          9. 单例
          10. 观察者
          11. 数据流
          12. 依赖翻转
          13. typescript
          14. CLI
        4. 缺点
          1. react
          2. 过度自由
          3. 太过抽象
          4. vue
          5. 学习者的姿态
          6. angular
          7. 小项目收益低
          8. 学习曲线高、概念多、难以理解
    5. MVVM和Virtual Dom比较
      1. 初始渲染：Virtual DOM > 脏检查 >= 依赖收集
      2. 小量数据更新：依赖收集 >> Virtual DOM + 优化 > 脏检查（无法优化） > Virtual DOM 无优化
      3. 大量数据更新：脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM（无法/无需优化）>> MVVM 无优化
  10. 架构
    1. 三种软件架构
      1. 目标
        1. 面向GUI编程领域
      2. 分类
        1. MvvM
          1. 软件架构模式
          2. 软件逻辑和数据逻辑分离开来
          3. 视图模型是暴露公共属性和命令的视图的抽象
          4. 包含
          5. 模型
          6. 代表真实状态的数据模型
          7. 视图
          8. 视图模型
          9. 暴露公共属性和命令的视图的抽象
          10. 绑定器
          11. 声明性数据和命令绑定
          12. 绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图
        2. MVC
          1. 模型
          2. 控制器
          3. 视图
        3. MVP
          1. 对MVC的变种
          2. Presenter 可以理解为松散的控制器，其中包含了视图的 UI 业务逻辑
  11. 实践
    1. 典型项目
      1. 项目
        1. 数据配置平台
      2. 身份
        1. 主导者
        2. 设计者
        3. 开发者
      3. 系统
        1. 数据配置
        2. 粒度划分
          1. 空间
          2. 项目
          3. 项目
        3. 回滚
        4. 权限
        5. 用户管理
        6. 日志
        7. 良好的交互
      4. 技术选型
        1. angular
        2. node.js
        3. mongodb、mysql
        4. php + mysql
      5. 遇到的问题
        1. 配置形式
          1. 配置的表达形式
          2. json
          3. 针对每个业务进行可视化开发
          4. 策略
          5. 解决方案
          6. json和可视化自动转换方案
          7. 操作
          8. 研发使用json进行数据编辑
          9. 业务方使用可视化进行编辑
          10. 原理
          11. 正向
          12. json string
          13. monaco编辑器
          14. 转成comment json
          15. 包含注释信息的json
          16. 解析comment json
          17. 取出数据和标题
          18. 转成angular form reactive表达形式
          19. 将form reactive转化为视图
          20. 针对每种数据类型做优化
          21. 数字
          22. 字符串
          23. 布尔型
        2. php接口逻辑和压力
          1. 自动化测试脚本
          2. 压力测试
          3. 每天上亿的流量
      6. 如何解决问题
        1. 理解目标、找到瓶颈
    2. 监控和优化案例
  12. 工程化
    1. WebPack打包原理
      1. require
        1. 根据node的规范封装的模块化
      2. 名词
        1. loader
          1. 模块转换器
        2. plugin
          1. 自定义打包流程
      3. 过程
        1. 准备
          1. 加载所有插件
        2. 确定入口文件
        3. 编译
          1. 递归寻找模块依赖
          2. 调用loader对模块进行编译
        4. 资源输出
          1. 输出chunk文件
  13. 软
    1. 未来工作计划
    2. 为什么选择前端
    3. 平时关注新技术吗？哪些渠道
    4. 项目选型
    5. 缺点
    6. 跳
  14. 简单算法
    1. 数组去重
      1. Array.from(set)
      2. 排序后去重
      3. filter
      4. 双层循环
    2. 频率控制
      1. 防抖 debounce
        1. 含义
          1. 高频事件
          2. n秒内只执行一次
          3. 如果n秒内再次被触发，则重新触发时间
        2. 实现思路
          1. 每次事件触发后，都取消原来的延时处理方法
      2. 节流 throttle
        1. 含义
          1. 在n秒内忽略随后发出的源值
        2. 实现思路
          1. 每次触发事件时，都判断当前是否有延时函数
    3. 数组扁平化
      1. Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})
  15. 高级应用
    1. 状态管理
      1. redux
        1. JavaScript 状态容器，提供可预测化的状态管理
        2. 动机
          1. state过多，来源复杂
          2. 服务器数据
          3. 缓存
          4. 路由
          5. 让state的变化可预测
        3. 好处
          1. 一个action对应了一个完整的应用状态
          2. 历史记录功能
          3. 易于测试
          4. reducer是纯函数
        4. 概念
          1. action
          2. 行为、指令
          3. store的唯一数据来源
          4. reducer
          5. 响应action，并发送到store
          6. store状态容器
      2. mobx
    2. rxjs
  16. Pendding
    1. HTML加载过程？
      1. http://fex.baidu.com/blog/2014/05/what-happen/