2020-06-23 面试

六度人和

原型和原型链

es5 和 es6 继承

闭包

盒模型、flex：1

option 请求

协商缓存，事件循环

webpack插件使用

性能优化

牙领科技

vue 框架的事件流、设计架构（源码）

js 的设计模式

ES6 map 的实现原理

性能优化

webpack 有没有写过 loader

沃通 CA

路由实现原理

v-if 和 v-show

上拉滚动加载

兔展

登录校验

ts，nodejs

圣杯布局高度处理

易博天下 2号人事部

watch和computed

vue源码

性能优化

前端未来方向

学习途径，vue源码阅读方式

自己最大优缺点

自己的发展规划

华悦文化

原型链，prototype，数组方法去重、倒序

arr.reverse（）

promise的方法，按顺序请求接口

url 输入到页面渲染

算法

websorket

服务器向客户端推送信息
var ws = WebSocket（“wss：//echo.websocket.org”）
ws.onopen
ws.onmessage
ws.onclose

性能优化

乐逗游戏

base64图片优化

option请求

检验服务器支持的请求方法
cors的预检请求
复杂请求：put或者delete、发送json数据（content-type：application/json）、请求头中带有自定义头部。
复杂请求会对服务器产生副作用，所以要先询问服务器。

nextTick原理

callbacks放所有回掉函数，浏览器内核是否支持promise，MutationObserver（指定dom树变化时调用），否则setTimeout（）

cdn原理

cdn全局负载系统把最优的ip地址发给本地的dns服务器。本地dns服务器进行缓存。本地dns服务器把ip发给客户端

事件循环机制

vue3，es2020

？.
非空判断
？？
let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;
Promise.allSettled
Dynamic import

Node.js 对Promise 接口（以及 async 函数）和 ES 模块的支持，都不理想。由于历史原因，Node.js 必须支持回调函数（callback），导致异步接口会有 Promise 和回调函数两种写法；同时，Node.js 自己的模块格式 CommonJS 与 ES 模块不兼容，导致迟迟无法完全支持 ES 模块。
其次，Node.js 的模块管理工具 npm，逻辑越来越复杂；模块安装目录 npm_modules 极其庞杂，难以管理。Node.js 也几乎没有安全措施，用户只要下载了外部模块，就只好听任别人的代码在本地运行，进行各种读写操作。
再次，Node.js 的功能也不完整，导致外部工具层出不穷，让开发者疲劳不堪：webpack，babel，typescript、eslint、prettier......

url引入依赖
有安全控制，默认情况下脚本不具有读写权限。如果脚本未授权，就读写文件系统或网络，会报错。
原生支持ts
内置打包，自动化测试，代码格式化等工具

http keepalive

浏览器允许的并发请求资源数是6，Connection在HTTP1.1默认打开

省市联动

网络安全，httponly，samesite属性

简单token组成：uid（用户唯一身份标识）、time（当前时间戳）、sign（签名，token前几位以哈希算法压缩成一定长度的十六进制字符串）

如果设置HttpOnly属性，则无法通过js脚本读取cookie信息

SameSite：Strict｜Lax｜None
Strict最严格，禁止第三方Cookie
Lax稍稍放宽，导航到目标网站的GET请求有三种情况发送Cookie：a链接，预加载link标签rel属性值为prerender，GET表单
None显式关闭SameSite属性，必须同时设置Secure属性（Cookie只能通过HTTPS协议发送）

vue中key的作用

vnode标记的唯一id，追踪每个节点的身份，从而重用和重新排序现有元素（让diff算法更准确快速）
进行数组操作，数组位置会发生变化，

promise的方法

then、catch、all、race、allSettled
Promise.race(iterable) 。这个实例在iterable参数内的只要有一个Promise对象状态变为解决或拒绝，返回的 promise就会解决或拒绝。

编程猫

v8垃圾回收机制

Service Worker 和 Web Worker

缓存机制

事件循环

transition 原理，动画完成回调

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

实现原理：
Vue 内部通过 window.getComputedStyle() 这个 API 接口获取到了 transition 或 animation 的结束时间，然后通过绑定 transitionend 或 animationend 事件(对应不同的动画结束事件)执行一个回调函数，该回调函数会将 DOM 节点设置为一个注释节点(隐藏节点的情况下)

项目亮点

Vue 中 key

前端安全

浏览器渲染页面过程

• 解析HTML，生成DOM树
• 解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流)：根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display：将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层）

z-index会不会继承

• 只有 position 的值为 relative/absolute/fixed 中的一个, Z-index 才会生效
• 通俗讲就是,当一个div的Z-index为整数时,它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。当一个div的Z-index为auto时,如果它和它的兄弟进行比较,采用它父元素的Z-index。

BFC

为什么字符串能直接调用方法

var _realMessage = new String("Said I love you but I lied")
var myMessage = _realMessage.substring(5,15)
_realMessgae = null // 方法调用后即销毁

有了基本包装类型，我们操作string、boolean、number这三种基本类型更方便了。每当读取这三种基本类型值时，后台会创建对应的包装类型实例，这个实例会调用指定方法，调用完会被销毁。这种短暂的生命周期决定了我们不能为基本类型添加自定义的属性和方法。

自定义指令的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

容大生物集团

promise暂停，接口超时

利用Promise.race()

纵腾

typescript，单元测试

nginx 缓存配置

数睿科技

webpack 如何实现按需引入，分模块

代码分割的核心是异步加载资源。

关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。配合魔术注释 webpackChunkName 表示模块名称。

代码示例：

import (
    /* webpackChunkName: "my-chunk-name" */
    './footer'
)

同时，需要在 webapck.config.js 中添加配置:

{
    output: {
        filename: "bundle.js",
        chunkFilename: "[name].lazy-chunk.js"
    }
}

依赖 @babel/plugin-syntax-dynamic-import 插件。

WeakMap

键必须是对象类型，值可以是任意类型。它的键被弱保持。当其键所指对象没有其他地方引用的时候，它会被垃圾回收。

Map 和 WeakMap 区别

WeakMap的键不可枚举。不提供列出其键的方法。列表是否存在取决于垃圾回收器的状态，是不可预知的。

commonjs和amd

链表与数组优缺点

	链表	数组
内存

Symbol

1. 作为对象属性名
2. 替代常量
3. 定义类的私有属性/方法

继承，闭包，词法作用域

寄生组合继承：用构造函数继承属性，Object.create 继承方法。最后处理 constructor。

闭包最大的作用就是隐藏变量。

词法作用域是在定义时确定，动态作用域在运行时确定。

垃圾回收机制

polyfill处理

进程和线程

进程是资源分配的最小单位，线程是 CPU 调度的最小单位。

平安

路由实现原理，导航守卫，动态路由，动态导航栏（如何知道打开了哪一级）

history 模式：

window.history.pushState(stateObject, title, url)
window.history.replaceState(stateObject, title, url)

导航守卫：

router.beforeEach((to, from, next) => {}) 根据 vuex 中 userToken 是否存在，判断是否跳登陆。

动态路由：

router.addRouters() 方法添加。

axios 拦截器

service.interceptors.response.use(
    config => {
        if(store.state.userToken){
            config.headers.Authorization = store.state.userToken
        }
        return config
    }
)

闭包

vue 响应式原理

call 和 apply 能不能改变箭头函数 this 指向

this 指向最后调用它的那个对象。

箭头函数： this 总是指向词法作用域，不绑定 this，this 为作用域，由上下文决定。