本文只记录面试过程中遇到的面试题(不定更)&＃xff0c;答案请自行百度(自己动手、丰衣足食)

框架知识

1.谈谈对ssr的了解

seo与首屏渲染快 比较适合首屏使用ssr进行快速渲染&＃xff0c;更利于seo

2.vue数据驱动的原理

1.vue在实例化过程中&＃xff0c;遍历data所有的属性并使用Object.defineProperty将属性全转化为getter/setter

2.每个实例对象都有一个watcher&＃xff0c;在模板编译过程中使用getter访问data的属性&＃xff0c;并且标记为依赖&＃xff0c;建立视图与数据的联系

3.当依赖的数据发生了变化&＃xff0c;就调用了setter方法&＃xff0c;watcher会对比前后两个值的变化&＃xff0c;决定是否通知视图重新渲染

4.v-if和v-show的区别

1.DOM差异&＃xff0c;CSS差异

5.Proxy 相比于 defineProperty 的优势

• 数组变化也能监听到
• 不需要深度遍历监听

6.nextTick()

官方解释&＃xff1a;在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&＃xff0c;获取更新后的 DOM。

何时使用&＃xff1a;(DOM发生变化的操作&＃xff08;不严谨&＃xff01;&＃xff01;&＃xff01;具体看下面两个例子???&＃xff09;)

• 1.在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 原因&＃xff1a;是在created()钩子函数执行的时候DOM 其实并未进行任何渲染&＃xff0c;所以一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。mounted该钩子函数执行时所有的DOM挂载和渲染都已完成&＃xff0c;因此不需要使用nextTick()。

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

7.vue的生命周期

参考本文&＃xff0c;个人感觉写的比较详细了 segmentfault.com/a/119000001… 也可参考本文&＃xff0c;讲的比较精干https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-60

微信小程序

1.简述微信小程序原理&＃xff1f;

• 1.微信小程序采用Javascript、WXML、WXSS三种技术进行开发
• 2.小程序分为两个部分webview和appService。其中webview主要用来展现UI&＃xff0c;appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行&＃xff0c;通过系统层JSBridge实现通信&＃xff0c;实现UI的渲染、事件的处理

2.rpx&＃xff08;responsivepixel&＃xff09;

微信小程序新定义了一个尺寸单位&＃xff0c;可以适配不同分辨率的屏幕&＃xff0c;它规定屏幕宽为750rpx&＃xff0c;如在 iPhone6 上&＃xff0c;屏幕宽度为375px&＃xff0c;共有750个物理像素&＃xff0c;则750rpx &＃61; 375px &＃61;750物理像素&＃xff0c;1rpx &＃61; 0.5px &＃61; 1物理像素。

3.wx.navigateTo(Object object)

保留当前页面。但小程序中页面栈最多十层。

4.生命周期

• 1.onLaunch小程序初始化完成时&＃xff08;全局只触发一次&＃xff09;
• 2.onLoad页面加载时触发。一个页面只会调用一次
• 3.onShow页面显示/切入前台时触发。
• 4.onReady页面初次渲染完成时触发。一个页面只会调用一次&＃xff0c;代表页面已经准备妥当&＃xff0c;可以和视图层进行交互。
• 5.onHide页面隐藏/切入后台时触发。
• 6.onUnload页面卸载时触发

{% asset_img mina-lifecycle.png mina-lifecycle %}

非框架知识

1.serviceworker

参考本文https://www.cnblogs.com/dojo-lzz/p/8047336.html

2.哪些方式导致内存泄漏

• 1.意外的全局变量: 无法被回收
• 2.定时器: 未被正确关闭&＃xff0c;导致所引用的外部变量无法被释放
• 3.事件监听: 没有正确销毁 (低版本浏览器可能出现)
• 4.闭包: 会导致父级中的变量无法被释放
• 5.dom 引用: dom 元素被删除时&＃xff0c;内存中的引用未被正确清空

3.本地存储及区别

这里重点讨论IndexedDB和WebSQL&＃xff1a;参考本文加以理解http://www.cnblogs.com/ljwsyt/p/9760266.html

4.闭包、作用及处理&＃xff0c;垃圾回收器

概念&＃xff1a;

• 1. 作为一个函数变量的一个引用&＃xff0c;当函数返回时&＃xff0c;其处于激活状态。
• 2. 一个闭包就是当一个函数返回时&＃xff0c;一个没有释放资源的栈区。

作用&＃xff1a;

• 实现封装&＃xff0c;管理私有变量和私有方法&＃xff0c;将变量&＃xff08;状态&＃xff09;的变化封装在安全的环境中

弊端&＃xff1a;

• 让变量始终保持在内存中&＃xff0c;不被释放&＃xff0c;内存消耗会很大

处理&＃xff1a;

• 使用后的变量置为Null&＃xff0c;等待垃圾回收器回收

垃圾回收器&＃xff1a;两种方式&＃xff1a;1.标记清除&＃xff08;主要&＃xff09;2.引用计数

5.按需加载&＃xff08;webpack&＃xff09;

参考本文https://segmentfault.com/a/1190000011519350

1.import():

{path: &＃39;/hello&＃39;,name: &＃39;Hello&＃39;,// component: Hellocomponent: import(/* webpackChunkName: &＃39;Hello&＃39; */ &＃39;../components/Hello&＃39;)}


2.require.ensure()&＃xff1a;多个路由指定相同的chunkName&＃xff0c;会合并打包成一个js文件。

{path: &＃39;/hello&＃39;,name: &＃39;Hello&＃39;,// component: Hellocomponent: resolve &＃61;> require.ensure([], () &＃61;> resolve(require(&＃39;../components/Hello&＃39;)), &＃39;demo&＃39;)}


7.css动画和js动画的区别

参考本文https://www.cnblogs.com/simba-lkj/p/6139066.html

8.cdn的原理&＃xff0c;哪些东西可以使用cdn

介绍&＃xff1a;

• 经策略性部署的整体系统&＃xff0c;解决由于网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站响应速度慢的问题。

目的:

• 在现有的Internet中增加一层新的网络架构&＃xff0c;将网站的内容发布到最接近用户的网络“边缘”&＃xff0c;使用户可以就近取得所需的内容&＃xff0c;解决 Internet 网络拥塞状况&＃xff0c;提高用户访问网站的响应速度。

9.深拷贝和浅拷贝的区别

参考本文https://www.cnblogs.com/echolun/p/7889848.html

• 浅拷贝&＃xff1a;一层遍历和Object.assign()

深拷贝主要针对引用类型,拷贝所有层级的属性

• 方法一&＃xff1a;递归实现深拷贝

function deepClone(obj){let objClone &＃61; Array.isArray(obj)?[]:{};if(obj && typeof obj&＃61;&＃61;&＃61;"object"){for(key in obj){if(obj.hasOwnProperty(key)){//判断ojb子元素是否为对象&＃xff0c;如果是&＃xff0c;递归复制if(obj[key]&&typeof obj[key] &＃61;&＃61;&＃61;"object"){objClone[key] &＃61; deepClone(obj[key]);}else{//如果不是&＃xff0c;简单复制objClone[key] &＃61; obj[key];}}}}return objClone;
}
let a&＃61;[1,2,3,4],b&＃61;deepClone(a);
a[0]&＃61;2;
console.log(a,b);


• 方法二&＃xff1a;JSON.Parse和JSON.stringify&＃xff08;兼容ie8&＃43;&＃xff0c;对于正则表达式类型和函数类型无法深拷贝&＃xff0c;会直接丢失相应的值,而且会抛弃对象的constructer&＃xff09;

function deepClone(obj){let _obj &＃61; JSON.stringify(obj),objClone &＃61; JSON.parse(_obj);return objClone
}
let a&＃61;[0,1,[2,3],4],b&＃61;deepClone(a);
a[0]&＃61;1;
a[2][0]&＃61;1;
console.log(a,b);


10.Map和WeakMap与Object

ES6新的数据结构&＃xff0c;更为完善的hash结构

与Object的区别&＃xff1a;

• Map的键可以是个各种类型的数值&＃xff0c;但Object只能是字符串类型或Symbol类型

Map与WeakMap的区别&＃xff1a;

• WeakMap只接受对象作为键名&＃xff0c;键名是对象的弱引用&＃xff0c;当对象被回收后&＃xff0c;WeakMap自动移除对应的键值对&＃xff0c;WeakMap结构有助于防止内存泄漏。

11.Set和WeakSet

Set集合&＃xff0c;没有重复元素的集合,WeakSet的键必须为对象

11.有哪几种继承

• 1.原型链继承&＃xff1a;将父类的实例作为子类的原型
• 2.构造继承&＃xff1a;使用父类的构造函数来增强子类实例&＃xff0c;等于是复制父类的实例属性给子类&＃xff08;没用到原型&＃xff09;
• 3.实例继承&＃xff1a;为父类实例添加新特性&＃xff0c;作为子类实例返回
• 4.拷贝继承
• 5.组合继承&＃xff1a;通过调用父类构造&＃xff0c;继承父类的属性并保留传参的优点&＃xff0c;然后通过将父类实例作为子类原型&＃xff0c;实现函数复用
• 6.寄生组合继承&＃xff1a;通过寄生方式&＃xff0c;砍掉父类的实例属性&＃xff0c;这样&＃xff0c;在调用两次父类的构造的时候&＃xff0c;就不会初始化两次实例方法/属性&＃xff0c;避免的组合继承的缺点
• 7.ES6的Class继承

12.跨越的处理方案

• 解决协议&＃xff0c;域名&＃xff0c;端口不用的问题

• 1、 通过jsonp跨域 &＃xff08;只支持get&＃xff09;
• 2、 document.domain &＃43; iframe跨域&＃xff08;仅限主域相同&＃xff0c;子域不同的跨域应用场景&＃xff09;
• 3、window.name &＃43; iframe跨域
• 3.1name值在不同的页面&＃xff08;甚至不同域名&＃xff09;加载后依旧存在&＃xff0c;并且可以支持非常长的 name 值&＃xff08;2MB&＃xff09;。
• 4、 postMessage跨域
• 5、 跨域资源共享&＃xff08;CORS&＃xff09;Access-Control-Allow-Origin
• 5.1普通跨域请求&＃xff1a;只服务端设置Access-Control-Allow-Origin即可&＃xff0c;前端无须设置&＃xff0c;
• 5.2若要带COOKIE请求&＃xff1a;前后端都需要设置。
• 6、 nginx代理跨域
• 7、 nodejs中间件代理跨域
• 8、 Vue跨域&＃xff1a;(proxy)

13.重绘和回流

• 重绘(repaint): 当元素样式的改变不影响布局时&＃xff0c;浏览器将使用重绘对元素进行更新&＃xff0c;此时由于只需要UI层面的重新像素绘制&＃xff0c;因此 损耗较少

• 回流(reflow): 当元素的尺寸、结构或触发某些属性时&＃xff0c;浏览器会重新渲染页面&＃xff0c;称为回流。此时&＃xff0c;浏览器需要重新经过计算&＃xff0c;计算后还需要重新页面布局&＃xff0c;因此是较重的操作。会触发回流的操作

15.性能优化

1.减少HTTP请求数

• 1.资源合并与压缩
• 2.图片Sprites
• 3.HTTP缓存

2.script脚本置底&＃xff08;或defer&＃xff09;

3.web worker

4.回流重绘

2.服务器缓存策略

• Cache-Control/Expires:浏览器判断缓存是否过期&＃xff0c;未过期时&＃xff0c;直接使用强缓存&＃xff0c;如果同时出现&＃xff0c;Cache-Control的 max-age 优先级高于 Expires

• 协商缓存&＃xff1a;唯一标识Etag和If-None-Match、最后一次修改时间Last-Modified和If-Modified-Since&＃xff08;Etag优先级高于Lst-Modifieds&＃xff09;

19.sea和require的区别、优缺点

最大的区别&＃xff1a;

• SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

RequireJS:&＃xff08;1&＃xff09;实现js文件的异步加载&＃xff0c;避免网页失去响应&＃xff1b; &＃xff08;2&＃xff09;管理模块之间的依赖性&＃xff0c;便于代码的编写和维护。

21.web worker

简而言之就是子线程&＃xff0c;本质就是数据刷新和页面渲染不产生冲突&＃xff0c;可通过自带的消息机制进行通信但是弊端是兼容性不好&＃xff0c;而且无法达到像websocket轮询的效果

22.箭头函数什么情况下不能用(需要动态上下文的场景)

• 1.定义对象方法
• 2.定义原型方法
• 3.定义事件回调函数
• 4.定义构造函数
• 5.刻意追求过短的代码&＃xff0c;可能会给代码阅读和逻辑理解带来困难。

23.rem和em的区别

区别&＃xff1a;

• rem是基于html元素的字体大小来决定&＃xff0c;
• em则根据使用它的元素的大小决定&＃xff08;很多人错误以为是根据父类元素&＃xff0c;实际上是使用它的元素继承了父类的属性才会产生的错觉&＃xff09;

举例&＃xff1a; 当使用 rem 单位&＃xff0c;他们转化为像素大小取决于页根元素的字体大小&＃xff0c;即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 例如&＃xff0c;根元素的字体大小 16px&＃xff0c;10rem 将等同于 160px&＃xff0c;即 10 x 16 &＃61; 160。

当使用em单位时&＃xff0c;像素值将是em值乘以使用em单位的元素的字体大小。 弊端&＃xff1a;继承

24.移动端适配

"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0, maximum-scale&＃61;1.0, user-scalable&＃61;no;">


2.手淘团队flexible.js布局

25.数组如何去重&＃xff08;ES5,ES6&＃xff09;

1.ES6中新增了Set数据结构&＃xff0c;类似于数组&＃xff0c;但是 它的成员都是唯一的 &＃xff0c;其构造函数可以接受一个数组作为参数

2.ES6中Array新增了一个静态方法Array.from&＃xff0c;可以把类似数组的对象转换为数组

ES6:
let array &＃61; [1,2,3,4,4,2,1,5];
let res &＃61; Array.from(new Set(array))
console.log(res)


ES5方法一
function unique(arr) {return arr.filter(function(item, index, arr) {//当前元素&＃xff0c;在原始数组中的第一个索引&＃61;&＃61;当前索引值&＃xff0c;否则返回当前元素return arr.indexOf(item, 0) &＃61;&＃61;&＃61; index})
}


ES5方法二
function uniqueArr(arr){var arr2 &＃61; []var len &＃61; arr.lengthfor(var i&＃61;0;iif(arr2.indexOf(arr[i]) &＃61;&＃61;&＃61; -1) {arr2.push(arr[i])}}return arr2
}


26.函数柯里化

柯里化是指这样一个函数(假设叫做createCurry)&＃xff0c;他接收函数A作为参数&＃xff0c;运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。 详情参考https://www.jianshu.com/p/5e1899fe7d6b

27.vue的虚拟dom原理是什么&＃xff1f;怎么实现的&＃xff1f;

js创建dom&＃xff0c;diff算法&＃xff0c;同级比较

28.http请求头里都有什么内容

• Accept:浏览器能够处理的内容类型
• Accept-Charset:浏览器能够显示的字符集
• Accept-Encoding&＃xff1a;浏览器能够处理的压缩编码
• Accept-Language&＃xff1a;浏览器当前设置的语言
• Connection&＃xff1a;浏览器与服务器之间连接的类型
• COOKIE&＃xff1a;当前页面设置的任何COOKIE
• Host&＃xff1a;发出请求的页面所在的域
• Referer&＃xff1a;发出请求的页面的URL
• User-Agent&＃xff1a;浏览器的用户代理字符串

29.常用状态码

• 200: 成功&＃xff0c;并返回数据
• 302: 临时重定向
• 304: 资源未修改&＃xff0c;可使用缓存
• 403: 拒绝请求
• 404: 资源不存在
• 500: 服务器错误

29.promise顺序执行

• 方法一: then()执行
• 方法二&＃xff1a; 使用队列执行
• 方法三&＃xff1a; 使用async、await实现类似同步编程

30.Event loop

首先放上参考文章&＃xff0c;非常推荐&＃xff0c;简单明了&＃xff01;&＃xff01;&＃xff01;juejin.im/post/59e85e…

概念&＃xff1a; 简单来讲就是时间循环机制&＃xff08;废话&＃xff0c;哈哈哈哈哈&＃xff5e;&＃xff5e;&＃xff5e;&＃xff5e;&＃xff09;

首先看一下下面这张图&＃xff0c;有助于理解js是如何运行的 {% asset_img eventloop.png eventloop %}

上图表达的意思就是&＃xff1a;???

• 同步和异步任务分别进入不同的执行"场所"&＃xff0c;同步的进入主线程&＃xff0c;异步的进入Event Table并注册函数。
• 当指定的事情完成时&＃xff0c;Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空&＃xff0c;&＃xff08;js引擎存在monitoring process进程&＃xff0c;会持续不断的检查主线程执行栈是否为空&＃xff0c;一旦为空&＃xff0c;就会去Event Queue那里检查是否有等待被调用的函数。&＃xff09;会去Event Queue读取对应的函数&＃xff0c;进入主线程执行。
• 上述过程会不断重复&＃xff0c;也就是常说的Event Loop(事件循环)。

除了广义的同步任务和异步任务&＃xff0c;我们对任务有更精细的定义&＃xff1a;

• macro-task(宏任务)&＃xff1a;包括整体代码script&＃xff0c;IO&＃xff0c;setTimeout&＃xff0c;setInterval
• micro-task(微任务)&＃xff1a;Promise中的回调&＃xff08;Promise自身是宏任务&＃xff0c;不知是否可以这么理解&＃xff09;&＃xff0c;process.nextTick {% asset_img task-step.png task-step %}

30.call apply bind区别和用法

都是为了改变某个函数运行时的上下文而存在的&＃xff08;就是为了改变函数内部this的指向&＃xff09;&＃xff1b;

• apply的第二个参数是一个数组&＃xff0c;
• call第二个及以后的参数都是数组中的元素
• bind与apply、call最大的区别就是&＃xff1a;bind不会立即调用&＃xff0c;其他两个会立即调用

31.THIS&＃xff08;看完你就明白了&＃xff09;

this 就是你 call 一个函数时&＃xff0c;传入的第一个参数。&＃xff08;请务必背下来「this 就是 call 的第一个参数」&＃xff09;

参考本文&＃xff0c;一看就懂https://zhuanlan.zhihu.com/p/23804247

32.原型与原型链

原型链:

• 在Javascript中万物都是对象&＃xff0c;对象和对象之间也有关系&＃xff0c;并不是孤立存在的。对象之间的继承关系&＃xff0c;在Javascript中是通过prototype对象指向父类对象&＃xff0c;直到指向Object对象为止&＃xff0c;这样就形成了一个原型指向的链条

原理&＃xff1a;

• 当我们访问对象的一个属性或方法时&＃xff0c;它会先在对象自身中寻找&＃xff0c;如果有则直接使用&＃xff0c;如果没有则会去原型对象中寻找&＃xff0c;如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型&＃xff0c;Object对象的原型没有原型&＃xff0c;如果在Object原型中依然没有找到&＃xff0c;则返回undefined。

方法&＃xff1a;

• 使用对象的hasOwnProperty()来检查对象自身是否含有该属性&＃xff0c;使用in来检查是否在整条原型链上是否含有该属性

注意点&＃xff1a;

• Object是JS中所有对象数据类型的基类(最顶层的类)在Object.prototype上没有__proto__这个属性。

33.GraphQL

详情请关注官网链接http://graphql.cn/

概念&＃xff1a;一种用于 API 的查询语言&＃xff0c;代替rest api

34.node登陆注册

• bcrypt
• jwt
• passport
• passport-jwt

35.node 中间件

参考https://zhuanlan.zhihu.com/p/30384677

36.JWT

中间用点分隔开&＃xff0c;并且都会使用 Base64 编码

• 1.header&＃xff08;头部&＃xff09;
• 2.payload&＃xff08;数据&＃xff09;
• 3.signature&＃xff08;签名&＃xff09;

37.JsBridge的核心

• 1.用途&＃xff1a;实现Native与Js相互调用的功能
• 2.核心&＃xff1a;

• 1.拦截Url
• 2.load url("Javascript:js_method()");

算法

1.冒泡排序

function bubleSort(arr) {var len &＃61; arr.length;for (let i &＃61; len ; i >&＃61; 2;i--) {for(let j &＃61; 0; j <&＃61; i - 1; j&＃43;&＃43;) {if(arr[j] > arr[j &＃43; 1]) {// [arr[j],arr[j&＃43;1]] &＃61; [arr[j&＃43;1],arr[j]]let tmp &＃61; arr[j&＃43;1]arr[j&＃43;1] &＃61; arr[j]arr[j] &＃61; tmp}}}return arr;}


2.快速排序 原理&＃xff1a;选一个数&＃xff0c;比较大小&＃xff0c;放在当前数的左右数组&＃xff0c;最后递归左右数组

function quickSort(arr) {if(arr.length <&＃61; 1) {return arr; //递归出口}var left &＃61; [],right &＃61; [],current &＃61; arr.splice(0,1); for(let i &＃61; 0; i if(arr[i] else {right.push(arr[i]) //放在右边}}return quickSort(left).concat(current,quickSort(right));
}