我遇到的常问的八股

一、HTＭL

1. script的async和defer属性

二、css

1. position定位属性——注意absolute是相对于哪些父容器定位的
2. 垂直居中布局可以怎么实现——会根据你得回答进行引申问题，如flex有哪些属性，grid布局和flex布局具体怎么实现等
3. 格式化上下文-BFC——
   1. 最好从为什么需要设置bfc(上下div margin重叠,浮动布局高度塌陷等)
   2. 到怎么设置BFC,哪些方式可以设置BFC
   3. 设置后有什么作用(即解决那些问题)来说
4. 块级元素和行内元素区别

三、JS

1. 闭包——
   1. 闭包的概念
   2. 常见的闭包应用场景
   3. 可能会导致的问题——内存泄漏
   4. 内存泄漏的排查方式——浏览器的memory，performance，lighthouse
2. 作用域链——目前这个的具体考察比较少
3. 原型和原型链——
   1. 构造函数的prototype属性和实例化对象的proto属性的关系，例用这个关系在原型中添加方法实现工厂函数模式
   2. 利用原型链进行继承，基本原理是构造函数A的prototype属性指向构造函数B的prototype属性（不能直接相等，使用object.create 或者使用对象的方式进行继承）
4. promise——：
   1. promise解决了什么问题
   2. promise all，allsetted，any，race，some等api
5. this——：
   1. this指向问题，new ，aplly，call，bind和默认绑定模式优先级，
   2. new初始化的对象还能通过apply等修改this对象吗，
   3. 函数使用call，apply绑定this后，还能再次进行this绑定吗？
   4. bind呢?bind 返回的那个新函数才会“永久”固定 this，原函数依旧可以再次被 call/apply。
   5. 以及箭头函数的this绑定
6. 数组相关方法：
   1. push pop shift unshift map sort every any some reverse reduce filter slice splice join split concat等
   2. 哪些数组相关方法会影响原数组哪些不会？
   3. 具体每个方法的作用是什么
7. 深拷贝和浅拷贝
   1. 哪些实现的是浅拷贝，深拷贝怎么实现
8. 事件循环：
   1. 哪些是宏任务 微任务
   2. 执行顺序
9. 防抖和节流：
   1. 分别的概念
   2. 分别的应用场景
10. 怎么判断一个数据是不是数组，有哪些方法
11. 跨域——1.跨域

四、vue

1. vue2和vue3的区别
   1. 选项式api和组合式api
   2. 响应式原理不同
   3. setup语法糖
   4. diff算法不同
   5. 新增的组件等
   6. ……
2. vue2和vue3响应式原理区别：1.vue2响应式原理 ， 2.vue3响应式原理
   1. 数组怎么实现响应式监听
   2. vue2中给响应式对象添加新的属性怎么实现响应式
3. nexttick
   1. 为什么要用nexttic：视图是异步更新的，需要异步才能获取更新后的数据
   2. nexttick怎么实现的：异步队列+异步实现（Promise.then->MutationObserver->setImmediate->setTimeout）8.nexttick
4. 组件间数据通信： prop emit，provide inject，bus总线（发布者订阅者模式），全局状态管理
5. diff算法，考得比较少，但是我知道怎么实现会有意引到这里，3.vue的diff算法
6. vue的指令：v-if v-show v-on等

五、浏览器和计网相关

1. 浏览器存储，localstorage和seesionstorage
2. 浏览器缓存，强缓存和协商缓存
3. 从url到渲染到页面得过程：
   1. dns解析
   2. tcp链接，http请求
   3. dom树创建和cssom树创建
   4. 渲染树构建
   5. 排列和绘制
4. https加密，我每次都只说了对称加密和非对称加密结合得方式，感觉也还行
5. http状态码
6. http1.1和http2.0的区别：头部压缩，二进制帧传输，多路复用

六、代码输出题

这种可以直接让ai出题，自己练习

1. 事件循环代码输出题
2. this指向代码输出题

七、手写代码题

1. promise相关：
   1. 目前还没有让我写过promise怎么实现的
   2. promise any race的实现
   3. promise any/race + 失败重试
2. 发布者订阅者模式

class bus {
    event = new Map()
    on(eventName, callback) {
        if (!this.event.has(eventName)) {
            this.event.set(eventName, new Set())
        }
        this.event.get(eventName).add(callback)
    }

    emit(eventName, ...args) {
        this.event.get(eventName).forEach((cb) => {
            cb(...args)
        })
    }

    off(eventName,callback){
        this.event.get(eventName).delete(callback)
    }

    once(eventName,callback){
        const handle=(...args)=>{
            callback(...args)
            this.off(eventName,callback)
        }
        this.on(eventName,handle)
    }
}

3. apply call bind
4. 防抖和节流
5. 原型链继承
6. 深拷贝，注意循环引用 其他的有些是给你数据，自己进行一些数据处理，字符串处理等等，没有直接原始的手撕题或者算法题，但是比较简单

---

以上都是常问的，每一个点里面都有可能会涉及到延申问题，面试官可能会深入去问