面试题

发表于

最近公司有要招人，然后叫我负责一下技术方面的面试，然后问着问着，好像发现有一些知识点我也不是记得特别清楚。所以有必要列一下自己面试需要问的问题，并且把所有问题点给摸索清楚。不然被问住了就很尴尬了。。。

HTML

初级

1. HTML5有哪些新特性，你用过哪一些？

语义化标签、audio、video、canvas、geolocation、web worker、websocket

cookie、localStorage、sessionStorage的区别

cookie：每次请求都会被发送到服务器。不大于4k。可以自定义过期时间；服务端可以设置httponly，前端不可访问。
sessionStorage：页面关闭后失效（window.open新页面还会存在）
localStorage：永久存储

中级

如何在移动设备实现物理1像素的线

单边：1px的线然后再缩放 dpr 倍
四边：实现一个与目标元素dpr倍宽、dpr倍高的伪元素，然后整体缩放dpr倍。让其刚好覆盖到目标元素上。（兼容圆角）

网上的方案还有：border-image、viewport+rem、box-shadow来实现。但是最实用的还是上述方法。

升级：结合vue的指令可以更优雅的实现一像素问题。见项目笔记

高级

如何在页面间传值

  1. 监听storage事件，获取localStorage、sessionStorage 变化，从而传参（跨域限制)
  2. postMessage（无跨域限制、可用于iframe、openner）
  3. sharedWorker（高级、兼容性差）

CSS

初级

css选择器有哪些？以及他们的优先级

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child）

id > class > 属性 > 标签 > 通配符

解释一下rem、em、px、vh、vw的区别

  • rem：相对于\的font-size:来定义的单位。
  • em：相对于父元素的font-size 来定义的单位
  • px：物理像素，基本单位
  • vh：100vh === 1浏览器可视区域高度
  • vw：100vw === 1浏览器可视区域宽度

高级：

  • vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
  • vmax：相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
  • rpx：微信小程序使用的单位，750rpx等于屏幕宽度

对盒子模型的理解，IE盒子模型和标准模型有什么区别

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

其实区别在于box-sizing属性:

content-box：标准盒子模型；
border-box：IE盒子模型；content部分把 border 和 padding计算了进去

中级

高级

JS

初级

js基本数据类型

undefined、null、boolean、string、Number、Symble（ES6）

事件冒泡与事件捕获的区别

IE使用的是事件冒泡、另一种是事件捕获

事件冒泡：事件开始于最具体的元素、然后逐级向上传播到较为不具体的节点

事件捕获：由不太具体的节点应该更早接收到事件、而最具体的节点最后接收到事件

通过addEventListener的第三个参数来启用监听事件冒泡还是事件捕获：true，事件捕获；false：事件冒泡；所以平时使用的都是false居多

场景提问：如果有一个列表，有数千个选项要绑定事件，应该如何处理；

判断一个变量是不是function

typeof variable === ‘function’

是不是array

Object.prototype.toString.call(variable) === ‘[object Array]‘

中级

宏任务与微任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log(1);

setTimeout(() => {
	console.log(2)
}, 0)

new Promise(resolve => {
	console.log(3)
	resolve()
}).then(() => {
	console.log(4)
});

console.log(5)

打印顺序：1、3、5、4、2

setTimeout是宏任务，Promise是微任务，微任务会比宏任务快，可以简单的理解，微任务是vip吧；

概念大概是这样的：js有个执行堆栈和排队队列的概念。如果是同步任务，则直接进入堆栈。如果是异步任务，则进入队列等待；
如果堆栈为空，则先查找微任务内的队列任务，再去查找宏任务的队列任务；

比较特殊的是，Node的process.nextTick();和前端的MessageChannel(Vue的nextTick是利用MessageChannel来实现的)。该方法是直接把任务插入到堆栈底部，会比微任务与宏任务都快；

属于微任务的有：Promise、MutationObserver、process.nextTick（Node)

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

  1. this指向不一样。无法通过call、apply、bind从新修改this
  2. 没有arguments、也没有caller和callee；
  3. 不可以使用new 命令，会抛出错误
  4. 不可以使用yield命令，因此不能用作 Generator 函数。

高级

Set和Map数据结构

Vue

初级

组件的生命周期，加上keep-alive、vue-router之后会新增什么钩子函数

beforeCreate、created、beforeMounte、mounted、beforeUpdate、updated、beforeDestroy、destroyed

keep-alive第二次进入不会触发beforeCreate、created、beforeMounte、mounted、beforeDestroy、destroyed；
新增activated 和 deactivated

加上vue-router之后会新增：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

created与mounted的区别，能不能在created里访问dom

created是组件实例加载完成，可访问data、prop、methods等等

mounted可以访问除了created能访问的东西 + dom

不能再created里访问dom

keep-alive

从场景中提问：比如一个分页组件，已经跳转到第三页，然后跳转到其他路由，再跳转回来需要还保留在第三页，应该用keep-alive；

中级

vue-router的不刷新加载实现原理是什么

vue-router有两种模式：hash和history；

hash：修改window.location.hash时，不会发生页面刷新、会给路由历史新增记录。且可以监听hashchange来监听hash的变化，以此来实现页面不刷新渲染页面。

history：利用history.pushstate方法来实现。也是不刷新页面、给路由历史新增记录。更多的是，也可以修改url的相对路径且不发生页面刷新加载；然后可以通过监听popstate事件来实现监听路由变化。

自定义指令

通过Vue.directive全局注册自定义指令或者directives: {} 局部注册自定义指令；

自定义指令用于给某个dom扩展特定的功能，自定义指令当中允许对当前dom进行直接操作；

钩子函数：

bind：被绑定到元素时
inserted：绑定元素被插入到父节点时（仅保证父节点存在）
update：所在组件的vNode更新时
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象包含各种属性：name、value、oldValue、expression、arg、modifiers
vNode：
oldVnode：

minxins

在混入和组件数据冲突时以组件数据优先；

钩子函数会被合并、先调用混入的钩子函数

组件v-model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

使用model选项可以修改默认的prop和event

model: {
    prop: 'checked',
    event: 'change'
  }

高级

Vue.use一个插件到底做了什么

Vue.use用于安装插件，该方法需要传入一个function或者一个对象。如果传入的是function，则调用function。如果传入的是一个对象，则调用对象中的install方法。

Vue.use还做了一件事是防止重复安装插件

Vue.extends

Vue.extends接受一个对象，与Vue、Vue.components接收的参数完全一致。返回的是一个构造函数（constructor）；new 该构造函数则返回一个组件实例（instance）。
该实例与new Vue生成的Vm实例、Vue.components生成的组件实例完全一致；不同的是一份配置=》一份构造函数=》多份实例。从而实现复用；

其他

初级

在提升代码性能做过哪些事情

发散、很多

中级

解释import的各种用法的区别

1
2
3
4
5
6
7
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

https与http的区别，怎样做到加密的

https是http + ssl；

然后：

  1. 客户端像服务器发送请求
  2. 服务器向客户端发送公钥
  3. 客户端先验证公钥有效性
  4. 通过后生成一个随机值（私钥），然后用公钥对随机值进行加密
  5. 服务器用公钥解析随机值，拿到私钥；这样双方都有了唯一私钥
  6. 则双方利用私钥对数据进行对称加密，进行数据传输

高级

CommonJs与ES6 module的区别

CommonJs：规范出来之前的野生规范，遵守CommonJS规范。在import规范出来之前被大规模使用

ES6 Module：ES6官方模块管理规范

使用：

  • import 必须写在模块头部，必须在模块最外层；require可以在任何地方require；可以export多个代码
  • 可以require export出来的模块；但是import不能引用module.export的模块；虽然可以，但是强烈不建议使用；只能定义一个modules.exports

原理：

  • import是引用；require是立即运行

webpack怎样实现tree shaking（去除不必要的代码）

应该结合ES6的imoprt、export、DefinePlug、sideEffects和uglifyjs-webpack-plugin来实现；

原理是，用import、export或者DefinePlugin来定义部分不能访问的代码。然后uglifyjs-webpack-plugin在压缩js时识别不能访问的代码，从而去除掉多余的代码；

而sideEffects可以参考：Webpack 中的 sideEffects 到底该怎么用；