本以为精通Vue,没想到被前阿里大佬虐哭了

Chase620
• 阅读 1073

前言

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

概况

  • 公司:坐标上海,教育行业,前端团队 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/parent/parent/children),vuex 任何组件通信,事件中心emit/emit / emit/on 任何组件的通信, attrs/attrs/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和route和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,内容分发网络,是建立再承载网基础上的虚拟分布式网络,能够将源站内容缓存到全国或全球的节点服务器上。用户就近获取内容,提高了资源的访问速度,分担源站压力。

本以为精通Vue,没想到被前阿里大佬虐哭了

本以为精通Vue,没想到被前阿里大佬虐哭了

使用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绘制。

本以为精通Vue,没想到被前阿里大佬虐哭了

问题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 

面试被虐之后我开始猛刷面试题,并且做了一整理,免费分享给大家,希望能带来好运吧。

本以为精通Vue,没想到被前阿里大佬虐哭了

本以为精通Vue,没想到被前阿里大佬虐哭了

想学习前端web的朋友,和需要PDF文档的朋友都可以加入这边的交流裙,前面:938,中间:051,最后:673,裙里从学生到大佬都有,资源免费分享,不见不散哦!

祝大家面试顺利,前程似锦!

本文转自 https://www.jianshu.com/p/654f9de95195,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
5个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
5个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
技术小男生 技术小男生
5个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
5个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
5个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
小森森 小森森
5个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
5个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue