『四非学生春招最后一舞』腾讯校招补录前端详细面经

题外话

😆Hi! my name is OFEII, a Front-end Developer rookie......

🏫非985非211非科班非一本学校（一本专业 学校一二本混杂 三本校名 算是二本吧）算是牛客中的🐭老鼠人吧

🤟第一次写面经，有不足之处请各位大佬多多指教！感谢！(本来觉得面试不过，写出来的面经存在的意义不大，但是不care了，我觉得这次面试状态很好了，稳定发挥)

面试总结

增加进腾讯的概率：

1. 运气+实力
2. 大厂实习的经历
3. 985 211的本科或master
4. 基础扎实 知识面广 面试细节
5. 打理好自己的github 写md(有几k⭐的项目最好了🐶doge)
6. 看了我这篇面经和下一篇《腾讯前端面试coding总结》（未出）🐶doge

总结

🍍腾讯一直以来都是我梦寐以求的dream co. 20春招的最后一搏，岂能如此尽人意，但求无愧于心。努力过无悔了。其实有些大厂挺不友好的，连个笔试机会都不给，进去的概率基本为0。

🍃没有逆袭，没有重生文爽文里的开挂，也没有拿到剧本。最终还是成为了hr手中kpi了，春招追梦之旅可能到此为止了。或许这才是一个平凡人的春招结局。

😅有点可惜，心情还好吧不会特别失落，可能是习惯了。反而觉得舒服了，坦然了。

🐴千里马常有而伯乐不常有，现在才有点读懂这句话，或许是我还太弱了，一匹十里马。

🙏感谢牛客的老哥跟我说pcg补录，叫我去官网修改资料，才有被捞的机会，感谢！同时感谢牛客网和牛客小伙伴对我的鼓励和支持， 其实0 offer看不到未来的那种黑暗很容易让人崩溃的！

面试结果

面试完面试官和我说过了，叫我等hr通知。结果翻车了，等了三天发了条短信过去询问一番，结果就收到官方无情的感谢短信，无情凉凉，官网变灰，可能是hr心情不好吧。或许不发短信，hr就把我遗忘了，太卑微了。

面试评价

没有coding，没有智力题，场景题比较少，js和css很少，知识面很广，全程一直在输出，主要偏项目和基础，难度一般。发挥稳定，回答基本很详细，回答最后都有加上总结句。

看了几十篇腾讯面经，准备整理了一晚上的coding编程题和智力题，a wild-goose chase。基本无惧腾讯的前端面试编程🐶doge

面试过程

全程75min超时，pcg一面，20校招补招

1.自我介绍

2.实习的工作流程

3.项目-移动端官网

项目介绍

太基础了，我现在觉得。就一个基于vue的移动端官网。亮点可能就一个dialog的联系招商组件。

延伸=>SEO的搜索优化和服务端渲染，以及官网的选型，单页面多页面。

延伸类比剖析网易雷火游戏官网和苹果的官网

不同类型官网的作用 骨骼动画 3d效果的实现。(之前准备面试网易时，有研究过逆水寒的官网)

用户的scroll滚动交互，列举了苹果的最近的iPhone-SE官网🚀(点击跳转)

联系到5G时代

canvas three.js webAR webVR webGL等在5G时代的普及及联系用户体验

对canvas比较熟悉

移动端适配 布局

适配：1.css样式统一reset.css 2.meta中设置viewport 3.高分辨率的1px border 4.300ms点击延迟...

布局：1.固定的pixel 2.flex rem vw/vh 媒体查询

移动端的性能优化

pc端的性能优化

1. HTML优化
2. CSS优化
3. JS优化
4. 网络优化
5. vue优化
6. react优化
7. 其他

300ms点击延迟的由来

讲了个远古的故事: 初代iPhone时期的苹果工程师对双击缩放(double tap to zoom)的约定......

300ms解决方案

浏览器厂商：1.禁用缩放 2.更改默认的视口(viewport)宽度 3.css: touch-action

现有的方案：1.指针事件的polyfill，兼容性差 2.著名的FastClick

fastclickjs原理

fastclick在touched阶段会调用event.preventDefault，把300ms后真正的click时间阻止掉。然后再通过document.createEvent创建一个MouseEvents，接着触发对应目标元素绑定的click事件。

4.项目-基于RN的高数学习app

项目介绍

毕设项目，写过论文，React Native+node(express)+MongoDB。

该系统为用户综合各类学习资源，以碎片化学习为基点，拥有许多辅助学习的功能模块，能促进用户更好地学习高等数学，树立学习的信心。

主要功能模块有：用户管理、疑难搜索、视频播放、试题解答、和笔记存储。

开发工作包括：前端组件的细分，后端的数据接口和功能模块逻辑流程图。

难点

启动页白屏：=>常见的白屏问题

性能监控：腾讯bugly监控平台 => 异常监控 => 优化

.....

React Native的底层架构

js层（一是业务逻辑的实现，二是UI基础组件的渲染）

=> c++层（核心JSCore Bridge等等）

=> 原生层（映射渲染构建原生）

react的虚拟dom的diff原理

1．虚拟DOM => 2．渲染（render）=> 3．比较不同（diff) => 4.补丁（patch）

React Native，weex，flutter的比较 简单说

生态，区别，框架，语言，效果，研发公司等等

hybird混合式app的优化

调用手机原生的api接口等等

......

⭐腾讯研发的hippy框架

Hippy，腾讯自研的一个跨平台（iOS，Android和Web）的开发框架，类似Facebook的React Native。想面腾讯的同学可以了解一下。不久前才推出，文档不完善，了解一下就ok。

5.Webpack

webpack的loader plugins

• Loader：加载和解析非JavaScript文件的能力....
• Plugin：灵活地扩展webpack的功能.....

webpack的配置

跨域配置 单页面配置 多页面配置 cors多个域名配置....

webpack的构建流程-详细

1. 初始化参数
2. 开始编译
3. 确定入口
4. 编译模块
5. 完成模块编译
6. 输出资源
7. 输出完成

---

简单版

1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 开始，对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中。

webpack的优化

减少打包时间：

• 优化Loader
• Happypack
• DllPlugin
• 代码压缩

减少打包后的文件体积

• 按需加载
• Scope Hoisting
• Tree Shaking

tree-shaking 延伸到vue3.0 beta

vue3.0的六大亮点：

1. Performance：性能更比Vue 2.0强。
2. Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
3. Composition API：组合API。
4. Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”。
5. Better TypeScript support：更优秀的Ts支持。
6. Custom Renderer API：暴露了自定义渲染API。

webpack和gulp的区别

• gulp是基于流的构建工具：all in one的打包模式，输出一个js文件和一个css文件，优点是减少http请求，万金油方案。
• webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、打包、按需加载等。

6.浏览器交互

ajax的原理 流程 状态码等等

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）

底层核心：XMLHttpRequest。

大致流程：

1. 创建XMLHTTPRequest对象 var xhr = new XMLHttpRequest()

2. 创建一个新的http请求，包括：请求的方法、请求的url。xhr.open("get", url, true) //true为异步，false同步

3. 发送HTTP请求

4. 设置响应HTTP请求状态变化的函数

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

状态：readyState：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

网络安全 (主要xss csrf)

XSS跨站脚本攻击( Cross Site Scripting )

• 原理
• 危害
• 攻击类型（反射型 存储型 DOM型）
• 防御（1.输入转义 2.CSP 内容安全策略(白名单) 3.设置httpOnly）

CSRF 跨站请求伪造（Cross Site Request Forgy）

• 原理
• 危害
• 防御（1.Samesite 2.Token验证 3.Referer验证）

SQL注入

中间人攻击

点击劫持

xss的防御中的字符转义 （空格需要吗？）

" & < > 空格，说多了个空格，有点懵。

跨域

同源策略

主要的跨域方式

1. jsonp
2. cors 前后端设置 预检请求 多个域名cors配置
3. websocket
4. nginx反向代理

浏览器的缓存机制

强缓存 pragma>cache-control>expires

协商缓存 Etag>Last-Modified

缓存位置

Service Worker>Memory Cache>Disk Cache>Push Cache>网络请求

Cache-control的max-age的设置

Cache-control: max-age=30 缓存30秒后就过期，需要重新请求

no-store no-cache public private.....

不同场景下缓存的设置

频繁变动的资源

Cache-Control: no-cache + ETag / Last-Modified

不常变动的资源

7.Nodejs

nodejs deno

面试前刚刚看过deno的文档就提及了一下

deno

• Deno 是一个 JS/TS的运行时，默认使用安全环境执行代码，有着卓越的开发体验。
• 不使用 npm，而是使用 URL 或文件路径引用模块
• 安全性和ts支持

node

• V8引擎 单线程、事件驱动、非阻塞I/O
• 各种模块扩展
• 列如笔试OJ的nodejs就是基于逐行读取 readline 模块、流 stream 模块、全局对象 process 进程等等，虽然现在的笔试OJ的nodejs基本都是封装好的moudle。
• .....

express koa洋葱模型 中间件 eletrcon

express：文档全面完整，生态好，callback

koa： no callback，生态一般

.....

8.Vue

(面试官最后才想起还没问vue，时间关系就问了个生命周期)

vue的生命周期

接口调用时所处生命周期

beforeCreate created beforeMount mounted

beforeUpdate update beforeDestory destoryed

activited deactivated

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。

9.聊天

兴趣爱好

🍖兴趣爱好广泛，健身 跑步 篮球 书法 游戏 漫画 美漫 日漫 国漫 看书 艺术 设计 电影 美食等等，不是很沉闷无聊的 code monkey

人在哪里

🚄潮汕 离深圳一班2小时的高铁 很近

10.反问

业务

🙂面试官好像是leader，在带项目的，pcg部门下的qq看点。（难怪刚刚一直问hybird app😅）

主要技术栈

📔主要为vue 一点点react（问了一下有没有考虑vue3.0+ts写项目）

算法在前端的运用

📑算法偏底层，前端平时业务中运用不多，主要是对数据的处理。

(主要是最近春招一直在刷算法题，leetcode刷了500道，才发现没什么用，无用功，面试中基本不会用到的。前端+算法性价比太低，我的建议是刷剑指offer+leecode hot100就差不多了，除非学有余力或者真正感兴趣的，记得分类总结。有些大厂的笔试题leetcode刷穿了可能也做不出来🤣大佬除外)

面试官的评价

😁基础很扎实，技术面很广，对新技术有一定的嗅觉doge，不过可能大型项目太少，但是问题不大。算是过了，后续等待hr通知吧。（然而还是翻车了）

超时了后面还有面试者等待

🙏感谢面试官！辛苦面试官了！

(感谢腾讯捞我起来面试，秋招笔试三次都没被捞，每次稳定3AC吧，没被捞过，可能竞争太激烈，所以前几天没收到补录的笔试通知。官网一直都是灰的，约面试时才变绿)

本来写了两句想预祝春招上岸的，发现现在都已经是夏天了🐶doge，送给大家共勉之吧💪。