年前的前端面试总结

本人最近在找工作，对最近遇到的面试题目做一下总结

vue 双向绑定 vue2 vue3

这里分版本

• vue2

vue2 是使用了 Object.definPrototype的属性， definPrototype 具有可配置、可枚举、可删除的功能。还暴露出了 set() 和 get() 方法来监听读值和修改值的功能，用着两个方法来实现双向绑定（题外话： definPrototype 不支持监听数组）

• vue3

vue3 的双向绑定主要利用了 proxy 这个代理属性（对象在 proxy 之后就等于实现了一层拦截的功能）去实现 vue3 的双向绑定。在 proxy 里面暴露出了set() 和 get() 方法来监听读值和修改值的功能。

vue中 watch 和 computed 区别的区别

• computer

  • 支持缓存，只有依赖数据发生改变，才会重新进行计算
  • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  • computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
  • 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

• watch

  • 不支持缓存，数据变，直接会触发相应的操作；
  • watch支持异步；
  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
  • 当一个属性发生变化时，需要执行对应的操作；一对多；
  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
    　　immediate：组件加载立即触发回调函数执行，
    　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

高并发的场景前端怎么办

• 使用页面缓存
• 减少 http 请求
• 代码压缩
• 懒加载
• 前端加入CDN 加速服务
• 合并脚本
• 图片单独服务器

前端提高性能

• 优化 CSS 性能
• 减少外部HTTP请求
• 代码压缩
• 使用 CDN 和缓存提高速度
• 使用轻量级框架
• 优化图片

websocket、网络握手

websocket 最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

less、sess

• 变量css
• 模块化css
• 可以写简单的函数
• 支持嵌套

缓存机制

• cookie

  • 存储有大小限制 4K
  • 有时间限制 expires:
  • 只能存放字符串
  • 域的限制

• localstorage

  • localStorage 用来缓存数据 可以存相当于5M大小数据,这个不同的浏览器不会有差异
  • 不会自动删除数据 除非手动删除
  • IE8 以下不支持
  • 存起来的类型限定为string
  • 隐私模式不可读取

• sessionStorage

  • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

介绍mvvm

它本质上就是MVC （Model-View- Controller）的改进版。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

引用值和原始值堆栈存储

我大致说了一下: 原始值是直接存在栈里面而引用值是存在堆里面,栈里面是存的引用值的地址

this指向

遇到的面试问题：在一个空对象它的 toString 方法在第几层原型上面

答： 空对象是直接继承的 object 的原型所以在原型上面就有toString方法

原型链

这个太简单了不懂的自行百度

输入URL之后都发生了什么

1. 解析 url
2. DNS解析
3. 浏览器与网站建立TCP连接（三次握手）
   4.请求和传输数据
   5.浏览器渲染页面

es6 的解构

es6 出了很多解构方法这里随便写几个

数组解构方法

// 可以从数组中提取值，按照对应位置，对变量赋值。
let [a, b, c] = [1, 2, 3];

// 模式匹配 解构
let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b // 2
c // 3

let [ , , a] = ["1", "2", "3"];
a // "3"

let [a, , c] = [1, 2, 3];
a // 1
c // 3

let [a, ...b] = [1, 2, 3, 4];
a // 1
b // [2, 3, 4]

let [a, b, ...c] = ['1'];
a // "1"
b // undefined  如果解构不成功，变量的值就等于undefined。
c // []

let [b] = [];
let [a, b] = [1];
// b的值都会等于undefined

let [a, [b], c] = [1, [2, 3], 4];
a // 1
b // 2
c // 4
// 属于不完全解构，但是可以成功

let [a, b, c] = new Set(['a', 'b', 'c']);
a // "a" 对于 Set 结构，也可以使用数组的解构赋值。

事实上只要数据结构具有 遍历器(Iterator) 接口，都可以采用数组形式的解构赋值。

数组可以使用默认值

let [a = true] = [];
a // true

let [a, b = 'b'] = ['a']; // a='a', b='b'
let [a, b = 'b'] = ['a', undefined]; // a='a', b='b'

对象解构

let { a, b } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let { b, a } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"

let { c } = { a: 'aaa', b: 'bbb' };
c // undefined

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

const { log } = console;
log('hello') // hello

变量名与属性名不一致，必须写成下面这样

let { a: c } = { a: 'aaa', b: 'bbb' };
c // "aaa"

默认值

let {a, b = 5} = {a: 1};
a // 1
b // 5

let {a: b = 3} = {a: 5};
b // 5

字符串和函数也同样可以解构自行百度

Set 和 map 的介绍和区别

• Set 是类似数组的一种数据结构，不同点在于Set中没有重复的值

• Map 是类似 Object 的一种键值对集合，区别在于 Map 的键不仅限于是字符串，其他各种类型的值包括对象都可以成为 Map 的键

介绍一下vue生命周期

这个自己去看生命周期从创建到销毁的过程

es6的新特性（说了7-8个，抓了个箭头函数问）

1. let和const命令
2. 字符串扩展
3. 解构表达式
4. 函数优化
5. map和reduce
6. 扩展运算符
7. Promise
8. set和map
9. class（类）的基本语法
10. Generator函数
11. 修饰器(Decorator)
12. 模块化

浏览器的兼容性

浏览器的兼容性主要呈现在三个地方

• css
• html
• JavaScript

主要说几个

css 上的兼容性

不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同

可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式。

比如

*{
  margin: 0;
  padding: 0;
}

IE6下margin值双倍边距问题

将元素转为行内属性

{
  display: inline;
}

IE6、IE7下设置标签高度小于10px，存在超出已设置的高度的问题

为超出高度的元素添加溢出部分隐藏

{
  overflow: hidden;
}

JavaScript 上的兼容性

主要是体现在一些事件上面比如: 添加事件、移除事件、取消默认事件、阻止冒泡

下面举两个例子

在事件绑定上

IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){},false);

var x = document.getElementById("myBtn");
if (x.addEventListener) {   //所有主流浏览器，ie9+
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {      // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

event事件对象问题

document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
    var e=ev;
    console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
    var e=event;
    console.log(e);
}
document.onclick=function(ev){//兼容写法；
    var e=ev||window.event;
    var mouseX=e.clientX;//鼠标X轴的坐标
    var mouseY=e.clientY;//鼠标Y轴的坐标
}

vue组件之间的通信

• prop(父传子)
• $emit(子传父)
• 组件之间的通信可以用 router 的传值
• vuex
• 缓存
• $attrs/$listeners
• $parent / $children与 ref
• provide/inject

全局变量

• 在 vue 中可以使用浏览器缓存写全局变量
• 在 mian.js 里面设置全部变量
• 使用 vuex

$set

官方定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

例子

<template>
  <div>
    <button @click="a(obj)">{{obj.a}}</button>
    <button @click="b(obj)"> {{obj.c}}</button>
  </div>
</template>
<script>
export default {
  data(){
        return {
            obj:{}
        }
  },
  mounted() {
    this.obj = {a: 0};
    this.obj.b = 0;
  },
  methods: {
      a(obj) {
          obj.d = obj.a + 1;
      },
      b(obj) {
          obj.e = obj.b + 1;
      }
    }
  }
</scirpt> 

在页面上先点击2次 a 在点击2次b，在页面是显示的的内容是

// a: 2
// b: 0

主要是因为 Vue 不能检测到对象属性的添加或删除

在点击一次 a 之后，在页面是显示的的内容是

// a: 3
// b: 2

更新新增属性 b，是不会更新视图，但是会改变其值，当更新原有属性 a 时会更新视图，同时将新增的属性 b 的值也更新到视图里边。

可以使用如下方法解决

this.obj = {a: "0"}
this.$set(this.obj, 'b',0);