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

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

头像
OFEII😎
编辑于 2020-05-21 12:17:09 APP内打开
赞 25 | 收藏 58 | 回复17 | 浏览6153

题外话

😆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吧,没被捞过,可能竞争太激烈,所以前几天没收到补录的笔试通知。官网一直都是灰的,约面试时才变绿)

poem

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

更多模拟面试

17条回帖

回帖
加载中...
话题 回帖

相关热帖

笔经面经近期热帖

近期精华帖

热门推荐