【秋招】美团到店/oppo /快手 前端 一面

面试体验：面试过程非常愉快，面试官请假在家仍坚持进行面试，语气亲切，像与舍友交流一样，引导性强，使面试者能够放松并充分展示自己。

面试问题：

1. 实验室门户网站的主要功能：

   简要介绍了实验室门户网站的主要功能，如用户管理、项目管理、资源分享等。

2. JS资源重加载的实现：

   通过修改资源的版本号或时间戳来避免浏览器缓存，实现资源重加载。

3. 首屏加载优化及手段：

   压缩图片、代码；

   使用CDN加速；

   异步加载非关键资源；

   合并和压缩CSS、JS文件。

4. 栈、队列、链表、二叉树的特点：

   栈：后进先出（LIFO），适用于深度优先搜索。

   队列：先进先出（FIFO），适用于广度优先搜索。

   链表：动态数据结构，节点通过指针相连。

   二叉树：每个节点最多有两个子节点，左子节点小于父节点，右子节点大于父节点。

5. 平衡二叉树的目的：

   保持二叉树的高度平衡，提高搜索效率。

6. 优先队列的实现：

   使用堆（如二叉堆）实现，堆顶元素为优先级最高的元素。

7. 链表是否有环的判断：

   使用快慢指针，快指针每次移动两步，慢指针每次移动一步，若相遇则存在环。

8. TCP和UDP的区别：

   TCP：面向连接，可靠传输，速度慢，适用于需要可靠传输的场景。

   UDP：面向无连接，不可靠传输，速度快，适用于实时性要求高的场景。

9. HTTP2.0与1.1的区别：

   HTTP2.0支持多路复用，头部压缩，二进制传输，提高了传输效率。

10. 服务端推送：

    如HTTP/2的Server Push，可以主动向客户端推送资源，减少请求次数。

11. 局域网实现原理：

    通过交换机或路由器连接设备，设备间通过IP地址和MAC地址进行通信。

12. Vue生命周期：

    包括创建、挂载、更新、销毁等阶段，每个阶段有对应的钩子函数。

13. Vue循环中添加key的原因：

    提高渲染效率，避免不必要的DOM操作。

14. key变化及props变化的影响：

    key变化：导致组件重新创建。

    props变化：触发组件更新。

15. JS异步操作：

    包括回调函数、Promise、async/await等。

16. 宏任务与微任务队列：

    宏任务：setTimeout、setInterval、I/O操作等。

    微任务：Promise.then、MutationObserver等。

17. 盒模型：

    包括内容、内边距、边框、外边距，分为标准盒模型和IE盒模型。

18. CSS实现两边固定宽度，中间撑满：

    使用浮动、flex布局、grid布局等方法。

19. CSS选择器优先级：

    内联样式 > ID选择器 > 类选择器 > 标签选择器。

20. 语义化标签：

    如、、等，提高代码可读性和SEO效果。

21. Web存储：

    包括localStorage、sessionStorage、cookie等。

22. cookie与localStorage的区别：

    cookie：存储在客户端，有大小限制，随HTTP请求发送，用于会话管理。

    localStorage：存储在客户端，无大小限制，不随HTTP请求发送，用于持久化存储。

23. 扫码登录实现：

    通过生成二维码，用户扫码后服务器验证并返回登录状态。

24. 数组最大子集（首位相接）：

    使用动态规划或哈希表解决。

面试体验：面试官态度友好，面试过程舒适，面试时间较短，但内容充实。

面试问题：

1. 喜欢使用Vue的原因：

   简单易用，组件化开发，数据驱动视图。

2. ES6新特性：

   包括let/const、箭头函数、模板字符串、解构赋值、Promise等。

3. 箭头函数与call方法：

   箭头函数没有自己的this，不能作为构造函数，不能使用call、apply、bind方法。

4. 实现promise.all：

   接收一个Promise数组，当所有Promise都成功时返回成功结果，有任何一个失败则返回失败结果。

5. 了解其他框架：

   如React、Angular等，简要比较与Vue的异同。

6. var的使用：

   在ES6之前使用较多，但存在变量提升和块级作用域问题，现在推荐使用let/const。

7. 项目中的按需加载、懒加载、异步加载：

   使用Webpack的code splitting、动态import等方法实现。

8. 路由懒加载打包后的样子：

   Webpack会将路由对应的组件打包成单独的chunk，按需加载。

9. import()函数：

   动态导入模块，返回Promise对象。

10. 调试方法：

    使用console.log、debugger、浏览器的开发者工具等。

11. 打断点：

    在代码行号处点击或使用开发者工具的“Sources”面板。

12. 火焰图：

    用于性能分析，展示函数调用关系和耗时。

13. 原型与类的关系：

    JavaScript中没有传统的类，但可以通过原型链实现继承。

14. 原型与原型对象：

    每个函数都有一个prototype属性，指向一个原型对象；每个对象都有一个__proto__属性，指向其构造函数的原型对象。

面试体验：面试过程包括八股文、coding和闲聊，编辑器出现问题导致coding部分体验不佳。

面试问题：

1. 箭头函数与普通函数的区别：

   箭头函数没有自己的this、arguments、super、new.target，不能作为构造函数，没有prototype属性。

2. DOM与BOM：

   DOM：文档对象模型，用于操作HTML和CSS。

   BOM：浏览器对象模型，用于操作浏览器窗口。

3. DOM渲染到页面的过程：

   解析HTML生成DOM树，解析CSS生成CSSOM树，合并DOM树和CSSOM树生成渲染树，布局渲染树，绘制到屏幕上。

4. DOM结构：

   DOM树是树形结构，但不是二叉树，因为每个节点可以有多个子节点。

5. 计算机网络七层模型：

   物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。

6. 盒模型：

   同上。

7. Node中间件：

   如Express的中间件，用于处理HTTP请求和响应，可以执行代码、修改请求和响应对象、调用下一个中间件等。

8. 浏览器缓存与cookie：

   浏览器缓存用于存储静态资源，提高加载速度；cookie用于会话管理，可以存储少量数据。

9. Vue双向数据绑定原理及map、splice的响应性：

   通过Object.defineProperty或Proxy实现数据劫持，当数据变化时触发视图更新；对于map和splice等数组方法，需要手动实现响应性。

10. HTTP与HTTPS的区别：

    HTTP：明文传输，不安全；HTTPS：加密传输，安全。

11. coding题1：

    将数组中相同的id对象分类。

12. coding题2：

    创建一个Vue组件，包含100个div，每排三个，颜色红绿蓝交替，点击时偶数下标元素变黄。

注意：在快手面试中遇到的编辑器问题，建议面试前提前测试好环境，确保编码过程顺利。同时，对于面试官提出的疑问，要耐心解释，确保沟通顺畅。