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

前言

又到了金三银四的找工作季啦 ✿✿ヽ(°▽°)ノ✿。我是一个入行一年多的前端菜鸟，去年夏天开始考虑换工作，陆续面试了几家中小公司。面试过程我一般会录音，方便结束后进行复盘。整理了几次面试复盘的笔记「其他几篇还在路上」，希望对相似情况的小伙伴有所帮助「? 也是方便自己以后回忆」，愿大家都能找到心仪的工作。❤️

概况

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

面试题

说明：问题末尾的数字代表对自己当时回答的打分，✔ 代表后面有关于该问题的重新整理。

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

问题2 Vue vs React

相同点：

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

不同点：

1. 模板语法的不同：react通过JSX渲染模板，vue通过拓展的html语法进行渲染。比如react中插值、条件、循环都通过JS语法实现，vue是通过指令v-bind、v-if、v-for实现的。
2. 监听数据变化原理不同：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派发更新。整体来说是一个 数据劫持 + 发布-订阅者模式。

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

问题4 vue组件通信

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

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

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

level4: mutation改变state, 会触发视图改变的原因？通过vue实现的，[实例化vue，把state作为一个data属性。] ↔️ 核心

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 项目优化

1. 移除生产环境的控制台打印。方案很多，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就蛮好的。
2. 第三方库的按需加载。echarts，官方文档里是使用配置文件指定使用的模块，另一种使用babel-plugin-equire实现按需加载。element-ui使用babel-plugin-component实现按需引入。
3. 公有样式，比如对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重学前端 优化技术方案：

1. 缓存：客户端控制的强缓存策略。
2. 降低请求成本：DNS 由客户端控制，隔一段时间主动请求获取域名IP，不走系统DNS（完全看不懂）。TCP/TLS连接复用，服务器升级到HTTP2，尽量合并域名。
3. 减少请求数：JS、CSS打包到HTML。JS控制图片异步加载、懒加载。小型图片使用data-uri。
4. 较少传输体积：尽量使用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.im/post/6844903808397475847>
  方式1：mini-css-extract-plugin + purifycss-webpack
	方式2：webpack-css-treeshaking-plugin。
	利用postCSS提供的解析器，将CSS解析成AST，遍历获取选择器与js、html代码匹配，删除匹配不到的，返回AST，重新生成代码。

问题10 懒加载路由

考点，vue-router实现原理。

level1:

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

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

**level3：**源码分析。路由安装，利用mixin给每个组件注入beforeCreated和destory钩子函数，在Vue原型上定义$route\text{和}$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事件监听和移除。

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

问题15 sentry

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

1. 应用程序(Sentry客户端SDK) 消息上报 web端
2. 消息处理 放入消息队列(Redis/Rabbitmq)
3. worker从消息队列中取数据进行处理
4. 最后由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