面试大概

头条一面

• UTF-8 UTF-16 和 Unicode 什么关系 【当时不会 | 编码规则和字符集】
• TCP三次握手可以理解，为什么需要四次挥手 【四次挥手是2+2】
• 常见的HTTP状态码 【相信你们都会】
• GETPOST请求区别 【常规问题】
• HTTP报文分为几部分，分别说了啥，头部尤其重要 【当时说的不全 | 3个部分，以及请求和响应报文的区别】
• HTTPS与TLS或者SSL有了解么，加密是对称加密还是非对称加密 【当时不是特别了解 | 二者都有】
• JS内存管理机制 【标记-清除】
• 数组和链表区别和应用场景 【查找-操作】
• 动态数组如何实现，查找和插入哪个代价大【当时不会】
• Electron的原理，简单描述 【Node.js+NativeApi+Chromium】
• Vue的原理，简单描述 【Object.defineProperty + Dep + Watcher】
• 平时怎么学习新知识，从什么渠道 【博客、掘金、GitHub、StackOverflow等】
• 开发项目中遇到最困难、最有挑战的事 【PicGo的插件系统】
• 算法题1，求数组里最大和的子数组 【思路说了，没写出来】

头条二面

• 如果我是一个Leader，想要把APP里某个页面的首次开屏渲染时间降低，如何协调前端、服务端、客户端同学。【我说了缓存相关的，不过面试官说不够】
• 从输入一个URL到最终用户看到界面，经历那些步骤【常规题】
• 对HTTP/2有没有了解，以及QUIC协议【都了解过，稍微说了一下我的认知】
• HTTP缓存，304状态码如何而来【常规题】
• 算法题2，单链表是否交叉，如何算重叠个数【说了一下思路，但是不是最优解】

头条三面

• 谈项目 【简历上的，主要是PicGo】
• Electron原理 【一面说过了】
• markdown渲染原理 【正则匹配】
• 对前端框架的想法 【从开发效率到后期维护还有工程化角度说了自己的认知】
• 有什么想问的 【问了以后要做啥】

微信一面

• 问实习做了啥 【研究生导师的公司】
• PicGo做了啥 【简述了一下诞生的过程和它的作用】
• Electron是啥，为什么选择用Electron 【用的人多】
• MVVM与Vue的理解 【数据驱动】
• vue的双向绑定的原理 【Object.defineProperty + Dep + Watcher】
• vue的生命周期以及做了啥，用来干嘛的 【beforeCreate、created、mounted等】
• 讲讲Virtual Dom 【稍微说了一下理解】
• 写过render函数么，跟template有啥区别 【写过，说了一下区别】
• vue的服务端渲染和客户端渲染区别是啥，服务端渲染作用是啥 【SEO友好，首屏渲染速度等】
• 讲讲this指针和箭头函数 【常规题】
• const和let与var的区别 【常规题】
• 说说webpack、rollup的tree shanking 【说了tree shanking是啥以及如何实现的】
• webpack的loader和plugin区别是啥 【loader处理某一类文件而plugin可以做「任何」事】
• promise的finally如何实现 【说了一下我的想法，但是后来想想有点不对】
• 浏览器和Node端的事件循环的区别 【说了一下我的印象，与setTimeout有关】

微信二面

1. 算法题：m*n的矩阵，只有0、1，找出最大的只包含1的矩形面积。【说了最蠢的解法...面试官一直引导我也没想出怎么实现更优解】
2. PicGo做了啥，为啥star这么多 【讲了一下作用】

支付宝一面

• 介绍一下做的项目 【实验室项目+个人项目】
• 前端工程化的理解 【流程+规范+自动化等】
• 对Webpack做了哪些配置来提速 【很多，具体可以参考我这篇文章】
• 一段代码输入babel，把结果再输入babel，结果一样么 【我说应该不一样，但是没说出为什么】
• 配置过babel哪些属性 【presets，plugins，env等】
• PicGo的插件如何发布、安装，如何确保插件安全性 【通过npm发布，安全性没有考虑很完全，然后跟面试官聊了安全方面的考量】
• Electron如何实现跨进程通信。还有哪些其他跨进程通信的例子 【ipcMain和ipcRenderer，跨进程通信的比如socket等，我了解的不多】
• Electron打包体积、编译速度相关如何考量，怎么优化或者怎么做的 【我是通过CI打包，没通过自己的机器。所以没有特别考虑这方面的。不过不需要用babel转译能节省一些时间】
• 为什么选TypeScript来开发，说说对TS的理解 【静态类型、语法检查等】
• TypeScript的interface编译后会占用空间么，enum呢？（运行时和开发时不一样）【前者答出来了，后者不确定】
• 说说什么是服务端渲染以及Vue的服务端渲染如何实现 【直出HTML，通过render函数将VirtualDom渲染模板】
• 如果Vue2没有实现VirtualDOM，可以做到服务端渲染吗 【可以】
• Vue的diff算法如何实现 【说了一下之前自己看过的实现】
• 【算法题】求两个序列里的最长公共子序列 【稀里糊涂说了一通，好像没错，后来想想其实不对】
• 简单说说Vue的响应式原理 【Object.defineProperty + Dep + Watcher】
• 你有什么要问我的吗 【主要做什么？答：蚂蚁森林，蚂蚁庄园等】

支付宝二面

• 学前端的经历？ 【15年开始自学，简单说了一下】
• 对计算机的体系结构的认知 【懵了，不知道说啥】
• 有没有经历过jQuery时代 【有】
• Webpack优化是怎么做的 【跟一面说的差不多】
• 上述的优化是基于什么方向去做的 【从cache、减少文件搜索路径、多进程优化等做的】
• 上述的优化有没有量化出问题（比如看看每块耗时多久等等）再针对性地做优化 【用了profile查看了开发阶段的编译耗时，做了一个简单的插件做了开发阶段的速度提升，但是原理我也没说地太清楚】
• vue-hot-reload原理是啥 【我只打上来websocket+jsonp做的更新，但是实际上更复杂】
• 在vue项目里如果我更新了一个js脚本但是页面不更新，我要怎么让vue-hot-reload去更新 【真不会】
• 在vue项目里如果我更新了一个js，但是不想让页面重新刷新，而只是更新我js的执行部分，我要怎么让vue-hot-reload去更新【真不会】
• vue的template是如何转换成render functions的 【说了一下正则匹配，AST，但是不知道是如何有机串起来的】
• 接上一问，光是正则匹配是无法解决所有问题的，还需要啥，然后怎么做，要哪些阶段？（AST）【说了大概，但是不知道是如何有机串起来的】
• AST相关知识掌握程度是多少，去哪里了解的 【不多，相关博客，跑了一些DEMO】
• 写Electron的时候遇到了哪些问题（解决的或者没解决的都说说）【系统级别的右键菜单实现、插件系统等】
• base64怎么编码的 【常规题】
• 从输入一个地址到浏览器展现网页的过程 【常规题】
• DNS查询用TCP来做可以么 【可以，但是慢】
• HTTPS握手加密过程 【常规题，这次会了，面头条的时候还不全会】
• setTimeout和Promise的异步的区别，在浏览器和Node下的区别 【事件循环的区别，我说了具体的例子】
• 如何用Jest做的Koa和Vue的测试 【对Koa做了api的测试，对Vue做了界面的单元测试】
• CSS和JS哪个更熟悉？【JS】
• 接上问，CSS的transform有哪些属性 【rotate，translate等】
• 接上问如何实现一个div既平移又变色？transform的矩阵有了解过么 【没答出transform可以带多个属性，知道矩阵，没写过】
• Vue的响应式原理，以及如果一个变量不在页面上出现过（或者使用过），响应式系统是怎么应对的 【render Watcher没有get到这个变量就不会收集它的依赖】
• 父子组件如何分开收集依赖，或者说父子组件如何确保父组件只收集自己的依赖，子组件只收集自己的依赖 【父子组件有自己的生命周期】
• 在Watcher内再new一个Watcher后，如何保证依赖收集不会出错 【同一时刻只有一个Watcher在工作】
• 问一下算法和数据结构掌握程度 → 说一下快排吧 【说了一下快排原理】
• 你上面跟前端无关的知识都是从哪里获取的 【实验室项目、同学、自己捣鼓、博客等】
• 你有什么要问我的吗 【这个组杭州和北京的部门做的东西一样么，做什么】

支付宝三面

• 【算法+前端】给定一定数目的粒子，每个粒子有4个属性【位置坐标，半径，速度，加速度】。求问在如下数量下，用什么方式绘制这些运动粒子，用什么数据结构来存储。
  1. 20个 【DOM，Canvas】
  2. 500个 【DOM，Canvas】
  3. 20000个 → 200w个 【Canvas，但是不够，因为没有必要把200w个点都渲染出来，只需要渲染可视区的。所以问题的关键是如何找到只在可视区出现的圆，这是一道数据结构+算法题。】
• 接上一题，如果是500个用DOM来绘制的粒子，请问使用Vue或者React的VirtualDom技术来实现，对比用原生操作DOM（假设极致优化）来实现，哪种方案的性能更好。【我说了原生操作，并给出VirtualDom不适合这个例子的理由】
• 给定一个APP内的营销页面，用户可能在离线状态下打开APP。如果营销页面的图片已经过期了，应该要被撤下，否则会引起歧义。请问用什么办法能够撤下。如果不能用JS，如果用户修改了客户端时间呢？【问题难度一步步加深，先问常规离线模式实现，然后开始不让用JS，并且客户端时间不准确怎么做。没答全。】

微信·小程序一面

• 对着笔试题的一些提问，比如第一题的this指针问题，第二题的思路问题 【一遍过】
• HTTPS建立连接过程 【常规题】
• 前端缓存的认知 【常规题，缓存的类型，不同缓存的作用等等】
• 前端安全的认知 【XSS，CSRF等】
• 有什么想问的吗 【为啥小程序开发者工具用NW.js而不是Electron】

微信·小程序二面

• 为什么选择Electron而不是用网页实现PicGo 【因为需要做配置、插件化、需要用到Node.js的API等】
• 介绍一下PicGo
• PicGo如何做的更新策略，如何实现静默更新，如何实现代码级别热更新，如何在读写文件权限不够的情况下热更新 【更新策略其实很简单，后面面试官问的更新策略是我未实现的，但是跟他一起谈了一下思路】
• 写PicGo遇到的最大的问题 【插件系统】
• 插件系统如何实现 【读配置、加载、生命周期函数等等】
• 写PicGo遇到过安全相关的问题么，如何处理 【插件的安全相关】
• 写PicGo遇到过性能相关的问题么 【有，相册页图片多会卡顿，说了如何处理等】
• 有什么想问的吗 【没啥了】