分手后染上面试

作者：Dolphin_海豚

链接：juejin.cn/post/7340479361219002405

目前大三，最近刚分手，想着正好沉下心来去搞就业，寒假期间抱着摸自己底的心态去试试面试，海投了许多厂，小厂，中厂，大厂（技术大厂机会，前后端测试捞人）都有，给我的感觉就是大部分内容都是八股，怎么跟别人的面试不一样，本期就来记录下我面试中遇到的那些面试题，希望对大家有所帮助。

一、聊聊盒子模型

盒模型是css描述布局用的概念，盒子模型有两种，默认情况下为标准盒模型，还有一种为IE或者怪异盒模型，这个是曾经IE使用的盒模型，如今使用需要打上box-sizing: border-box;对于标准盒模型，一个盒子最终的宽度为width + padding + border + margin。而对于IE盒模型，一个盒子最终的宽度为width + margin，也就是说，IE盒模型的宽度其实就是标准盒模型的width + padding + border，最终自身的真实宽度会被边框和内边距挤掉一部分，当你为了防止盒子被撑大的时候你可以使用IE盒模型

二、vue3的响应式如何实现

vue3的响应式主要是靠es6的代理proxy来实现的，proxy可以拦截对象，进行读值操作，能够捕获到数据的修改reactive能够将引用类型变成响应式，ref通常用于将原始数据类型变成响应式，但是ref也可以将引用类型变成响应式，另外还有个副作用函数effect，当响应式数据发生变更，副作用函数就会重新执行

三、computed和watch是什么，有什么应用场景

computed是计算属性，依赖响应式数据，只要发生变更就会重新计算，另外computed有缓存机制，多次使用计算属性的逻辑时只会执行一次。所以当数据是根据其他响应式数据计算而来的时候，可使用computedwatch是监听器，监听一个数据的变化，当数据变化时，就会执行一个回调，可以用于处理异步，另外watch在刚进页面的时候就会执行一次

四、说说你对BFC的理解

五、浏览器的事件循环

js事件循环机制是浏览器用于处理js代码执行顺序的机制因为js设计之初仅仅是个脚本语言，所以为了性能，将其定义为单线程，代码一定会有耗时和不耗时代码，也就是异步和同步代码，并且设计师为了更精细地控制异步代码地执行顺序，又将异步分为宏任务，微任务，因此事件循环机制就是描述同步，宏任务和微任务的执行优先顺序在浏览器的一个事件循环中，先是执行同步，再是执行微任务，最后才是宏任务，之后宏任务又是下一轮事件循环的开启，像是js全局的打印就是一个同步代码，常见的宏任务有三个定时器，和script，I/O，页面渲染。常见的微任务有promise.then，MutationObserver，Process.nextTick

六、浏览器输入url之后发生了什么

先进行url解析，浏览器解析输入的url，提取出协议，主机名，路径等信息再是dns解析，浏览器将主机名解析成相应的ip地址然后建立tcp连接，这个过程就是三次握手，确保客户端和服务器之间的连接正常建立再是发送http请求，浏览器向服务器发送http请求，请求中包括了方法，路径，请求头等信息然后服务器会处理请求，根据请求的内容进行处理，查询数据库，读取文件然后服务器会返回响应，将生成的响应数据通过tcp连接发送回浏览器浏览器接收响应并进行渲染页面，这个过程包括了解析html，css代码生成相应的dom树和cssom树，然后两树结合形成Render Tree，回流，重绘断开连接，也就是tcp四次挥手

七、flex：1代表什么

flex: 1通常用于做分配父容器的宽度，比如做三栏布局时，两边固定写死宽度，中间给个flex: 1，那么他会继承到中间剩余的所有宽度不过其实flex是有三个参数的，flex: 1其实是flex: 1 1 auto的缩写，第一个参数是flex-grow也就是放大比例，1代表会放大，也是默认值，第二个参数flex-shrink是收缩，默认值1代表空间不足时等比例收缩，第三个参数flex-basis是定义弹性元素的初始大小

八、讲讲diff算法

diff算法就是用在比较两颗虚拟dom树的差异，最小化地对真实dom进行修改，就是找不同。这个比较过程先是对两颗dom树进行深度优先遍历，然后同级节点比较，比较相同位置地节点，类型属性是否不同，不同则替换，相同继续下去两个相同类型的节点有不同的属性diff算法也会更新到真实dom，如果两个节点有不同的子节点，diff算法也会递归找到子节点地差异当比较列表节点地时候，diff算法会尽可能地复用已有地节点，而不是删除再重新创建。另外当diff算法发现某个节点已经不同于之前的虚拟dom树，它会立即停止对改节点地进一步比较，避免性能浪费

九、js数据类型判断

typeof可以判断除了null之外的原始数据类型，还可以判断函数instanceof只能判断引用数据类型，它是通过原型链来查找的Array.isArray只能判断是否为数组Object.prototype.toString.call可以判断所有的数据类型，返回一个字符串，比较起来会麻烦点

十、手写防抖节流

防抖就是在规定的时间内没有第二次操作，才执行，规定的时间内一直触发，就不会执行。防抖如下

function debounce(fn, delay){
    let timer
    return function(){
            let args = arguments
            if(timer) clearTimeout(timer);
            timer = setTimeout(() => {
                fn.call(this,...args)
            },delay)
    }
}

防抖就是接收一个函数和一个时间，然后在函数中创建一个定时器，如果定时器不存在，那么就会创建一个定时器，并在时间过期之后执行传入的函数，如果定时器存在那么久掐灭这个定时器节流就是规定的时间内只执行一次，假设手速很快，但是触发事件地速度是恒速节流如下

function throttle(fn, delay){
    let prevTime = Date.now();
    return function(){
            if(Date.now() - prevTime > delay){
                fn.apply(this,arguments)
                prevTime = Date.now()
            }
    }
}

节流同样，接受一个函数，一个时间，只要两次时间差大于传入的时间才会执行函数，并且只有满足了这个条件，prevTime才会更新为当前时间

十一、vite为什么比webpack快

vite使用了ES Module作为开发基础，在开发过程中能够以原生的ES Module直接加载和解析模块vite可以在你修改代码后，只重新加载和应用发生改变的部分，而非整个页面，并且当你启动项目时，vite只会加载你正在编辑得文件，而非整个项目，vite只在需要时加载代码，而不是一次性加载所有的内容，并且vite可以缓存已经构建过的代码，下次启动时直接使用缓存

十二、如何解决闭包导致的内存泄露

可以使用WeakMap或者WeakSet来存储外部变量，因为二者是弱引用，时刻会被垃圾回收机制回收如果闭包处于事件处理函数中，可以借助事件委托的机制，将事件处理函数放到父元素上，而非每个子元素上，事件委托就是借助了冒泡的机制

十三、聊聊cookie

cookie是个小型的文本文件，由服务器端发送到用户的浏览器，并存储在用户的计算机上。cookie主要是来跟踪用户的会话信息，存储用户的偏好设置cookie通常用于身份认证来保证网站资源的安全性，而非大量数据的本地存储，当用户访问一个网站时，服务器会创建一个唯一的会话标识符，存在cookie中，这样用户在同一网站就可以保持登录状态，不用重复登录

十四、聊聊vue的生命周期

vue的生命周期有如下几个阶段，每个阶段都有两个钩子，除了最后一个销毁，时间一到自动触发钩子创建阶段：创建之前，初始化选项式api，创建之后挂载阶段：挂载之前，初始渲染dom节点，挂载之后更新阶段：更新前，更新后，这里的更新是根据数据源的变化销毁阶段：销毁前，销毁后，移除所有的监听器错误捕获：子组件报错时触发