画布 1
知识点
  js
    es6
      promise
        手写promise
        promise方法的实现
          all
          race
          并发池
      async await
      proxy
      event loop
        浏览器
          promise
          setTimeout
        node
          process.nextTick
          promise
          setTimeout
          setImmedate
      setTimeout, setInterval, requestAnimationFrame
    基础
      typeOf 和 instanceof
      this
        指向
        原理
      闭包
      深浅拷贝
        浅拷贝
          Object.assign()
          const a={...b}
        深拷贝
          JSON.parse(JSON.stringify(obj))
            Date、Reg、 函数无法拷贝
          MessageChannel (函数无法拷贝)
          递归
          proxy
          Lodash
      原型
        继承
          常用的继承方式
          class的继承方式
      模块化
        自执行
        amd cmd
        commonjs
    进阶
      call apply bind
      instanceof 的原理
      垃圾回收
  typeScript
    配置
      tsconfig.json
    基础语法
      原始类型
        数字
        字符串
        空值 void
        null undefined
        symbol
        bigint
      其他常见类型
        any
        unkown
        object
        never
        数组
          number[]
          Array<number>
        元组
      高级类型
        交叉类型
          A & B 取并集
        联合类型
        联合字面量
      枚举 enum
        数字枚举
          原理：反向映射
        字符串枚举
          不是反向映射
        异构枚举（不建议使用）
      接口
        可选属性
        只读属性
        可索引
        继承
      class
        抽象类 abstract
        访问限定符
          public
          private
          protected
        class 也可作为接口
      函数
        定义函数类型
        参数
          可选参数
          默认参数
          剩余参数
        重载
      泛型
      类型断言
      interface和type的区别
      indes.d.ts 声明文件
      TODO:
  css
    预处理器
      less
      sass/scss
    1像素方案
      less/scss方法混合
  html
  源码阅读
    jquery
    vue
    vuex
    dayjs
    axios/umi-request
    fastClick
    js-cookie
    promise
  性能优化
    webpack
      loader
        include 或 exclude 来帮我们避免不必要的转译
      DllPlugin
      Happypack
      按需加载
      gzip
    图片
      类型的选择
        jpg
        png
        gif
        svg
        base64
        webp
        雪碧图
    缓存
      Service Worker Cache
      Memory Cache
      HTTP Cache
      Push Cache
    服务端渲染ssr
    pwa
    浏览器
      css渲染规则 书写规范
      js加载方式
      dom
        Fragment
      重绘和回流
        重绘
        回流
    资源加载
      预加载
      预渲染
      懒加载
      CDN
    实践
      首屏优化
        骨架屏
        lazy-load
      事件
        节流
        防抖
  监控
    埋点监控
      pv.uv,事件
      tracker原理
    性能监控
      performce
    异常监控
      window.error
      try{} catch{
// todo
}
      unrejectionhander
      vue,react 错误钩子
      sentry(对window.error重新和补充)
        上传sourceMap
          去除map文件
        收集用户信息
  测试
    单元测试
      jest
      Vue Test Utils
  GraphQL
  遇到的问题以及解决方案
    vue微信签名验证
      hash模式
      history模式
        ios 当前页 落地页
        安卓
  工作内容
    技术
      公用组件
        图片上传
        图片预览
    业务
  node.js
    核心模块
      1.events事件
      2.path路径
      3.fs文件
      4.proecess全局进程
      5.http模块
      6.url模块
      7.zlib压缩
      8.stream流
      9.readline逐行读取
      10.querystring
      11.module
      12.buffer缓冲器
      13.dns域名服务器
    框架
      express
      koa
      koa2
      egg
  跨端方案
  npm script 打造工作流
  webpack
    基础
      entry
      output
      webpack-dev-server
        proxy
        host
        hot
      resolve
        alias
        extensions
          extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
// 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js
        modules
      module
        loader
          css
            less-loader
            sass-loader
            extract-text-webpack-plugin
          文件
            url-loader
            file-loader
          js
            babel-loader
      pugin
        html-webpack-plugin
        webpack.DefinePlugin
        copy-webpack-plugin
          有些文件没经过 webpack 处理，但是我们希望它们也能出现在 build 目录下，这时就可以使用 CopyWebpackPlugin 来处理了
    进阶
      模块解析规则
        相对路径
          1.查找相对当前模块的路径下是否有对应文件或文件夹
          2.是文件则直接加载
          3.是文件夹则继续查找文件夹下的 package.json 文件
          4.有 package.json 文件则按照文件中 main 字段的文件名来查找文件
          5.无 package.json 或者无 main 字段则查找 index.js 文件
        模块名解析
          查找当前文件目录下，父级目录及以上目录下的 node_modules 文件夹，看是否有对应名称的模块
        绝对路径（不推荐）
          直接查找对应路径的文件
      开发环境配置
      HM热更新原理
      分离代码文件
      按需加载
      手写loader
      手写plugin
        去除map文件
        没用到文件扫描
      提升 webpack 的构建速度
        resolve
        loader
        DLLPlugin
      webpack原理
  vue
    vue2.x
      数据响应原理
        Object.defineProperty 的缺陷
      依赖收集
      nextTick
      virtual dom
      diff
      mvvm
      生命周期
      组件通信
        父子
        祖孙
        兄弟
        全局
          vuex
          eventBus
      组件封装原则
    vue3.0
      数据响应原理 proxy
    vue-cli3.x
    vuex
      原理
    vue-router
      原理
        hash
        hsitory
  react
    hooks
    redux
    Immutable
  小程序
    框架
      mpvue
      taro
  设计模式
    工厂模式
      vue 创建一个vNode节点的时候
    单例
      vuex中用到
    适配器模式
      axios node和浏览器适配
      get post put 等方法的适配
    装饰模式
      react
      高级组件
    代理模式
      浏览器事件代理(冒泡)
      es6 proxy
    策略模式
      if-else 重构为 {tag:{}, tag2:{}}
    发布-订阅模式（观察者模式）
      vue数据响应，依赖收集
    外观模式
      兼容浏览器事件
    迭代器模式
  数据结构和算法
    数据结构
    算法
      排序
        冒泡
        插入
        选择
        快速
        归并
      时间复杂度
  混合开发
    坑
      1.1像素
      2.ios 滑动不流畅
        .wrapper {
-webkit-overflow-scrolling: touch;
}
      3.ios上下空白
      4.点击穿透
        1.touchsart 代替 click
        2.fastClick
  浏览器
    安全
      xss
      csp
      CSRF
        防御
          token
          Cookie 设置 SameSite 属性
          验证 Referer
      点击劫持
        恶意嵌套iframe
        X-FRAME-OPTIONS
          DENY，表示页面不允许通过 iframe 的方式展示
          SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示
          ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示
    浏览器渲染原理
      1.html dom树
    事件机制 事件代理
    存储
      cookie
      storage
      Service Worker
      indexDB
    缓存
      Service Worker
      Memory Cache
      Disk Cache
      Push Cache
      最后才去请求网络
    跨域问题
      JSONP
      CORS
      document.domain
      postMessage
    bom操作
  网络
  git
    branch
      删除分支
        git branch -d feat1
        git branch -D feat2
    merge
      取消merge: git merge -- abort
    git show
      git show e72w12
    diff
      工作区和暂存区：git diff
      暂存区和上一次提交：git diff --cached
      工作区和上一次提交: git diff HEAD
  正则
  代码构建部署
function structuralClone(obj) {
return new Promise(resolve => {
const { port1, port2 } = new MessageChannel()
port2.onmessage = ev => resolve(ev.data)
port1.postMessage(obj)
})
}
var obj = {
a: 1,
b: {
c: 2
}
}
obj.b.d = obj.b
// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const test1 = async () => {
const clone = await structuralClone(obj)
console.log(clone)
}
test1()
https://www.jianshu.com/p/4f07ef18b5d7
缺点
1.性能
2.循环引用
1.Immer: https://github.com/immerjs/immer
2.源码地址: https://github.com/KieSun/Dream/blob/master/content/toys/deepClone/index.js
const adda: (a: number, b: number) => number = (a: number, b: number) => a + b
// 重载
interface Direction {
top: number
right: number
bottom: number
left: number
}
function assigned(all: number): Direction
function assigned(topAndBottom: number, leftAndRight: number): Direction
function assigned(top: number, right: number, bottom: number, left: number): Direction
// 代码实现函数不可被调用
function assigned (a: number, b?: number, c?: number, d?: any) {
if (b === undefined && c === undefined && d === undefined) {
b = c = d = a
} else if (c === undefined && d === undefined) {
c = a
d = b
}
return {
top: a,
right: b,
bottom: c,
left: d
}
}
/*创建一个空VNode节点*/
export const createEmptyVNode = () => {
const node = new VNode()
node.text = ''
node.isComment = true
return node
}
let Vue // bind on install
export function install (_Vue) {
if (Vue && _Vue === Vue) {
// 如果发现 Vue 有值，就不重新创建实例了
return
}
Vue = _Vue
applyMixin(Vue)
}
import { connect } from 'react-redux'
class MyComponent extends React.Component {
// ...
}
export default connect(mapStateToProps)(MyComponent)
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture)
return true
} else if (elm.attachEvent) {
var r = elm.attachEvent("on" + evType, fn)
return r
} else {
elm["on" + evType] = fn
}
}