应届生必看:8家互联网公司前端校招面试题汇总
应届生必看:8家互联网公司前端校招面试题汇总智能搜索前端基本信息· 日期: 2024 年 9 月 27 日 15:00· 岗位: 智能搜索前端· 地点: 北京· 面试时长: 33 分钟面试内容CSS 相关· CSS 层级问题· CSS 选择器优先级· BFC(块级格式化上下文) o 如何设置:overflow: hiddeno 解决问题:消除 margin 合并JavaScript 相关· 深浅拷贝的理解· 深浅拷贝的实现方法及优缺点· JSON.stringify 和 JSON.parse 的性能问题· 数组反转(不使用 API)的实现方法· 如何在原数组上进行操作TypeScript 相关· TypeScript 的理解· unknown 和 any 的区别Vue 相关· computed 是如何进行依赖收集的项目相关· 项目中遇到的挑战反问环节· 业务方向: 搜索相关,AI 相关,AI 图片生成· 技术栈: 新项目使用 React,老项目使用 Vue· 前端发展规划IEG面试内容编程题手写 memoize 函数题目要求:1. 函数参数是一个函数,返回值是一个函数2. 功能:缓存目标函数执行的结果,缓存的 key 为第一个参数。如果第二次访问,key 相同,则返回缓存的值3. 可以直接删除 cache 中缓存的值function memoize(func) / 待实现function sum(a, b) console.log("excute sum"); return a + b;const sumWapper = memoize(sum);sumWapper(1, 2);/ 输出 excute sumsumWapper(1, 2);sumWapper.cache.delete(1);sumWapper(1, 2);编程语言相关· 会 Java、C+ 其他语言吗· JS 和 Java 本质上有什么不同· 面向对象与面向过程 o JS 有 class 可以继承,JS/TS 向 Java 靠拢(增加类型、定义类)o 但大部分时间是通过函数等其他形式完善代码,很少使用这种方式o 你怎么看这种变化JavaScript 相关· ES6 新特性(如箭头函数)在浏览器上的兼容性问题及解决方案· 将 ES6 转换为浏览器兼容代码的第三方工具· Webpack 中如何配置转换为 ES5· TypeScript 能否直接在浏览器上运行· undefined 和 null 的区别· JS 是单线程还是多线程· 浏览器中如何实现 sleep 功能· 浏览器中执行事件的规则· JS 中的原型链· JS 的柯里化反问环节学习建议· 补充基础:JS 相关知识、计算机网络、操作系统、后台问题进阶学习方向· JS 学无止境:ESLint、Prettier、Stylelint 等工具· 技术应用:胜任工作、按时交付· 求职重点:基础为主,框架很少问,后期定方向再学框架· TypeScript 类型校验JS 学习体系1. 语法2. 高级特性 o 原型链o 内存分布o 事件循环o JS 执行引擎(V8、Node 引擎及其不同点)3. 迭代器和新特性(如 ES11 新特性)4. 高级特性(Promise、迭代器、遍历器等)前端发展趋势· 状态驱动视图(局部刷新 DOM)· 微前端、工程化· JS 库开发· 从简单的 HTML+JS 开始,逐步完善· 处理浏览器兼容问题· TypeScript 工程化关于框架学习· 微前端可以了解,但不是面试重点· 入职后通常有固定的开发模式· Vue 底层原理不需要特别关注,入职后不一定使用 Vue大梦龙图-深圳-Web 前端基本信息· 日期: 2024 年 12 月 26 日 14:30· 岗位: Web 前端· 地点: 深圳· 面试时长: 40 分钟· HC: 2 个面试内容开场· 面试官简单介绍公司、新业务、要找的人的要求和负责的工作· 自我介绍· 为什么毕业后没工作,为什么不能转正,没上班都干了什么CSS 相关· 几种水平和垂直居中的方法· 针对不同设备的 H5 响应式布局应该怎么做· rpx 的原理· rem 的使用HTML 与浏览器· defer、async 属性的区别· 浏览器缓存机制· cookie、localStorage、sessionStorage 的区别及优缺点· 如何优化频繁操作 localStorage 的性能问题· 事件循环· 微任务和宏任务有哪些网络相关· 跨域处理方法· Nginx 使用经验JavaScript 相关· 深拷贝的理解,哪些属性需要深拷贝,哪些不需要· 深拷贝的实现方案及存在的问题· forEach 和 map 的区别· Promise 的理解和使用Vue 相关· Vue 的了解程度,Vue2 和 Vue3 使用情况· Vue2 和 Vue3 的区别及原理· 组合式 API 和选项式 API 的理解和使用· ref 和 reactive 的区别· 为什么 v-if 中不能使用 index 作为 key· diff 算法如何打补丁React 相关· Next.js 的使用经验· Next.js 与普通 React 的区别工程化· ESM 和 CJS 的区别· 打包方面的差异· ESM 和 CJS 引入模块的过程· CJS 如何暴露模块Node.js· Node.js 后端开发经验,使用过的框架和 ORM· MySQL 基本 CRUD 操作· npm run dev 或 npm run build 的执行过程· Node.js 如何调用 CMD 指令· Node.js 环境使用 require 函数的过程反问环节· 公司研发规模: 前端十几个,4 个游戏 SDK,2 个广告落地页,内部系统,新业务需要 2 人· 面试评价: 基础扎实,Node.js 需要深入了解,需要能独立开发项目的人· 后续流程: 还有领导面,等 HR 通知字节跳动-抖音电商基本信息· 日期: 2024 年 10 月 25 日面试内容开场· 自我介绍· 实习中印象深刻的经历安全相关· XSS 攻击原理· XSS 可能导致的后果及场景举例· 如何获取用户的 Cookie· Cookie 的特点浏览器存储· 其他缓存方式· localStorage 和 sessionStorage 的区别· 同源策略的定义· 跨域 Cookie 访问问题 o 和之间的Cookie互通性o 通过 XSS 是否能跨子域获取 Cookie移动端开发· H5 与小程序的区别及小程序优势· WebView 的概念· JSBridge 的理解 o JavaScript 如何通过 JSBridge 调用移动设备功能o iOS 环境下如何调用 Objective-C 程序浏览器渲染· 输入 URL 到页面显示的过程· DNS 解析过程· JS 和 CSS 解析是否会阻塞 HTML 解析及原因· 浏览器样式计算过程CSS 相关· flex: 1 的含义· flex-grow 的作用JavaScript 相关· ES5 的 Reflect 和 Proxy· 陷阱函数的概念Vue 相关· Vue 中为什么要使用 key· 使用索引作为 key 的问题· 使用索引作为 key 导致交互标签混乱的场景代码题判断输出题 1console.log(1 < 2 < 3); / trueconsole.log(3 > 2 > 1); / false判断输出题 2for (var i = 0; i < 5; i+) setTimeout() => console.log(i); , 100);/ 输出: 5 5 5 5 5· 为什么会这样输出· 如何实现从 0 到 4 的输出· 除了使用 let 声明,还有什么方法算法题· 数组第 k 大的数· 版本号比较反问环节· 面试官使用的是旧简历,没有关注到 gap 期间做的开源项目· 面试官回应:你应该早点说,不过我看你那个项目基本的点都有做,大文件上传啥的。腾讯-腾娱基本信息· 日期: 2024 年 7 月 2 日· 面试时长: 62 分钟· 面试形式: 无摄像头,无自我介绍面试内容编程题· 业务发布的各种条件限制,版本号对比问题场景题· Vue 传值和状态管理· Vue 实现购物车逻辑的各种细节 o userId 是否需要传递项目相关· 大文件分片上传 o 如何进行文件分片o 如何合并分片o 如何保证上传成功率o 分片丢失的处理方法o 如何实现并发上传反问环节· Base 地点: 深圳总部· 业务方向: 手 Q 增值业务· 面试评价: 基础有点差,总体还不错腾讯-腾讯云智基本信息· 日期: 2024 年 5 月 30 日· 面试时长: 65 分钟面试内容开场· 自我介绍实习经历· App 运行优化· Promise 相关 o Promise 为什么要有 then 方法,这样设计的好处o 为什么要分宏任务队列和微任务队列· 安全相关 o 渗透测试修复:XSS 存储型o CSRF 防御方法(httponly、双 token)· 小程序相关 o 小程序优化o 小程序运行原理,宿主环境· 性能优化 o link 预解析o DNS 预解析JavaScript 深入· JS 编译过程· V8 反优化· JS 编译时作用域确定阶段(在 AST 生成前,词法编译)· 事件循环机制项目经验· 大文件分片上传(前后端对接的数据结构)· 瀑布流虚拟列表· 视频截帧当封面Vue 原理· 响应式原理· Track 依赖收集· Trigger 派发更新场景题· 设计一个 Vue 派发更新后,统一通知视图更新的数据结构工程化· Vite 和 Webpack 的区别· Vite 为什么快· Vite 在 dev 环境的运行方式· Webpack 热重载原理编程题/* 背景:模板引擎在前端开发中广泛用于生成HTML。它允许开发者定义一个带有占位符的模板,然后用数据填充这些占位符来生成最终的HTML字符串。任务:实现一个函数 renderTemplate,它接受一个字符串模板和一个数据对象作为输入,并返回一个填充了数据的新字符串。模板字符串中的占位符格式为 propertyName。要求:1. 你的函数应该能够处理嵌套属性,例如 user.name。2. 如果数据对象中不存在对应的属性,占位符应该被替换为空字符串。3. 请不要使用任何库或内置的模板引擎。示例代码框架:function renderTemplat