Interview-Questions

时间  2019-11-22
标签 interview questions 繁體版
原文   原文链接

本文只记录面试过程当中遇到的面试题(不定更)，答案请自行百度(本身动手、丰衣足食)javascript

框架知识

1.谈谈对ssr的了解css

seo与首屏渲染快 比较适合首屏使用ssr进行快速渲染，更利于seohtml

2.vue数据驱动的原理前端

1.vue在实例化过程当中，遍历data全部的属性并使用Object.defineProperty将属性全转化为getter/settervue

2.每一个实例对象都有一个watcher，在模板编译过程当中使用getter访问data的属性，而且标记为依赖，创建视图与数据的联系java

3.当依赖的数据发生了变化，就调用了setter方法，watcher会对比先后两个值的变化，决定是否通知视图从新渲染node

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

1.DOM差别，CSS差别nginx

5.Proxy 相比于 defineProperty 的优点web

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

6.nextTick()

官方解释：在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。

什么时候使用：(DOM发生变化的操做（不严谨！！！具体看下面两个例子👇👇👇）)

  • 1.在created()钩子函数进行的DOM操做必定要放在Vue.nextTick()的回调函数中。 缘由：是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，因此必定要将DOM操做的js代码放进Vue.nextTick()的回调函数中。mounted该钩子函数执行时全部的DOM挂载和渲染都已完成，所以不须要使用nextTick()。

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

7.vue的生命周期

参考本文，我的感受写的比较详细了 segmentfault.com/a/119000001… 也可参考本文，讲的比较精干https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-60

微信小程序

1.简述微信小程序原理？

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

2.rpx（responsivepixel）

微信小程序新定义了一个尺寸单位，能够适配不一样分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。

3.wx.navigateTo(Object object)

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

4.生命周期

  • 1.onLaunch小程序初始化完成时（全局只触发一次）
  • 2.onLoad页面加载时触发。一个页面只会调用一次
  • 3.onShow页面显示/切入前台时触发。
  • 4.onReady页面初次渲染完成时触发。一个页面只会调用一次，表明页面已经准备稳当，能够和视图层进行交互。
  • 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.定时器: 未被正确关闭，致使所引用的外部变量没法被释放
  • 3.事件监听: 没有正确销毁 (低版本浏览器可能出现)
  • 4.闭包: 会致使父级中的变量没法被释放
  • 5.dom 引用: dom 元素被删除时，内存中的引用未被正确清空

3.本地存储及区别

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

4.闭包、做用及处理，垃圾回收器

概念：

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

做用：

  • 实现封装，管理私有变量和私有方法，将变量（状态）的变化封装在安全的环境中

弊端：

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

处理：

  • 使用后的变量置为Null，等待垃圾回收器回收

垃圾回收器：两种方式：1.标记清除（主要）2.引用计数

5.按需加载（webpack）

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

1.import():

{
          path: '/hello',
          name: 'Hello',
          // component: Hello
          component: import(/* webpackChunkName: 'Hello' */   '../components/Hello')
      }
复制代码

2.require.ensure()：多个路由指定相同的chunkName，会合并打包成一个js文件。

{
      path: '/hello',
      name: 'Hello',
      // component: Hello
      component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
 }
复制代码

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

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

8.cdn的原理，哪些东西可使用cdn

介绍：

  • 经策略性部署的总体系统，解决因为网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站响应速度慢的问题。

目的:

  • 在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户能够就近取得所需的内容，解决 Internet 网络拥塞情况，提升用户访问网站的响应速度。

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

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

  • 浅拷贝：一层遍历和Object.assign()

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

  • 方法一：递归实现深拷贝
function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，若是是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //若是不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);
复制代码
  • 方法二：JSON.Parse和JSON.stringify（兼容ie8+，对于正则表达式类型和函数类型没法深拷贝，会直接丢失相应的值,并且会抛弃对象的constructer）
function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
复制代码

10.Map和WeakMap与Object

ES6新的数据结构，更为完善的hash结构

与Object的区别：

  • Map的键能够是个各类类型的数值，但Object只能是字符串类型或Symbol类型

Map与WeakMap的区别：

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

11.Set和WeakSet

Set集合，没有重复元素的集合,WeakSet的键必须为对象

11.有哪几种继承

  • 1.原型链继承：将父类的实例做为子类的原型
  • 2.构造继承：使用父类的构造函数来加强子类实例，等因而复制父类的实例属性给子类（没用到原型）
  • 3.实例继承：为父类实例添加新特性，做为子类实例返回
  • 4.拷贝继承
  • 5.组合继承：经过调用父类构造，继承父类的属性并保留传参的优势，而后经过将父类实例做为子类原型，实现函数复用
  • 6.寄生组合继承：经过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
  • 7.ES6的Class继承

12.跨越的处理方案

  • 解决协议，域名，端口不用的问题
  • 一、 经过jsonp跨域 （只支持get）
  • 二、 document.domain + iframe跨域（仅限主域相同，子域不一样的跨域应用场景）
  • 三、window.name + iframe跨域
  • 3.1name值在不一样的页面（甚至不一样域名）加载后依旧存在，而且能够支持很是长的 name 值（2MB）。
  • 四、 postMessage跨域
  • 五、 跨域资源共享（CORS）Access-Control-Allow-Origin
  • 5.1普通跨域请求：只服务端设置Access-Control-Allow-Origin便可，前端无须设置，
  • 5.2若要带cookie请求：先后端都须要设置。
  • 六、 nginx代理跨域
  • 七、 nodejs中间件代理跨域
  • 八、 Vue跨域：(proxy)

13.重绘和回流

  • 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时因为只须要UI层面的从新像素绘制，所以 损耗较少

  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会从新渲染页面，称为回流。此时，浏览器须要从新通过计算，计算后还须要从新页面布局，所以是较重的操做。会触发回流的操做

15.性能优化

1.减小HTTP请求数

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

2.script脚本置底（或defer）

3.web worker

4.回流重绘

2.服务器缓存策略

  • Cache-Control/Expires:浏览器判断缓存是否过时，未过时时，直接使用强缓存，若是同时出现，Cache-Control的 max-age 优先级高于 Expires

  • 协商缓存：惟一标识Etag和If-None-Match、最后一次修改时间Last-Modified和If-Modified-Since（Etag优先级高于Lst-Modifieds）

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

最大的区别：

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

RequireJS:（1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。

21.web worker

简而言之就是子线程，本质就是数据刷新和页面渲染不产生冲突，可经过自带的消息机制进行通讯可是弊端是兼容性很差，并且没法达到像websocket轮询的效果

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

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

23.rem和em的区别

区别：

  • rem是基于html元素的字体大小来决定，
  • em则根据使用它的元素的大小决定（不少人错误觉得是根据父类元素，其实是使用它的元素继承了父类的属性才会产生的错觉）

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

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。 弊端：继承

24.移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
复制代码

2.手淘团队flexible.js布局

25.数组如何去重（ES5,ES6）

1.ES6中新增了Set数据结构，相似于数组，可是 它的成员都是惟一的 ，其构造函数能够接受一个数组做为参数

2.ES6中Array新增了一个静态方法Array.from，能够把相似数组的对象转换为数组

ES6:
let array = [1,2,3,4,4,2,1,5];
let res = Array.from(new Set(array))
console.log(res)
复制代码
ES5方法一
function unique(arr) {
    return arr.filter(function(item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，不然返回当前元素
        return arr.indexOf(item, 0) === index
    })
}
复制代码
ES5方法二
function uniqueArr(arr){
    var arr2 = []
    var len = arr.length
    for(var i=0;i<len; i++) {
        if(arr2.indexOf(arr[i]) === -1) {
            arr2.push(arr[i])
        }
    }
    return arr2
} 
复制代码

26.函数柯里化

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

27.vue的虚拟dom原理是什么？怎么实现的？

js建立dom，diff算法，同级比较

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

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

29.经常使用状态码

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

29.promise顺序执行

  • 方法一: then()执行
  • 方法二： 使用队列执行
  • 方法三： 使用async、await实现相似同步编程

30.Event loop

首先放上参考文章，很是推荐，简单明了！！！juejin.im/post/59e85e…

概念： 简单来说就是时间循环机制（废话，哈哈哈哈哈～～～～）

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

上图表达的意思就是：👇👇👇

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

除了广义的同步任务和异步任务，咱们对任务有更精细的定义：

  • macro-task(宏任务)：包括总体代码script，IO，setTimeout，setInterval
  • micro-task(微任务)：Promise中的回调（Promise自身是宏任务，不知是否能够这么理解），process.nextTick {% asset_img task-step.png task-step %}

30.call apply bind区别和用法

都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；

  • apply的第二个参数是一个数组，
  • call第二个及之后的参数都是数组中的元素
  • bind与apply、call最大的区别就是：bind不会当即调用，其余两个会当即调用

31.THIS（看完你就明白了）

this 就是你 call 一个函数时，传入的第一个参数。（请务必背下来「this 就是 call 的第一个参数」）

参考本文，一看就懂https://zhuanlan.zhihu.com/p/23804247

32.原型与原型链

原型链:

  • 在JavaScript中万物都是对象，对象和对象之间也有关系，并非孤立存在的。对象之间的继承关系，在JavaScript中是经过prototype对象指向父类对象，直到指向Object对象为止，这样就造成了一个原型指向的链条

原理：

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

方法：

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

注意点：

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

33.GraphQL

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

概念：一种用于 API 的查询语言，代替rest api

34.node登录注册

  • bcrypt
  • jwt
  • passport
  • passport-jwt

35.node 中间件

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

36.JWT

中间用点分隔开，而且都会使用 Base64 编码

  • 1.header（头部）
  • 2.payload（数据）
  • 3.signature（签名）

37.JsBridge的核心

  • 1.用途：实现Native与Js相互调用的功能
  • 2.核心：
  • 1.拦截Url
  • 2.load url("javascript:js_method()");

算法

1.冒泡排序

function bubleSort(arr) {
	    var len = arr.length;
	    for (let i = len ; i >= 2;i--) {
	        for(let j = 0; j <= i - 1; j++) {
	            if(arr[j] > arr[j + 1]) {
	               // [arr[j],arr[j+1]] = [arr[j+1],arr[j]]
                 let tmp = arr[j+1]
                 arr[j+1] = arr[j]
                 arr[j] = tmp
	            }
	        }
	    }
	    return arr;
	}
复制代码

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

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

复制代码
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程