题外话
😆Hi! my name is OFEII, a Front-end Developer rookie......
🏫非985非211非科班非一本学校(一本专业 学校一二本混杂 三本校名 算是二本吧)算是牛客中的🐭老鼠人吧
🤟第一次写面经,有不足之处请各位大佬多多指教!感谢!(本来觉得面试不过,写出来的面经存在的意义不大,但是不care了,我觉得这次面试状态很好了,稳定发挥)
面试总结
增加进腾讯的概率:
- 运气+实力
- 大厂实习的经历
- 985 211的本科或master
- 基础扎实 知识面广 面试细节
- 打理好自己的github 写md(有几k⭐的项目最好了🐶doge)
- 看了我这篇面经和下一篇《腾讯前端面试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端的性能优化
- HTML优化
- CSS优化
- JS优化
- 网络优化
- vue优化
- react优化
- 其他
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的构建流程-详细
- 初始化参数
- 开始编译
- 确定入口
- 编译模块
- 完成模块编译
- 输出资源
- 输出完成
简单版
- 初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler。
- 编译:从 Entry 开始,对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
- 输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中。
webpack的优化
减少打包时间:
- 优化Loader
- Happypack
- DllPlugin
- 代码压缩
减少打包后的文件体积
- 按需加载
- Scope Hoisting
- Tree Shaking
tree-shaking 延伸到vue3.0 beta
vue3.0的六大亮点:
- Performance:性能更比Vue 2.0强。
- Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
- Composition API:组合API。
- Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”。
- Better TypeScript support:更优秀的Ts支持。
- 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。
大致流程:
创建XMLHTTPRequest对象 var xhr = new XMLHttpRequest()
创建一个新的http请求,包括:请求的方法、请求的url。xhr.open("get", url, true) //true为异步,false同步
发送HTTP请求
设置响应HTTP请求状态变化的函数
获取异步调用返回的数据
使用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的防御中的字符转义 (空格需要吗?)
" & < > 空格,说多了个空格,有点懵。
跨域
同源策略
主要的跨域方式
- jsonp
- cors 前后端设置 预检请求 多个域名cors配置
- websocket
- 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,送给大家共勉之吧💪。
全部评论
(14) 回帖