面试随写

120 阅读6分钟

process.nextTick()

在其它同步代码执行完,event Loop 之前

对process.nextTick(callback)的功能解释是”为事件循环设置一项任务,node.js会在下次事件循环调响应时调用callback”.

作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?   所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。   为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。   

nextTick 优先级大于 promise then

console.log('1');
 
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
 
    process.nextTick(function() {
        console.log('3');
     })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
 
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

总结一下 宏任务 微任务 同步任务 异步任务

eventLoop 事件循环机制

宏任务 有 script ajax setTimeout SetInterval

微任务有 promise.then process.nextTick()

首先有两个队列宏任务队列和微任务队列,两个队列都遵循先进先出的原则

首先执行script 主线程代码 -> 清空微任务队列 -> 从宏任务队列取出一个执行 -> 再次清空微任务队列 -> 轮询 -> 将两者全部清空

首先执行宏任务,待宏任务执行完毕后,执行并清空微任务队列。而后从宏任务队列中取出宏任务。循环执行。直到两队列被清空

基本数据类型,引用数据类型

基本数据类型: String Number bool Symbol BigInt Null undefined 存储在栈内存中 引用数据类型 Object Array Math Function Date 存储在堆内存中 堆内存的空间更大 引用数据类型只是在栈内存中保留一个指向的地址

Set Map

Set 就是python中集合的概念 类似于数组 成员唯一 Map 就类似于python中的字典概念 或者是C中的Hash 表模型

  • set has add delete clear
  • map set get has delete

主要解决的问题是之前Object类型 key值只能是字符串的限制 提供了一种值-值的对应,他是一种更好的Hash表的表现形式

Weak 系列的区别

WeakSet 的成员只能是对象,而不能是其他类型的数据

WeakSet 是不可以遍历的 WeakSet中的对象都是弱引用的。即为垃圾回收机制不考虑WeakSet的引用。所以WeakSet的成员不适合引用,因为它会随时消失。所以他是不可遍历的。WeakSet适合临时存放一组对象,以及存放跟对象绑定的信息

WeakMap 同样是不可遍历的 没有size属性,没有遍历操作。

弱引用,垃圾回收机制不考虑此引用。

埋坑 垃圾回收机制V8

标记清除

引用计数问题 相互引用,导致引用计数不会为0.V8有GC回收机制。就是为了处理这种情况

垃圾回收机制在运行的时候会给存储在内存中的所有变量都加上标记(可以是任何标记方式),然后,它会去掉处在环境中的变量 【及被环境中的变量引用的变量标记(闭包)】。而在此之后剩下的带有标记的变量被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收机制到下一个周期运行时,将释放这些变量的内存,回收它们所占用的空间。

$nextTick 实现原理 Vue process.nextTick

Vue 中的nextTick nexttick是下一次更新dom时执行回调

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。

页面发生问题,你该怎么纠错

对于我个人而言。我就以实习的项目为例。后台管理系统,主要内容为Form 表单和table 发生错误,首先检查是否是数据是否有问题。用的是swagger 查看接口返回数据的情况。数据没问题的话那就是前端代码中的问题。样式问题CSS 或者是 逻辑问题 接口对不对,然后组件内部逻辑问题

export 和 export default

  • export与export default均可用于导出常量、函数、文件、模块等
  • 在一个文件或模块中,export、import可以有多个,export default仅有一个
  • 通过export方式导出,在导入时要加{ },export default则不需要

状态码 请求头 响应头 里面都有什么

请求头里面都有什么 Host cookie Accept Accept-Encoding Accept-language Connection: keep-alive User-agent

掘金面试随写里面相关的内容都有提及

ES6新特性

let var const 新的数组方法 新的对象方法 Object.is 新增数据类型 async await Generator Map Set WeakSet WeakMap class for of Iterator proxy

Vue的声明周期都有哪些

beforeCreate created beforeMounted Mounted beforeUpdate Updated beforeDestory Destoryed

Vue组件间通信的六种方式

link

props/emits v-on

父组件通过props向下传递数据给子组件

空的Vue实例作为中央事件总线
Vuex
  • Vuex与localStorage
attrs 与 listeners

listeners咱们就不多说了,在Vue3中废除了

attrs 包含了副作用域中不被prop所识别的特性绑定

provide/inject

允许祖先组件向后代注入一个依赖。无论为层级有多深,其总在调用时生效

provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景。

其绑定的数据并不是可相应性的

parent/children ref

parnet/children 访问父/子实例 ref 普通DOM元素 或者是组件实例

总结

父子通信: prop emit attrs ref Vuex provide/inject

兄弟 子父子 Vuex 中央事件总线创建Vue实例

跨级通信 Bus Vuex attrs provide/inject

Vue 父子组件的创建销毁,渲染顺序

link

加载渲染过程

  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程   父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程   父beforeUpdate->父updated

销毁过程   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed   

防抖节流 的应用场景

防抖的场景 input 下拉框实时联想搜索 文本编辑器实时保存 发送请求按钮的防抖

节流

监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

scroll 事件,每隔一秒计算一次位置信息等

箭头函数与普通函数的区别

  1. 不会创建自身的this this继承于父级作用域链中父级作用域的this
  2. 没有arguments
  3. call / apply / bind 不能改变this的指向
  4. 没有prototype
  5. 不能作为构造函数
  6. this不能改变

Get Post 的区别

link

promise 解决的问题

promise解决的问题是 一个可读性的问题

还有一个就是状态迁移的问题 这种机制有点像事件的触发。它与普通的回调的方式的区别在于,普通的方式,回调成功之后的操作直接写在了回调函数里面,而这些操作的调用由第三方控制。在Promise的方式中,回调只负责成功之后的通知,而回调成功之后的操作放在了then的回调里面,由Promise精确控制。

Promise有这些特征:只能决议一次,决议值只能有一个,决议之后无法改变。任何then中的回调也只会被调用一次。Promise的特征保证了Promise可以解决信任问题。

跨域 Jsonp cors nginx

Jsonp 跨域是由浏览器同源策略所决定的。同源策略就是同协议同域名同端口。浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。

一般情况下由于同源策略我们不能够通过XHR跨域去请求资源,但是我们的script标签却可以不受此限制成功的外链到来自于其他域下的资源。利用script标签这个特点,我们可以成功的绕过同源策略。但这种方式存在局限性,我们只能够发起get跨域请求。具体实现

Cors 即跨域资源共享。实现cors通信的关键是服务器,只要服务器实现了cors接口,就可以跨源通信。

Nginx 反向代理

Nginx反向代理解决跨域问题则是利用了服务端之间的资源请求不会有跨域限制的特点实现的,具体来说就是我们前端发起的请求被Nginx拦截,再由Nginx代由转发请求到资源服务器请求资源。

diff算法

link

排序算法 及其稳定性

link export 和 export defauld 的区别 页面发生问题,你该怎么纠错 接口
get post 的区别 父子组件通信 兄弟组件通信的方法 Vue的生命周期都有哪些 父子组件的创建,销毁,渲染顺序 v-if v-show 防抖节流 ES6新特性 promise promise 解决的问题 跨域 git rebase 箭头函数和普通函数的区别 diff算法 怎么解决跨域(CORS、jsonp、nginx

构建二叉树

状态码

1 信息性状态码 2 成功状态码 3 重定向状态码 4 客户端错误状态码 5 服务器错误状态码

200 OK 请求被正常处理并返回 204 no content 处理成功 但没有资源返回

301 永久重定向 302 临时重定向 303 重定向 但需要get 方法来获取资源 304 Not Motified 服务器端允许访问资源,但是请求为满足条件的情况下返回改状态码

400 请求报文语法错误 401 未经许可 需HTTp认证 403 无权限 404 找不到

500 服务器报错 503 服务器停机 无法处理

js 一行实现ctrl + z

function document.onkeydown()   {undefined
    if (event.ctrlKey == true && event.keyCode == 90) {//Ctrl+Z
        event.returnvalue = false;
        $("btnSave1").click(); //ID
    }

}

请求拦截器 响应拦截器

请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。

响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。

TCP 与 UDP的区别

链路层 网络层 传输层 应用层 首先TCP 与 UDP都属于 TCP/IP的传输层协议

UCP的特点:

  1. 面向无连接
  2. 有单播,多播,广播功能
  3. UDP是面向报文的
  4. 不可靠性
  5. 头部开销小

TCP的特点

  1. 面向连接
  2. 仅支持单波传输
  3. 面向字节流
  4. 可靠传输
  5. 提供拥塞控制
  6. TCP提供全双工通信

UDP TCP

是否连接 无连接 面向连接

是否可靠 不可靠传输,不使用流量控制和拥塞控制 可靠传输,使用流量控制和拥塞控制

连接对象个数 支持一对一,一对多,多对一和多对多交互通信 只能是一对一通信

传输方式 面向报文 面向字节流

首部开销 首部开销小,仅8字节 首部最小20字节,最大60字节

适用场景 适用于实时应用(IP电话、视频会议、直播等) 适用于要求可靠传输的应用,例如文件传输

输入URL到页面解析经历了哪些过程

解析URL 浏览器本地缓存 DNS解析 建立TCP/IP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器根据深度遍历的方式把html节点遍历构建DOM树 遇到CSS外链,异步加载解析CSS,构建CSS规则树 遇到script标签,如果是普通JS标签则同步加载并执行,阻塞页面渲染,如果标签上有defer / async属性则异步加载JS资源 将dom树和CSS DOM树构造成render树 渲染render树

SSR 服务器端渲染 (SSR)

SSR 就是 组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序 CSR 是浏览器渲染 页面上的内容是我们加载的js文件渲染出来的,js文件运行在浏览器上面,服务端只返回一个html模板。