面试复盘（一）：面试官「前阿里大佬」果真厉害

前言

又到了金三银四的找工做季啦 ✿✿ヽ(°▽°)ノ✿。我是一个入行一年多的前端菜鸟，去年夏天开始考虑换工做，陆续面试了几家中小公司。面试过程我通常会录音，方便结束后进行复盘。整理了几回面试复盘的笔记，但愿对类似状况的小伙伴有所帮助「😝 也是方便本身之后回忆」，愿你们都能找到心仪的工做。❤️php

概况

公司：坐标上海，教育行业，前端团队 20人+。
面试官：前端负责人，前阿里P7大佬，硕士毕业转行进入阿里。
技术栈：团队目前主要使用 vue，后期打算采用 react。
面试结果：未经过 o(╥﹏╥)o 。
面试感觉：面试官和蔼，遇到不会的问题会适度引导，最后还给了提升建议，感受收获满满。明明被虐得很惨，但仍是很开心 😁。

面试题

说明：问题末尾的数字表明对本身当时回答的打分，✔ 表明后面有关于该问题的从新整理。css

转行缘由
vue 和 react 用起来有什么区别？2 ✔
vue双向数据绑定的原理？数组的更新。8 ✔
组件间通讯的方式？vuex实现原理？state改变，怎么促使视图改变？6 ✔
为何选用uni-app？8
（搜索查看电商小程序后）你作的哪些部分？图片加载问题，横向为何没有也用intersection observer呢？ Intersection Observer是浏览器自带的。7 ✔
为何要作直播插件？8
作过哪些项目优化？5 ✔
webpack配置，loader和plugin区别。如何去掉冗余的代码？ tree-shaking实现原理。5 ✔
一个新的路由，怎么知道下载对应的文件？(扩展: 动态插入js的方式) 2 ✔
按需加载？有哪些方式？最后选择了什么？5
缓存，强缓存是谁设置的？html文件会缓存吗？4 ✔
cdn内容分发系统？为何大家项目的静态资源文件没有放到CDN上。5 ✔
使用腾讯云的移动直播、即时通信sdk，有什么困难的地方？4 ✔
sentry错误监控，错误是如何收集上报到平台的？（http, websoket, 跨域）2 ✔
某某项目（简历中的），具体讲解一下？8
项目里遇到难点、挑战。 4

问题2 Vue vs React

相同点：html

使用virtural DOM + Diff算法。
组件化思想。

不一样点：前端

模板语法的不一样：react经过JSX渲染模板，vue经过拓展的html语法进行渲染。好比react中插值、条件、循环都经过JS语法实现，vue是经过指令v-bind、v-if、v-for实现的。
监听数据变化原理不一样：vue经过getter、setter劫持通知数据变化，react经过比较引用的方式进行。vue使用的响应式数据，而react是不可变数据。vue改变数据直接赋值，react须要调用setState方法（用新的state替换旧的state）。

问题3 vue响应式原理

level1: vue2.0中，响应式实现的核心就是 ES5的Object.defineProperty(obj, prop, descriptor). 经过Object.defineProperty()劫持data和props各个属性的getter和setter，getter作依赖收集，setter派发更新。总体来讲是一个数据劫持 + 发布-订阅者模式。vue

level2: 具体来讲， ① vue初始化阶段(beforeCreate以后create以前)，遍历data/props，调用Object.defineProperty给每一个属性加上getter、setter。② 每一个组件、每一个computed都会实例化一个watcher（固然也包括每一个自定义watcher），订阅渲染/计算所用到的所用data/props/computed，一旦数据发生变化，setter被调用，会通知渲染watcher从新计算、更新组件。node

问题4 vue组件通讯

level1: props+events 父子组件通讯（ $parent/$ children），vuex 任何组件通讯，事件中心 $emit /$ on 任何组件的通讯， $attrs/$ listeners 后代通讯（provide / inject）。react

level2: vuex运行机制：vuex的state做为一个仓库，提供数据驱动vue component渲染。视图经过dispach派发actions，actions中能够作一些异步操做。actions或者视图经过commit提交给mutations，mutation去改变state。webpack

level3: 源码分析：vuex实际上是一个Vue.js插件，插件都须要提供一个install方法，install方法调用会将Vue做为参数传入。Vue.user(plugin)安装插件，也就是执行插件的install方法。会在全局混入一个beforeCreate钩子函数，把示例化的Store保存到全部组件的this.$store中。git

level4: mutation改变state, 会触发视图改变的缘由？经过vue实现的，[实例化vue，把state做为一个data属性。] ↔️ 核心github

let Vue
function install(_Vue) {
  Vue = _Vue
  function vuexInit() {
    const options = this.$options
    console.log('vuexInit -> this.$options', this.$options)
    if (options.store) {
			// // 根实例 this --> Vue
      this.$store =
        typeof options.store === 'function' ? options.store() : options.store
    } else if (options.parent && options.parent.$store) {
			// 组件实例 this --> VueComponent, 如 APP, Home, About...
      this.$store = options.parent.$store
    }
  }
  Vue.mixin({ beforeCreate: vuexInit })
}

class Store {
  constructor(options = {}) {
    const { state = {}, mutations = {}, getters = {} } = options
    this._mutations = mutations
    // getter实现原理
    const computed = {}
    this.getters = {}
    for (let [key, fn] of Object.entries(getters)) {
      computed[key] = () => fn(this.state)
      Object.defineProperty(this.getters, key, {
        get: () => this._vm[key]
      })
    }
    this._vm = new Vue({
      data: { $$state: state }, // 核心原理
      computed
    })
  }

  commit(type, payload) {
    if (this._mutations[type]) {
      this._mutations[type](this.state, payload)
    }
  }

  get state() {
    return this._vm._data.$$state
  }
}

export default { Store, install }
复制代码

问题6 Intersection Observer

level1: 推断节点是否为用户可见，以及多少比例可见，交叉观察器。web API中也有。

level2: 小程序中的IntersectionObserver在Web的基础上，作了一些封装，经过createIntersectionObserver返回一个IntersectionObserver实例。实例方法包括relativeTo、relativeToViewPort、observer、disconnect。relativeTo和relativeToViewPort，相对指定元素或视口的指定位置。observer(selector, cb)，观察指定节点，可见性发生变化时触发回调。

level3: Web API, new IntersectionObserver(cb, options)。options里root、rootMargin的配置，可实现小程序中relativeTo、relativeToViewPort方法的效果。另外 thresholds 属性也蛮有趣的，在指定的几个相交比例时触发回调。

问题8 项目优化

移除生产环境的控制台打印。方案不少，esling+pre-commit、使用插件自动去除，插件包括babel-plugin-transform-remove-console、uglifyjs-webpack-plugin、terser-webpack-plugin。最后选择了terser-webpack-plugin，脚手架vue-cli用这个插件来开启缓存和多线程打包，无需安装额外的插件，仅需在configureWebpack中设置terser插件的drop_console为true便可。最好仍是养成良好的代码习惯，在开发基本完成后去掉无用的console，vscode中的turbo console就蛮好的。
第三方库的按需加载。echarts，官方文档里是使用配置文件指定使用的模块，另外一种使用babel-plugin-equire实现按需加载。element-ui使用babel-plugin-component实现按需引入。
公有样式，好比对element-ui部分组件（如弹框、表格、下拉选框等）样式的统一调整。公共组件，好比date-picker、upload-file等在element-ui提供的组件基本上作进一步的封装。自定义组件包括preview-file、搜索框等。

// babel.config.js配置以下：
plugins: ['equire']
// echarts.js
const echarts = equire(['line', 'tooltip', 'legend', 'dataZoom', 'grid']);
export default echarts;
复制代码

先后端数据交换方面，推进项目组使用蓝湖、接口文档，与后端同窗协商，规范后台数据返回。

雅虎军规提到的，避免css表达式、滤镜，较少DOM操做，优化图片、精灵图，避免图片空连接等。

性能问题：页面加载性能、动画性能、操做性能。Performance API，记录性能数据。

winter重学前端优化技术方案：

缓存：客户端控制的强缓存策略。
下降请求成本：DNS 由客户端控制，隔一段时间主动请求获取域名IP，不走系统DNS（彻底看不懂）。TCP/TLS链接复用，服务器升级到HTTP2，尽可能合并域名。
减小请求数：JS、CSS打包到HTML。JS控制图片异步加载、懒加载。小型图片使用data-uri。
较少传输体积：尽可能使用SVG\gradient代替图片。根据机型和网络情况控制图片清晰度。对低清晰度图片使用锐化来提高体验。设计上避免大型背景图。

问题9 loader、plugin、tree shaking

loader

对模块的源代码进行转换，将不一样的语言转换为JS，或将内联图像转换为data url。如：文件，url-loader、file-loader。转换编译，babel-loader、ts-loader。模板，html-loader。样式，style-loader、css-loader、less-loader。清理，eslint-loader。框架，vue-loader。

plugin

解决loader没法实现的其余事儿。好比 HtmlWebpackPlugin、CleanWebpackPlugin、webpack-bundle-analyzer、DllPlugin、HotModuleReplacementPlugin。

tree shaking

消除无用的js代码（剔除模块中没有导出或引用的部分）。仅支持ES Module静态引入方式，不支持require运行时动态引入方式。

ES6模块引入是静态分析的，故而可在编译时正确判断加载哪些代码。

可剔除的内容有限。webpack配合uglifyJS打包文件，只能shaking部分代码，像模块代码存在反作用，当即执行函数等都不能shaking。uglifyJS不进行程序流分析，只简单判断变量后续是否被引用、修改，不去排除有可能有反作用的代码。（rollup会）还有，好比项目中router.js引用了页面组件，可是在路由渲染中没有用到，也没法shaking掉。

webpack-deep-scope-analysis-plugin：利用webpack解析出来模块的AST，利用scoped分析工具解析引用关系，排除掉没有用到的模块。

1. babel.config.js 配置，分析文件模块依赖关系，生成AST时，保持ES6不动。
{
	"presets": [ ["env", { "modules": false }] ]
}

2.  方式1，import {Button} from 'antd'; 
    方式2，import {Buttion} from 'antd/lib/button';
           import 'antd/lib/style';
这两种方式，tree-shaking效果差异很大。（反作用范围不一样）
babel-plugin-import-fix 插件，遍历AST找出相似import {Button} from 'antd'的结构，进行转换从新生成代码。

3. CSS tree-shaking <https://juejin.cn/post/6844903808397475847>
  方式1：mini-css-extract-plugin + purifycss-webpack
	方式2：webpack-css-treeshaking-plugin。
	利用postCSS提供的解析器，将CSS解析成AST，遍历获取选择器与js、html代码匹配，删除匹配不到的，返回AST，从新生成代码。
复制代码

问题10 懒加载路由

考点，vue-router实现原理。

level1:

将须要懒加载的子模块，打包成单独的文件。ES6的import()。
hashChange时，根据hash变化执行特定的函数，加载子模块。

level2: 实现的三种方式，location.hash + hashChange()，HTML5规范的pushState(IE10) + popState事件监听，abstract nodejs默认值。

**level3：**源码分析。路由安装，利用mixin给每一个组件注入beforeCreated和destory钩子函数，在Vue原型上定义 $route和$ router，并进行响应式处理，定义全局的roter-link和router-view组件。根据路由配置建立映射关系。根据传入路径计算出新的路径，在路劲切换过程当中，执行一系列的导航守卫函数，更改Url，渲染对应组件。

问题12 缓存

html文件也会缓存。项目中使用index.php，后端返回html内容，不会被缓存。

浏览器缓存策略：

强制缓存：（在指定时间内，浏览器直接使用强缓存的内容）

Expires：Thu.21 Jan 2019 23:59:59 GMT；（HTTP1.0）

Cache-Control：max-age=3600（HTTP1.1,优先级更高）

【缓存指令：no-cache须要协商缓存来验证是否过时；no-store不缓存；public客户端代理服务器均可以缓存；private客户端可缓存】
协商缓存：（与服务器协商，肯定资源是否更新）

Last-Modified（服务器下发时间）：Thu.21 Jan 2018 23:59:59 GMT；（HTTP1.0）

If-Modified-Since(浏览器询问) 【可能时间变了，内容没变】

Etag（服务器下发）；（HTTP1.1）

If-None-Match（浏览器询问）

问题13 CDN

CDN，内容分发网络，是创建再承载网基础上的虚拟分布式网络，可以将源站内容缓存到全国或全球的节点服务器上。用户就近获取内容，提升了资源的访问速度，分担源站压力。

使用DNS域名解析引导用户来访问cache服务器。

问题14 腾讯云SDK难点

封装IM类，在IM类上定义建立SDK实例，登陆/退出，群组加入/退出，IM事件监听和移除。

移动直播SDK。最开始没有作小程序主播端，使用APP推流。主要作PC和H5拉流这块内容。
直播协议有如下几种...。
最开始使用的HLS协议，使用腾讯云提供的TC-Player做为播放器。遇到的问题，延迟高。
考虑更换协议，可是移动端浏览器不支持flv、rtmp。
腾讯云web端拉流提供了TC-Player插件，TC-Player本质上就是利用浏览器自带的video标签来作的。
使用flv做为直播协议，但不直接使用flv格式播放。github两种解决方案，一种是bilibili flv.js，将flv文件流转码复用成MPE随便，经过Media Source Extensions API实现视频的播放。另外一种解决方案，是将视频的每一帧画面使用CANVAS绘制。

问题15 sentry

sentry错误日志经过https发送到sentry的web站点。使用cors实现跨域。

应用程序(Sentry客户端SDK) 消息上报 web端
消息处理放入消息队列(Redis/Rabbitmq)
worker从消息队列中取数据进行处理
最后由postgresql完成消息存储

**request headers:**
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross site
**response headers:**
access-control-allow-origin: <http://localhost:8080>
access-control-expose-headers: x-sentry-error, retry-after, x-sentry-rate-limits
复制代码

系列文章

面试复盘（二）：但愿能够得到简单直接的回答

面试复盘（三）：第一次电话面试「无力」