腾讯前端暑期实习 一面二面HR面 （还愿）

面试时间线

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

我的理解是 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，也不会被自动添加到请求头部，除非显示地规定。

session是服务器为了保存用户状态而创建的一个特殊的对象

在浏览器第一次访问服务器时,服务器会创建一个session对象,该对象有一个唯一的id,即sessionid,服务器会把sessionid以cookie的形式发送给浏览器,当浏览器再次访问服务器时,会携带cookie在请求头,可以通过cookie中的sessionid来访问session对象
可以实现在http无状态基础上实现用户状态管理(即两个页面之间的用户状态,我可以保存在session中)

1.let const新特性,块级作用域 没有变量提升和暂时性死区   const常量
2.模板字符串  eg:`我喜欢${item}`
3.箭头函数
4.对象，数组解构赋值
5.for in和for of
6.class类,只是一种原型链的语法糖表现形式
7.extend类继承

1.this
2.箭头函数是匿名函数,不能作为构造函数,不能使用new
3.箭头函数不绑定arguments参数,虽然有name属性但是是空字符串,取而代之用...扩展运算符
4.箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响
5.箭头函数没有原型属性 prototype

call是调用函数，bind是返回一个函数

1.CSRF 跨站请求伪造,利用cookie
2.XSS  跨站脚本攻击,盗取cookie

定义:当一个嵌套的内部函数引用了外部函数的变量或者函数时，外部函数在执行时就产生了闭包

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

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

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

缺点：函数定义的变量和数据会一直存在内部函数中，不会被及时释放，这样会导致内存泄漏
解决：尽量不使用闭包；用完后及时释放

sessionstorage:是一种会话存储，当关闭浏览器页面之后，相应的数据会被删除
localstorage:本地存储，存储持久数据，没有时间限制，保存之后会永久存在，除非手动清除，解决cookie读写困难，存储容量有限的问题

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

localstorage.setitem/getitem/removeitem
sessionstorage.setitem/getitem/removeitem来实现对存储的操作，
完全存储在客户端，大小有5M
localstorage有XSS注入的风险

//数组去重法1
console.log(Array.from(new Set(arr))); //array.from
//数组去重法2
console.log(...new Set(arr)); //扩展运算符

//哈希表

......

instanceof

typeof

Object.prototype.toString.call()

constructor

//简单深拷贝
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;
}

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.绝对定位（左边的绝对定位或者右边的绝对定位）
.....

ie盒模型：box-sizing：border-box               width=conten+border+padding
标准盒模型：box-sizing：content-box          width=content

1.防抖：
持续拖动滚动条，只要不停止触发，就永远不会有输出
短时间内触发的事件，在某个时间期限内，我的函数只执行一次，
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法

2.节流：
持续拖动滚动条，每间隔一段时间，就会输出反馈
相当于技能冷却，执行之后，函数会失效一段时间，冷却之后，又会恢复
设置一个状态位，判断是否处于工作状态，
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}

1.call apply
2.a.prototype = new b()
3.a.prototype = b.prototype
4.a.prototype = Object.creat(b.prototype) //最常用的一种

instanceof
Object.prototype.tostring.call
Array.isArray
arr.__proto__  === Array.prototype
arr.constructor === Array

减少重排，提高性能的方法：
1.元素的多次样式修改合并成一次修改；
2.如需进行对DOM节点进行多次操作，先将其脱离文本流之后再进行多次操作；
3.table布局的渲染与普通DOM节点的操作相比，性能消耗更大，如果可以，尽量减少table布局的使用；
4.缓存常用的布局信息；

回流比引起重绘，重绘不一定引起回流
回流：导致全部或部分dom树，渲染树需要重新更新
重绘：元素背景色，颜色发生改变，但是没有导致dom树位置改变

1.安全性上，HTTPS是安全超文本协议，在HTTP基础上有更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议
2.申请证书上，HTTPS需要使用ca申请证书
3.传输协议上, HTTP是超文本传输协议，明文传输；HTTPS是具有安全性的 SSL 加密传输协议
4.连接方式与端口上，http的连接简单，是无状态的，端口是 80； https 在http的基础上使用了ssl协议进行加密传输，端口是 443

强烈推荐阮一峰老师的文章，建议全文背诵＋实践一遍（我就这么做了，觉得醍醐灌顶，学到知识真的太开心了！）

阮一峰老师的cors讲解文章： http://www.ruanyifeng.com/blog/2016/04/cors.html

数组操作方法（push、pop、shift、unshift、reverse（倒置）、sort、toString、join、concat、slice（数组截取）、splice（删除 / 插入））

数组位置方法(indexOf、lastIndexOf)

数组迭代方法（forEach、map、filter、some、every）

推荐看这篇文章

https://blog.csdn.net/weixin_42292229/article/details/105240877?ops_request_misc=&request_id=&biz_id=102&utm_term=%E7%8A%B6%E6%80%81%E7%A0%81%EF%BC%8C%E4%BD%A0%E6%95%A2&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-105240877.pc_search_result_before_js&spm=1018.2226.3001.4187

1.强缓存

2.协商缓存

推荐看这篇文章：https://www.jianshu.com/p/227cee9c8d15

Promise  ：https://blog.csdn.net/qq_43158726/article/details/108287836

async await：https://www.cnblogs.com/sexintercourse/p/12285157.html

个人总结：

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使得异步代码看起来像同步代码，使代码简洁，可读性更好，避免嵌套。

宏任务（macrotasks）: 主js、UI渲染、setTimeout、setInterval、setImmediately、requestAnimationFrame、I/O等

微任务（microtasks）：process.nextTick()、promise.then()（new Promise不算！）、Object.observe()等

推荐看这篇文章 ：https://www.cnblogs.com/zdhblog/p/6845879.html

反问

1.部门业务

2.小组规模

复试（50min，腾讯会议，压力面，开放性问题更多，深挖某个知识点聊很久，非常大压力！！）

不好意思，有些真的想不起来，后面想起来了，我会重新回来更新的！！

反问

1.对实习生的培养方式

2.部门工作氛围

HR面试（25min，腾讯会议）

反问

1.多久可以有结果

2.可以加一下联系方式吗

已offer！！！！！

碎碎念