个人秋招面经——美团(SaaS)

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

一面（2021/8/11）

一、浏览器相关

二、浏览器输入一个url的过程

三、script中的异步，defer和async的区别

四、HTML页面生命周期的事件

• DOMContentLoaded事件： 浏览器已经完全加载了HTML，并构建了DOM树，但是<img>、样式表等外部资源可能还没有加载完成；
• load事件： 浏览器不仅完成了HTML的加载，还完成的外部资源的加载：图片、样式表等；
• beforeunload事件： 用户正在离开，可以检查用户是否保存了修改，并询问是否真的需要离开；
• unload事件： 用户几乎已经离开，但仍可以发送统计数据等。

五、判断一个前端页面性能好坏的指标

• First contentful paint（FCP）： 从页面加载，到页面上任意内容渲染到屏幕上的时间；
• Largest contentful paint（LCP）： 从页面加载，到页面上最大的文本块或图片元素渲染到屏幕上的时间；
• First input delay（FID）： 用户第一个交互行为，比如：点击链接、点击按钮，到浏览器响应这次交互的时间；
• Time to Interactive（TTI）： 从页面加载，到内容呈现，初始化js加载完成，再到可以立刻响应应用交互的时间。

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart

六、webpack中的chunk、bundle、module各是什么

• chunk： webpack在进行模块的依赖分析的时候，分割出来的代码块；
• bundle： webpack打包出来的文件；
• module： 开发中的单个模块。

七、什么时候使用loader，什么时候使用plugin

• loader： webapck将一切文件是为模块，webpack只能解析js文件，loader是让webpack拥有加载和解析非js文件的能力。loader在module.rules中配置，他们作为模块的解析规则而存在，类型为数组。
• plugin： 扩展webpack的功能，让webpack具有更多的灵活性。在plugins中单独配置，类型是数组，每一项都是plugin的实例，参数通过构造函数传入。

八、babel怎么把es6转化成es5

• 解析：输入ES6代码，利用babylon解析得到AST；
• 转化：plugin利用bable-traverse对AST进行遍历，生成新的AST；
• 生成：用babel-generator将新的AST生成ES5代码。

九、浏览器安全

十、HTTP 2.0

十一、eslint的原理

• 遍历依据源码生成的 AST，将每一个 node 传入 nodeQueue 队列中，每个会被传入两次；
• 遍历所有将被应用的规则，为规则中所有的选择器添加监听事件，在触发时执行，将问题 push 到 lintingProblems 中；
• 遍历第一步获取到的 nodeQueue，触发其中包含的事件；
• 返回 lintingProblems。

十二、vue中的计算属性，比如：x = a + b; x 没有在页面上渲染，x 会计算吗

十三、算法：

字符串压缩。利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为a2b1c5a3。若“压缩”后的字符串没有变短，则返回原先的字符串。你可以假设字符串中只包含大小写英文字母（a至z）。

输入：“aabcccccaaa” 输出：“a2b1c5a3”

输入：“abbccd” 输出：“abbccd” 解释：“abbccd"压缩后为"a1b2c2d1”，比原字符串长度更长。

二面（2021/8/16）

一、对前端的认识

二、HTTP请求的过程

三、TCP两次握手为什么不行

四、HTTP状态码

五、HTTP缓存（强缓存和协商缓存）

六、HTTP是有状态还是无状态的，怎么解决无状态，cookie和session的区别

七、TCP和UDP的应用场景

八、Vue的MVVM、数据双向绑定原理

九、手写发布订阅模式

十、Vue的生命周期函数

十一、进程和线程的区别

十二、JS是单线程 为什么

十三、nginx怎么做代理的

十四、算法

有一个数组中数字若干，所有数字都出现了2次，只有1个数字只出现了1次，实现一个方法找出只出现了1次的数字，如[1,5,6,3,4,4,5,1,6]中的3。

十五、map的特点

十六、实习项目介绍、难点、文件上传

HR面（2021/8/17）

一、怎么接触前端的

二、介绍南京中石化项目（背景、目的）

三、在项目中承担的角色

四、在实习中对自己有哪些提升

五、实习的时候导师对自己有哪些帮助

六、父母做什么的，对自己的工作有什么建议

七、平时怎么提升自己的技术

反问：工作节奏（一般朝10晚8）、后续（一两周内通知结果）