聚集核心,never give up!!!

浏览器相关的

  • [] 浏览器渲染原理
  • [] 同源策略和跨域
  • [] http缓存

网络相关

  • [] http1.0/http2.0/http3.0
  • [] tcp/udp
  • [] tcp三次握手和四次挥手
  • [] https工作原理
  • [] cdn回源

vue源码

  • mvvm模式
  • vue双向绑定原理
  • $nextTick
  • watch和computed
  • 依赖收集
  • slot应用及原理
  • 封装Vue.extend实例
  • 手写vue-router
  • 手写vuex
  • vue3核心熟悉composition API

css

  • [] 清除浮动
  • [] flex
  • [] BFC(如何触发BFC,渲染规则以及应用场景)
    什么是BFC

webpack相关原理

  • 构建过程
  • 手写webpack
  • 手写loader和plugin
  • 热更新原理
  • 分包策略(splitChunk)
  • 打包流程优化

前端安全

  • [] xss
  • [] csrf

设计模式

  • 单例模式
  • 策略模式
  • 发布订阅模式
  • 工厂模式
  • 外观模式
  • 装饰器模式
  • 代理模式
  • 迭代器模式

ts理解

  • interface
  • type
  • [] 装饰器
  • [] 泛型应用

基本算法

  • 排序
  • 栈
  • 队列
  • 二叉树
  • 链表
  • 滑动窗口
  • DFS
  • BFS

手写代码

  • handwriting series

其他拓展

  • js和bridge
  • webview
  • vue-cli
  • axios

代理设置

1
2
3
4
5
6
7
8
第一步 http://xx.cn.com/tig-cpp/report/query
第二步 baseURL: '/cpp',
第三步
      '/cpp': {
        target: 'http:/xx.cn.com',
        ws: true,
        changeOrigin: true
      },

回溯，自问自答

css

  • 高度塌陷原因是什么
    在文档流中，父元素会默认被子元素撑开，一旦子元素设置浮动，完全脱离文档流，就会导致子元素无法撑起父元素的高度，就会产生父元素高度塌陷问题
  • clear 属性清除浮动的原理是什么？

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
const insertSort = (arr) => {
  let len = arr.length
  for(let i = 1; i < len; i++) {
    let temp = arr[i]
    let j = i
    while(j > 0 && arr[j-1] > temp) {
      arr[j] = arr[j - 1]
      j --
    }
    arr[j] = temp
  }
  return arr
}

选择排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var selectSort = (arr) => {
  let len = arr.length;
  let min = 0
  for(let i=0;i < len; i ++) {
    min = i
    for(let j = i;j <len; j++) {
      if (arr[j] < arr[min]) {
        min = j
      }
    }
    [arr[min], arr[i]] = [arr[i], arr[min]]
  }
  return arr
}

快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var quickSort = (arr) => {
  if (arr.length < 2) {
    return arr
  }
  let mid= arr[0]
  let left = []
  let right = []
  // 从1开始的哦
  for(let i = 1 ; i <arr.length; i++) {
    if (arr[i] > mid) {
      right.push(arr[i])
    } else {
      left.push(arr[i])
    }
  }
  return [
    ...quickSort(left), mid, ...quickSort(right)
  ]
}