腾讯前端暑期实习 一面二面HR面 (还愿)

面试时间线

4.11 中午 13.00  面试官座机打电话约面
4.11 晚上 19.00  初试 面试完官网立马变复试(面试时长1h10min)
4.12 上午 09.19  面试官邮件约复试
4.12 下午 16.00  复试 面试完官网状态立马变HR面试(面试时长50min)
4.13 下午 18.57  邮件约HR面试
4.14 上午 10.30  HR面试 + 云证(面完就云证)+ 官网进入录用评估中 状态
4.24 下午  找内部员工查看状态 已录用,(流程为  待报批->报批中->已录用->OC->offer)
4.25 上午 10.20 OC  (分析面经)


初试(1h10min,腾讯会议,顺序不一定,我初试题目很多,不要诧异,是真的)

1.讲一下cookie?
我的理解是 cookie 是服务器提供的一种用于维护会话状态信息的数据,通过服务器发送到浏览器,浏览器保存在本地的一种纯文本文件,当下一次有同源的请求时,将保存的 cookie 值添加到请求头部,发送给服务端。这可以用来实现记录用户登录状态等功能。cookie 一般可以存储 4k 大小的数据,并且只能够被同源的网页所共享访问。

服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间,domain 是域名、path是路径,domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输,HttpOnly 规定了这个 cookie 只能被服务器访问,不能在客户端使用js 脚本访问。
客户端可以通过JS脚本,例如document.cookie="key=value"形式设置cookie

在发生 xhr 的跨域请求的时候,即使是同源下的 cookie,也不会被自动添加到请求头部,除非显示地规定。
2.session是什么?
session是服务器为了保存用户状态而创建的一个特殊的对象

在浏览器第一次访问服务器时,服务器会创建一个session对象,该对象有一个唯一的id,即sessionid,服务器会把sessionid以cookie的形式发送给浏览器,当浏览器再次访问服务器时,会携带cookie在请求头,可以通过cookie中的sessionid来访问session对象
可以实现在http无状态基础上实现用户状态管理(即两个页面之间的用户状态,我可以保存在session中)
3.ES6的新特性
1.let const新特性,块级作用域 没有变量提升和暂时性死区   const常量
2.模板字符串  eg:`我喜欢${item}`
3.箭头函数
4.对象,数组解构赋值
5.for in和for of
6.class类,只是一种原型链的语法糖表现形式
7.extend类继承
4.箭头函数和普通函数的区别?
1.this
2.箭头函数是匿名函数,不能作为构造函数,不能使用new
3.箭头函数不绑定arguments参数,虽然有name属性但是是空字符串,取而代之用...扩展运算符
4.箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响
5.箭头函数没有原型属性 prototype
5.call和bind有什么区别?
call是调用函数,bind是返回一个函数
6.前端安全问题?(可以去搜一下具体的被攻击原因,和防范方案)
1.CSRF 跨站请求伪造,利用cookie
2.XSS  跨站脚本攻击,盗取cookie
7.谈谈闭包
定义:当一个嵌套的内部函数引用了外部函数的变量或者函数时,外部函数在执行时就产生了闭包

典型的闭包:
1.将函数作为另一个函数的返回值
2.将函数作为实参传给另一个函数调用

闭包特点:函数嵌套函数,内部函数引用外部函数的变量

闭包的作用:
1.闭包可以延长外部函数的局部变量的生命周期,可以实现计数器,累加器这类
2.可以形成变量的局部作用域,实现函数封装

缺点:函数定义的变量和数据会一直存在内部函数中,不会被及时释放,这样会导致内存泄漏
解决:尽量不使用闭包;用完后及时释放
8.如何学习前端的?
9.最近学的比较新的技术是什么?
10.sessionstorage和localstorage
sessionstorage:是一种会话存储,当关闭浏览器页面之后,相应的数据会被删除
localstorage:本地存储,存储持久数据,没有时间限制,保存之后会永久存在,除非手动清除,解决cookie读写困难,存储容量有限的问题

可以通过window.sessionstorage
window.localstorage在js中操作这两个对象

localstorage.setitem/getitem/removeitem
sessionstorage.setitem/getitem/removeitem来实现对存储的操作,
完全存储在客户端,大小有5M
localstorage有XSS注入的风险
11.es6的数组去重方法
//数组去重法1
console.log(Array.from(new Set(arr))); //array.from
//数组去重法2
console.log(...new Set(arr)); //扩展运算符
//哈希表
......
12.怎么判断数据类型?各有什么区别
instanceof
typeof
Object.prototype.toString.call()
constructor
13.深拷贝(JSON序列化和反序列化 /  递归)
//简单深拷贝
function deepclone(obj){
	let _obj = JSON.stringify(obj);
    return JSON.parse(_obj);
}

//数组 对象区分
function deepclone(obj){
    let res;
    if(typeof obj ==='Object'){
        if(Array.isArray(obj)){
            res = []
            for(let i in obj){
                res.push(deepclone(obj[i]))
            }
        }else if(obj === null){
            res =null
        }else if(obj.constructor === 'RegExp'){
            res = obj
        }else{ //普通对象
            res = {}
            for(let i in obj){
                res[i] = deepclone(obj[i])
            }
        }  
    }else{ //不是对象
        res = obj
    }
    return res;
}
14.两列布局的实现方式
1.浮动
2.flex布局
3.绝对定位

1.采用浮动
.outer{
height:100px;
}
.left{
float:left;
height:100px;
width:200px;
background:yellow;
}
.right{
margin left:200px;
height:100px;
width:auto;//撑满
background:red;
}

2.flex布局
.outer{
display:flex;
height:100px;
}
.left{
height:100px;
flex shrink:0;
flex grow:0;
flex basic:200px
}
.right{
height:100px;
flex:auto //(11auto)
}

3.绝对定位(左边的绝对定位或者右边的绝对定位)
.....
15.盒模型
ie盒模型:box-sizing:border-box               width=conten+border+padding
标准盒模型:box-sizing:content-box          width=content
16.介绍一下原型链以及会产生的问题
17.
防抖和节流区别 及 实现的思路
1.防抖:
持续拖动滚动条,只要不停止触发,就永远不会有输出
短时间内触发的事件,在某个时间期限内,我的函数只执行一次,
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法

2.节流:
持续拖动滚动条,每间隔一段时间,就会输出反馈
相当于技能冷却,执行之后,函数会失效一段时间,冷却之后,又会恢复
设置一个状态位,判断是否处于工作状态,
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
18.继承的方式有哪些?优缺?
1.call apply
2.a.prototype = new b()
3.a.prototype = b.prototype
4.a.prototype = Object.creat(b.prototype) //最常用的一种
19.基本数据类型,复杂数据类型(原始值,引用值)
20.判断数组的方式
instanceof
Object.prototype.tostring.call
Array.isArray
arr.__proto__  === Array.prototype
arr.constructor === Array
21.重绘和重排是什么,什么情况下会触发,区别在哪里,怎么优化?(回流)
减少重排,提高性能的方法:
1.元素的多次样式修改合并成一次修改;
2.如需进行对DOM节点进行多次操作,先将其脱离文本流之后再进行多次操作;
3.table布局的渲染与普通DOM节点的操作相比,性能消耗更大,如果可以,尽量减少table布局的使用;
4.缓存常用的布局信息;

回流比引起重绘,重绘不一定引起回流
回流:导致全部或部分dom树,渲染树需要重新更新
重绘:元素背景色,颜色发生改变,但是没有导致dom树位置改变
22.http和https的区别(对称加密,非对称加密,数字签名,数字证书,都必须懂!)
1.安全性上,HTTPS是安全超文本协议,在HTTP基础上有更强的安全性。简单来说,HTTPS是使用TLS/SSL加密的HTTP协议
2.申请证书上,HTTPS需要使用ca申请证书
3.传输协议上, HTTP是超文本传输协议,明文传输;HTTPS是具有安全性的 SSL 加密传输协议
4.连接方式与端口上,http的连接简单,是无状态的,端口是 80; https 在http的基础上使用了ssl协议进行加密传输,端口是 443
23.https四次握手协议(我真不会!!!面试官很友好,说不会就直接和他说就可以,没关系的)
24.跨域的方式(重点  cors跨域!)
强烈推荐阮一峰老师的文章,建议全文背诵+实践一遍(我就这么做了,觉得醍醐灌顶,学到知识真的太开心了!)

阮一峰老师的cors讲解文章: http://www.ruanyifeng.com/blog/2016/04/cors.html
25.水平垂直居中的方式(掌握三种)
26.数组常用的API
数组操作方法(push、pop、shift、unshift、reverse(倒置)、sort、toString、join、concat、slice(数组截取)、splice(删除 / 插入))
数组位置方法(indexOf、lastIndexOf)
数组迭代方法(forEach、map、filter、some、every)
27.slice和splice的区别
28.reduce和map的区别
29.v-if和v-show的区别 及 他们的使用场景
30.tcp 和 udp的区别
31.React的虚拟dom ,dom-diff算法的流程
32.redux的流程
33.有了解过fiber吗?
34.react 16 的新的生命周期有了解吗,旧的生命周期又有哪些?
35.状态码有哪些?
推荐看这篇文章
36.HTTP缓存有哪些机制
1.强缓存
2.协商缓存
推荐看这篇文章:https://www.jianshu.com/p/227cee9c8d15
37.promise 解决的问题 和 存在的问题?async和await?

个人总结:
1.promise 解决了回调函数的回调地域的问题,有时候我们的请求需要上一个请求返回的结果,会造成相互间回调函数的嵌套,使得代码的可读性和可维护性很低;
- promise让代码变得扁平,可读性更好,then返回一个promise,我们可以把then串起来,then返回的promise装载了由调用返回的值。
- 在异步回调中,函数的执行栈与原函数分离开,导致外部无法抓住异常。在promise中我们可以使用reject捕获是失败情况,和catch捕获执行异常。
//Promise 只不过是一种更良好的编程风格

2.存在的缺点,无法取消,一旦开始执行,中途无法取消;
不设置回调函数,promise内部抛出的错误,无法返回到外部
处于pendding状态时,无法得知进展到哪一个阶段。

3.async 和 await
async 函数返回的是一个 Promise 对象,在没有 await 的情况下执行 async 函数,他会立即返回一个promise对象,并且,绝对不会注意后面语句的执行,await关键字只能用在aync定义的函数内;
await 可以用于等待一个 async 函数的返回值,如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
async/await使得异步代码看起来像同步代码,使代码简洁,可读性更好,避免嵌套。
38.事件循环原理,常见的宏任务微任务有哪些?
宏任务(macrotasks): 主js、UI渲染、setTimeout、setInterval、setImmediately、requestAnimationFrame、I/O等

微任务(microtasks):process.nextTick()、promise.then()(new Promise不算!)、Object.observe()等

39.事件委托
40.let、const、var区别
41.数据请求在哪个生命周期函数:componentDidMount
42.nextTick 的原理

反问

1.部门业务
2.小组规模


复试(50min,腾讯会议,压力面,开放性问题更多,深挖某个知识点聊很久,非常大压力!!)

1.自我介绍(我提到审美)
2.审美话题聊了很久
3.什么时候开始学前端
4.前端性能优化(深入的聊了有20min,要讲很多实现的具体细节,简单带过的话,面试官会重新追问)
5.有没有看过vue框架源码
6.react 和 vue 更喜欢哪个,为什么?(持续追问!!!)
7.小程序源码看过吗(我有一个项目是小程序)
8.怎么实现内存的自动化管理(追问了两遍,没明白面试官的意思?后来就跳过了)
9.你擅长什么,代码方面
不好意思,有些真的想不起来,后面想起来了,我会重新回来更新的!!

反问

1.对实习生的培养方式
2.部门工作氛围


HR面试(25min,腾讯会议)

1.自我介绍
2.聊了一下我的GitHub和博客
3.为什么选择前端?
4.为什么在xx实习,还要继续面试?(我目前在xx实习)
5.做过最自豪的事情
6.用三个标签形容自己
7.学习前端的方式
8.兴趣爱好
9.最快什么时候可以入职?

反问

1.多久可以有结果
2.可以加一下联系方式吗

已offer!!!!!

碎碎念

好多东西都好难,一边实习一边面试真的好累,希望一切顺利啊!!
有很多事情以前都没做好,接下来,一定要好好加油!!!

前端的同学可以私聊我,我们平时可以一起讨论学习的知识!有问必回!

#实习##面经##腾讯##前端工程师#
全部评论
怎么两面就hr面了,您是有多优秀😲
3 回复
分享
发布于 2021-04-25 16:12
楼主是什么部门哇
1 回复
分享
发布于 2021-04-25 14:03
英特尔
校招火热招聘中
官网直投
海哥😁
点赞 回复
分享
发布于 2021-04-25 14:48
楼主爱您,就喜欢这种有答案的面经!
点赞 回复
分享
发布于 2021-04-25 15:51
啥也不说了,楼主牛掰,大哥能否加个微,交流一下
点赞 回复
分享
发布于 2021-04-25 18:56
楼主, 没问项目吗
点赞 回复
分享
发布于 2021-04-25 19:43
腾讯有这么难吗
点赞 回复
分享
发布于 2021-04-26 12:17
很实用的一篇面经,感谢楼主
点赞 回复
分享
发布于 2021-04-26 15:18
大佬面试的时候有问在校成绩吗,绩点什么的
点赞 回复
分享
发布于 2021-04-26 17:06
想问一下算法题是什么
点赞 回复
分享
发布于 2021-04-26 17:47
楼主可以加下联系方式嘛?一起进步奥
点赞 回复
分享
发布于 2021-04-26 20:39
pcg没有问node. js吗,上次pcg一面的时候面试官老想问我node. js😭,我不会他还想问
点赞 回复
分享
发布于 2021-05-06 10:29
楼主面试完多久收到回复的呀,刚面完hr很慌
点赞 回复
分享
发布于 2021-05-07 11:29
菜鸡问问大佬的学习路线
点赞 回复
分享
发布于 2021-05-11 01:02
好面经,收藏了收藏了
点赞 回复
分享
发布于 2021-06-11 10:55

相关推荐

58 325 评论
分享
牛客网
牛客企业服务