如果我被面试

vue和react区别

业务中基本都是使用vue进行开发，react在实际业务实践中使用的并不多，所以只能简单从使用方面谈谈我的感受
1.vue有很多魔法，能提高开发体验，例如通过watcher对每一个状态建立监听，只需要显示的去改变状态值就能触发视图更新，但react就需要通过setstate才能触发视图更新；还有像v-model、事件修饰符等，但这同样会照成在不恰当使用vue时出现问题时的茫然
2.react是基于函数思想的，视图通过render，组件推荐函数的编写方式，状态改变也是通过函数，感觉一切都是函数，所以极大的提高了其组合扩展的能力，而vue却是对象形式的，所以其急需组合式API来完善，vue的单文件template更贴合原生写法
3.react的生态更好，设计思想等都是领军担当，每个库都有比较明确的方向，相互组合以逐渐扩展其开发能力和体验，但vue其使用简单的追求也圈粉了一大批人
4.react更像是科班出身的，vue则像是半路转行的奇才

自我介绍

你好，我叫XXX，94年，首先非常感谢贵司给的这次面试机会，谢谢，我从15年毕业做前端到现在已经有6年的时间，期间做过面向通信数据分析的中后台系统，做过k12的教育后台，也做过千万级pv的互联网产品，有小程序, pc,h5，hybrid等多端开发经验，从技术上说，首先我是一个热爱技术的人，善于学习的人，基础扎实，框架上以vue为主，除了负责常规性业务开发，在基建，前端生态建设上也有很多经验和贡献，落地了工作流规范，沉淀工具库，封装业务场景能力等，在职期间爱岗敬业，认真负责，积极主动，敢于挑战，善于思考，获得过年度优秀员工，半年度优秀员工，季度之星，创新之星等荣誉，工作外也是一个热爱生活的人，喜欢骑行，摄影，台球等，有些照片还被购买，被南京发布，南京文旅等知名媒体转载引用

webpack提高构建速度

开启webpack analyzer进行打包分析，也为后面的优化做量化效果评定

1. 使用外部扩展externals将基本不需要升级和变动的库等通过script标签引入，避免打包，并且方便利用CDN加速
2. 使用commonsChunkPlugin将公共库等提取到一个chunk里以提高多入口项目的打包速度，单入口使用可以利用浏览器缓存提高页面加载速度，不过目前已不推荐使用，改用splitChunksPlugin代替
3. 使用dllPlugin将不经常变动的库一次打包，动态链的方式使用，不过在V4收益好像不太理想，并且vue和react都放弃了其的维护
4. 使用thread-loader开启多进程提高打包速度，不过需要注意的是多进程的开启和通信都是有不小开销的，所以一定不能滥用，而应该在耗时长的任务上使用
5. 使用cache-loader或 hard-source-webpack-plugin开启缓存，同样的，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。另外像Babel-loader等也都提供了cache选项
6. 使用更高效的压缩插件ParallelUglifyPlugin等

原型

1. [[prototype]]是对象的私有属性，而prototype却是只有函数（构造函数）才有的属性！
2. 每个对象都有一个私有属性（称之为 [[Prototype]]），它指向它的原型对象（prototype）。该 prototype 对象又具有一个自己的 prototype ，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
3. 从es6开始，对象的 [[Prototype]] 可以通过Object.getPrototypeOf()访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性__proto__也就是fn.__proto__ === FN.prototype

柯里化

由接受多个参数的函数变成接受单个参数，可以记住上次调用参数并逐步调用的函数

const curry = function (fn) {
    const curried = function (...args1) {
        // fn.length 形参
        if (args1.length < fn.length) {
            return function(...args2) {
                return curried(...args1, ...args2)
            }
        }
        return fn(...args1)
    }
    return curried
}

vue3

1. 一大升级是更改了数据监听的实现，从Object.defineProperty转到了proxy，这解决了很多问题，比如对象新增属性不能被观测，数组不再只支持几种变异方法，也因为其属于语言层面的实现，其效率是比较高的，也没有polyfill可用，所以应用前还需斟酌
2. 升级了虚拟dom的diff算法，对静态节点不再比较
3. 借鉴了react hook思想，提供了compositionApi，提升了vue的函数编程体验，改变了vue2中mixins等复用的局限

mobx

1. 有computed可以直接使用
2. 低模板代码

循环

对于数据量大，且需要及时终止的会采用传统的for循环，其他会视场景使用高阶函数forEach、filter、map、reduce等

提高首屏加载

1. dns缓存提高网址解析速度，开启gzip，使用http2
2. 资源cdn化，提高加载速度，只加载必要资源，减少非首屏的无用请求，script可以使用defer,js和css在打包时使用splitChunk使文件更小
3. 使用loading或骨架图等增强用户感知
4. 从dom树和css树角度就是减少层级，避免回流和重绘，提高页面绘制效率
5. 对于图片等其他请求采用懒加载方式，优先保证首屏的请求
6. 减少网络请求，对于小图标使用base64、雪碧图、字体图标等

工程化实践

1. 提高打包效率
2. 将打包资源cdn化，把sourcemap私有化
3. 编写脚本，提供一个命令就可以发布到测试和线上，也避免了上线信息的不规范
4. 除了上面说到的，对于业务中常用的优秀实践也会落地到创建项目的模板中，例如自动转换px为rem，规范接口请求，图片压缩，精灵图，生产环境自动删除console
5. 通过eslint规范代码风格，并提供提交时检测和自动修复能力
6. 开发阶段的流程上，我们主要参考了gitlabFlow

垃圾回收？

js的内存是自动管理的，由引擎的垃圾回收器负责，遵循没用就被自动回收原则，什么是没用的主要采用标记清除算法；我们也可以通过将变量置为null来手动清理内存

挑战项目

PC编辑器，主要有几个挑战

1. 富文本编辑，采用contenteditable，这是让人又爱又恨的东西，因为它属于底层实现的一个富文本编辑，所以有良好的性能和众多能力支持，例如光标控制、内容选择、execcommand编辑操作命令和其本身就是dom，拥有dom操作能力等，都为富文本编辑提供了良好的能力支持。但其难点也很明显，尤其是需要和app的操作逻辑相一致带来的更多自定义需求上。1. 兼容性抹平，例如键值，对于不支持的命令通过操作dom等实现，polyfill；2. 用户行为难以控制，尤其是我们的编辑区域不是一整块，是分散的，更增加了异常几率，这块多是埋点主动捕获和用户反馈排查逐渐完善的；3. 需要实时将视图和数据做对应，并做好undoredo管理；4. 需要做较多的dom操作以满足自定义要求，对性能是个挑战；
2. 上传文件，需要支持自动旋转处理、实时预览、进度显示、断点续传、取消上传、重试，并且基于图片上传还需要做封面图设置、段落类型和数据更改等
3. 鉴权和请求，如果权限异常需要能立即弹出登录框并继续刚才的操作，以保证用户的操作不被丢弃和增强用户体验

事件循环

几个文件类

reduce parseInt 运算优先级

变量提升

作用域

跨域

React

JS

数据类型

• Boolean \ null \ undefined \ Number \ String \ Object \ Symbol,其中Symbol是es6新增的，它的实例是唯一且不可改变的,Object是引用类型

相等性判断

• 总共有三种，宽松==、严格===和es6新增的Object.is()
• 简而言之，在比较两件事情时，双等号将执行类型转换; 三等号将进行相同的比较，而不进行类型转换 (如果类型不同, 只是总会返回 false ); 而Object.is的行为方式与三等号相同，但是有两个不同，两个NaN严格等于结果为false，Object.is反之，-0和+0严格比较结果是true，而Object.is反之
• 请总是使用严格等于进行相等性比较，宽松的实在让人不好琢磨、记住，也容易在实际项目中出现BUG，这也是主流代码规范中推荐的做法

function *

• 生成器函数，是一个可以作为迭代器工厂的特殊函数，当它被执行时会返回一个新的Generator（生成器）对象

vue数据流

• vue是单项数据流，这方面借鉴了react，v-model好像实现了双向数据绑定，而实际上其不过是语法糖

创建一个新的对象

• 对象字面量、构造器，合并多个对象为一个对象的Object.assign，使用指定的原型对象及其属性去创建一个新对象的Object.craete，属性描述符有configurable、enumerable（可被枚举）、value、writable、get、set

改变this

• call \ apply \ bind
• bind会返回一个已经绑定指定this的新函数，call和apply的第一个参数都是指定的this，不同的是第二个参数apply要求的是一个数组或类数组的对象，而call则是正常的以，分割的一个个参数

事件冒泡及捕获

• 事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的
• 事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被依次触发

虚拟DOM

• 标准的dom节点是异常复杂的，仅一个空白的div就有230多个属性，用更轻量级的 JS 对象来代替复杂的 DOM 节点
• dom是节点树，，然后把对 DOM 的 diff 操作转移到 JS 对象，就可以避免大量对 DOM 的查询操作
• 优化了diff的算法

清除缓存

技术相关

框架对比

• 我只接触过Angular1,所以以下讲的都是angular1(NG)
• NG是双向数据绑定的，VUE和React是单向绑定的，都受flux思想的影响，只是vue提供类似v-model这样的双向绑定语法糖
• 在检测和响应数据变化上NG采用脏检测非常消耗性能而且容易出现一些异常问题，vue则使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系，这个好像和React异常相似
• React和VUE都使用虚拟DOM，所以性能上都很牛逼，另外他们都利用webpack发明了新的语法，而不像NG只是作为增强了html的普通框架
• React有点一切都是JS的感觉，而vue则是拥抱了经典的WEB三剑客
• 可能是因为vue是汲取了他们的精华做出的比较牛逼的框架吧，个人感觉还是vue使用起来比较顺，当然有一点React生态无敌

组件开发

• 不要重复造轮子，同时自己的技术深度还尚浅，所以组件是基于比较成熟的组件框架慢慢搞的
• 做组件主要基于以下目的
  1.个性化的东西比较多，没有任何一个框架能够完全满足，也不可能东拼西凑影响系统统一性
  2.框架基本上是比较通用和细分的，而针对一个公司可能期望组件更加智能，所以我们会整合一些高集成的组件
  3.除了组件库我们还想集成样式库，方便以后的换肤需求实现

怎么选择组件库的

• 看背后的团队规模和能力、看使用量
• 对比功能和风格
• 其实最开始我们只是要尝试做，所以其实也并没有考虑太多就直接使用了Element作为基础框架进行了二次开发

英语

• 我认为之所以强调英语有几大原因：一是保持代码的高可读，这方面的单词量还行；二是面对错误信息等日志的态度，对于此我可以说非常从容，因为它指引着你去解决问题，哪怕是日语我都会搞明白；三是自己的技术边疆了，不会国际性语言就很可能是井底之蛙，但这方面同时也需要你有极大的求知欲，能科学上网，而我就是这个想走出去同时也能走出去的那个人
• 我们这方面的英语其实是比较专业的，工作这几年也积累了很多，通过中英对比的方式还是很能准确理解一些文档什么的

MV*

代码规范

新技术

软技能

Leader工作

• 分析需求，对不合理的否定掉
• 把控任务进度
• 安排技术分享，共同进步
• 代码质量管控
• 架构类的工作，解决疑难杂症
• 普通的管理工作，例如绩效评估、招聘等
• 但也有很不好的地方，就是不太能给前端正名，不知道怎么去邀功，这个很惭愧

为什么辞职

• 第一家公司是后期加班特别严重而且工资升不上去
• 这一家是因为技术氛围和产品

自我介绍

你好，我是从事前端开发的田稳杰，已经有三年的工作经验，主要研究JS和关注开发工程化，在未来希望能成为一名架构师，本人非常喜欢编程，热爱技术，乐在折腾，熟练使用前端各主流技术包括H5、CSS、JS和ES6、vue、angular、react等，同时熟悉node、python和liux等，在三年里拥有丰富的项目经验，同时在工作中有着良好的沟通能力，也认真勤奋负责，我相信我能胜任这份工作！

谈♥

• 薪资，首先询问公司的薪资的大概水平（一般不怎么说，但万一说了你好做权衡）和福利构成以及劳动强度，再说出你期望的薪资
• 涨薪的机会和政策
• 试用期，时长和正常工资的折扣情况，并不忘追问，试用期的折扣工资是否会在转正后补偿
• 加班，年假，工资发放时间，五险一金的比例
• 年终奖的政策，和入职时长的关系
• 是不是要高了？三年经验的行业水平是怎样的？上家公司的薪资你也看到了，且不说涨不涨，就是工作时长的增加都有2380.96元，这还是按照之前的薪资水平，所以说一点也不高啊，我之所以愿意这样，也是看重贵司的产品和平台，而且通过和技术面试官的沟通我确实也很喜欢贵司，希望和贵司一起成长

面完试，没心情记录了，我要继续学习了。。。