腾讯实习

实习
17期-MHJ
工作地点：
工作性质：
部门：待定
一面：2020.10

一面
跨域，解决方案
CORS
为什么JSONP可以实现跨域

XSS攻击和CSRF攻击
为什么要去匹配&符号
如果攻击者输入了script标签的话，怎么做

原型，prototype,constructor,proto

构造函数

箭头函数
没有自己的arguments那怎么拿到arguments

盒模型

H5新增

flex有哪些属性

css选择器优先级

get和post区别
尤其在数据包发送的区别

let,const,var

防抖和节流

数组常见API

cookie,sessionStorage,localStorage

缓存（强缓存和协商缓存）
协商缓存的响应首部字段是什么

时间复杂度

17期
工作地点：
工作性质：
部门：待定

遇到不会的，先跟面试官说思考一下，再委婉的说没了解到

一面
css画一个三角形
border(具体自己实现一下哈)
css画等边三角形
同样用border，画个菱形，截一半
cookie和localStorage的区别
cookie，sessionStorage，localStorage的区别：都是保存在浏览器端，都是同源的sessionStorage随当前窗口而关闭，localStorage和cookie 在所有同源窗口中都是共享的；cookie，cookie用来存储sessionid作为唯一标识用户最合适cookie数据不能超过4k，因为每次http请求都会携带
cookie和session的区别 cookie存放在浏览器，session存放在session；session比较安全；考虑安全应该应该用session，考虑服务器性能应该用cookie
CSRF攻击是啥，如何防范
CSRF/XSRF：跨站请求伪造；伪装成受信任用户的请求来利用受信任的网站；防御：检查Referer字段，该字段标明请求来源于哪个地址，我们可以拒绝一切非本站发出的请求，避免CSRF的跨站特性；通过token或者验证码来检测用户提交
上面的防御是否安全，如果黑客连上面的防御也能伪造呢(这个问题我同样也答不上)
cookie可以设置哪些字段
name，value
domain，访问此cookie的域名（baidu.com为顶级域名，www.baidu.com为二级域名）
path，可以访问此cookie的页面路径
expires / max-Age
size 此cookie的大小
http字段 httpOnly
secure 是否只能通过https来传递次
说一下协商缓存
协商缓存相关字段有Last-Modified （精度是秒的级别，也就是说1秒内更改资源的话，该字段不起作用，所以有了etag）/ If-Modified-Since（缓存过期并且资源已修改才会返回，200；最常见的应用场景是来更新没有特定 ETag 标签的缓存实体），Etag / If-None-Match（上一次设置Etag的值）
https为什么安全，怎么做到安全，又有什么缺点
https: 在http下加入了ssl层，建立信息安全通道，采用非对称加密；加密传输协议；端口443
https原理：
web服务器需要先建立ssl连接
服务器收到客户端的https url请求后，将包含公钥的证书返回给客户端
建立会话秘钥，通过网站的公钥来加密会话秘钥
web服务器通过私钥来解开会话秘钥，通过会话秘钥加密与客户端之间的通信
https协议缺点：
握手阶段时间比http长
缓存没有http高效，增加数据开销
ssl证书需要成本，且不能在同一个ip上绑定多个域名
http2.0特性内容安全，基于https的 二进制格式，传输信息分割为更小的消息和帧，采用二进制编码，让协议有更多的扩展性，比如用帧来传输数据和指令 多路复用，增强了长连接，request请求可以随机的混杂在一起；支持流的优先级，告诉服务端优先传输哪些资源
传输速度会不会比1.0快
会，而且快了很多
减少了网络延迟
通过二进制分帧实现低延迟和高吞吐量
前端优化
降低请求数 合并资源，减少http请求，minify和gzip压缩，webp，lazyload
提高请求速度 预解析dns，减少域名数，并行加载，cdn分发
渲染 JS/CSS优化，加载顺序，服务端渲染
缓存 http缓存请求，离线缓存manifast，离线数据缓存localStorage
vue的响应式原理，对数组和对象怎么实现
非数组
请说一下响应式数据的理解
对象内部通过defineReactive方法，使用Object.defineProperty将属性进行劫持，并且只会劫持已经存在的属性，对于数组则是通过重写数组方法来实现数组的响应式
并且只能是数组常用的方法（push，pop，shift，unshift，sort，splice，reverse），对于直接通过下标或者数组长度修改数组并不会产生响应式，或者用$set(数组，下标，更新后的值)，$set(对象，属性名，更新后的值)来增加对象属性，直接添加的话不会被defineProperty劫持到(因为初始化data的时候就对数据进行响应式劫持，后续增加的属性不会被劫持到)
对象有多层次时使用递归对每一层进行响应式劫持，而vue3中响应式实现使用的是proxy
每个属性都有自己的dep属性，用来存放它所依赖的watcher，当属性变化时，会通知到依赖的每个watcher去执行
性能方面
对象层级越深，性能会越差
不需要响应的数据可以不用放到data中
可以用Object.freeze()来冻结对象
const data = { count: 1 }; // 获取属性时，暂时存放当前依赖 let acitve = null; // 每个属性都有自己的依赖集dep，当属性变化时，执行自己的dep中所有的依赖 const dep = []; // data属性的数据劫持，只会劫持已经存在的属性 function defineProperty (obj) { for (const prop in obj) { let value = obj[prop]; Object.defineProperty(obj, prop, { get() { // 获取属性时，判断当前属性有无依赖，有的话就添加到依赖集dep中 if (active) { dep.push(acitve); } return value; }, set(newValue) { value = newValue; // 当属性变化时，执行当前属性的所有依赖 dep.forEach(watcher => watcher()); } }); } } defineProperty(data); // 监听属性变化的依赖 const wathcer = (fn) => { // 将依赖函数保存到active中，为了获取数据时能存到dep中 active = fn; fn(); // active设为null，可能有的属性不需要依赖 active = null; }; // count属性变化时，重新设置app.innerHtml的值 watcher(() => { // 这个就是count的依赖，当后续更改count时就需要为app.innerHtml重新赋值 app.innerHTML = data.count; });

响应数组
数组响应式
重写数组7个会改变原数组的方法，只有用这7种方法才会触发数组对应的watcher进行更新
$set()核心内部用的是splice方法
为什么不用definedProperty 如果数组的项太多，很浪费性能
const data = { arr: [1, 2, 3] }; const arrayOrigin = Array.protptype; const arrayMethods = Object.create(arrayOrigin); // 不是深拷贝 function definedReactive(obj) { for (const prop in obj) { let value = obj[prop]; if (a.constructor === Array) { arrayReactive(value); } else // 非数组响应式用defineProperty } } function arrayReactive(arr) { [‘pop’, ‘push’, ‘shift’, ‘unshift’, ‘splice’, ‘sort’, ‘reverse’].forEach(method => { arrayMehods[method] = function (…args) { // 函数劫持后（即执行原生的数组方法） arrayOrigin[method].apply(this, args); // 再执行自己的函数 render(); } }); arr.proto = arrayMethods; } function render () { app.innerHTML = data.arr; } render(); data.arr.push(4);

Vue.$set()
对于数组，是用重写的splice来实现
对于对象，就是对新增的属性或者修改的属性，重新进行一次defineReactive()
模板渲染(能答出大概流程和with语法就好了，还要了解虚拟dom)(有余力的可以把diff算法也说一下)
通过vue-template-compiler包，先将代码解析成AST语法树
优化代码，对静态节点进行标记
生成代码字符串，通过with + new Functoin 实现生成render方法，render执行后生成的是虚拟dom
1.通过vue-template-compiler包，将代码生成ast语法树，对代码进行优化，标记静态节点(如