首页 > 笔经面经 > 腾讯前端暑期实习 一面二面HR面 (还愿)

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

头像
但愿不头疼
编辑于 2021-04-27 10:12:42 APP内打开
赞 47 | 收藏 250 | 回复16 | 浏览6157

面试时间线

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!!!!!

碎碎念

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

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

更多模拟面试

16条回帖

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

推荐话题

相关热帖

笔经面经近期热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐