一、阿里前端电话面-2020.3.3（别人的）
链接：https://www.nowcoder.com/discuss/373872?type=post&order=time&pos=&page=1
实现一个方法，用于比较两个版本号（version1、version2）
如果version1 > version2，返回1；如果version1 < version2，返回-1，其他情况返回0。版本号规则`x.y.z`，xyz均为大于等于0的整数，至少有x位
2）.随机生成字符串
实现一个随机符串生成函数 randomStr()，要求如下：
生成的随机的字符串应该以字母开头，并包含 [a-z][0-9] 这些字符。
生成的字符串长度为 8。
生成的字符串不能够在程序运行的生命周期中存在重复的情形。
1. 说下项目中的难点
2. 说下diff算法-vue和React的diff算法
diff算法解决什么问题：diff算法是一种优化手段，将前后两个模块进行差异化的对比，真实的dom开销是很大的，当修改了页面的某个数据时，如果直接渲染真实dom会引起整个树的重绘，所以希望能够只让修改的数据映射到真实的dom，做最少的重绘，这就是diff算法要解决的事情。
虚拟dom：virtual DOM是将真实的DOM数据抽取出来，以对象的形式摸你树形结构，diff算法比较的也是virtual DOM
diff算法：对操作前后的dom树同一层的节点进行对比，一层一层对比，再插入真实的dom中，重新渲染
3. 做的项目优化
4. HTTP，HTTPS，websocket的区别
HTTP和WS比较：
相同点：
- 都是基于TCP的应用层的协议
- 都使用request/response模式进行连接的建立
- 在连接的建立过程中对错误的处理方式相同，在这个阶段WS可能返回和HTTP相同的返回码。
- 可以在网络中传输数据
不同点：
- WS是双向通信协议，可以双向发送或者接受信息，HTTP是单向的
- WS使用HTTP来建立连接，但是定义了一系列新的header域，这些域在HTTP中不会使用
- WS的链接不能通过中间人转发，它必须是一个直接连接
- WS连接建立后，数据的传输使用帧来传递，不再需要request消息
- WS的数据帧有序
websocket是什么：WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。
websocket的目的：HTTP协议是单向的网络协议，建立连接后只允许浏览器向服务器发送请求，当需要实时通信的时候，浏览器要花时间一直向服务器请求最新数据，导致过多不必要的请求，浪费流量和服务器资源，每一次请求、应答，都浪费了一定流量在相同的头部信息上。
在WebSocket中，只需要服务器和浏览器通过HTTP协议进行一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送。
websocket的原理和执行机制：
连接过程 —— 握手过程
- 浏览器、服务器建立TCP连接，三次握手。这是通信的基础，传输控制层，若失败后续都不执行。
- TCP连接成功后，浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。（开始前的HTTP握手）
- 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。
- 当收到了连接成功的消息后，通过TCP通道进行传输通信。
HTTP和HTTPS：
区别：
- http协议是简单的，无状态，明文传输的；https是由SSL+http协议构建的可加密，有身份认证的协议，更加安全
- http的端口是80，https的端口是443
- http协议免费，https需要ca申请证书，需要交费
SSL协议：
- SSL是非对称加密，加密和解密需要两个秘钥，公开秘钥和私有秘钥
连接过程：
- 客户端请求建立SSL连接，发送支持的加密方式以及一个随机数client random给服务器
- 服务器选择其中一种加密方式，再加上另一个随机数server random、数字证书（包含公钥），发送给客户端
- 客户端确认数字证书有效，再生成新的随机数，将这个随机数用公钥进行加密发送给服务器
- 服务器收到客户端回复，利用自己的私钥解密，获得随机数，通过三个随机数和协商的加密方式计算生成一个对称秘钥，之后的会话通过这个对称秘钥进行加密传输
5. SSR 首屏服务端渲染（SSR：server side render）
https://www.jianshu.com/p/10b6074d772c
6. SSR的具体用法
7. 用SSR遇到过什么难题
8. 为什么使用redis
9. 闭包
产生闭包的情况：
- 出现函数嵌套
- 内部函数引用了外部函数的变量
- 外部函数被执行调用了
闭包是什么：
- 使用chrome调试查看
- 闭包是嵌套的内部函数
闭包的作用：
- 让函数内部的局部变量在函数执行完之后，仍存活在内存中，延长局部变量的生命周期
- 让函数外部可以操作函数内部的数据
闭包的生命周期：
- 产生：在嵌套内部函数定义执行完时产生
- 死亡：在嵌套的内部函数成为垃圾对象时
常见闭包：
- 将函数作为另一个函数的返回值
function fn1(){
var a = 2
function fn2(){
a++
console.log(a)
}
return fn2
}
var f = fn1()
f()// 3
f()//4
整个过程中产生了几个闭包？
1个，因为执行外部函数的时候才会创建内部函数对象，执行1次，就创建1次，因为fn1的返回值是fn2，f()接收的是fn1的返回值，所以f()调用2次，相当于fn1()() 调用的是fn2内部函数2次，闭包只产生了1个，a的值在闭包里，第二次调用时找a的时候a=3
执行完之后，函数声明的内部变量a是否存在？包含这个内部变量的内部函数还在吗？ 在，在闭包里，但是这个内部函数不在了，但是内部变量不会变为垃圾对象，因为var f = fn1()，f指向的是这个内部变量，有人指向就不是垃圾变量；如果是fn1()直接调用，或者f=null 结束时没有f指向a，a就会变为垃圾变量
- 将函数作为实参传递给另一个函数调用
function showDelay(msg,time){
setTimeOut(function(){
alert(msg)
},time)
}
showDelay(‘lalala’,2000)
因为内部函数使用了msg，所以产生了闭包，time不在内部函数里，time就不在闭包里
10. 原型链
11. 阿里伯乐做了个版本号比较问题，没全a，拿去Leecode跑45/72，估计凉了
三、阿里钉钉前端实习-2020.3.14（别人的）
链接：https://www.nowcoder.com/discuss/381790?type=post&order=time&pos=&page=1
1. 你做了哪些东西呢，你觉得自己做的不错的地方，用到哪些技术解决了哪些问题，具体说一下
2. 为什么选react,为什么选用egg，为什么选用ts
3. 性能优化
4. react hook 原理
5. react 原理
一、钉钉面试问题
1. 首先做一下你的自我介绍以及你简历上的项目，以及难点创新点（介绍了大概5min）
(在我做介绍的过程中，面试官记录了他想要问的问题 at same time)
回答的项目相对之前清晰，但还是有卡顿，多熟悉复盘项目真的重要！
2. CSS问题
① 你能说一下CSS的盒模型包含哪些属性吗?
② 有属性可以影响盒模型的范围吗？（关于这个问题，了解了半天，不明白面试官想要表达的意思） box-sizing =content-box|border-box|inherit
③ height = 100px的时候，包含这个padding吗？ 怎样让它含？
④ margin-collapse:你了解吗，父子div同样设置margin-top，子div相对于顶部的margin应该是什么？你确定吗？ 确定，但实际上是错的，默认应该是选两个对的
⑤ CSS布局的话 ，你分别用哪些方式及属性
⑥ relative和absolute的区别（开始两者说反了，后来及时纠正）
⑦ flex布局你了解过吗？他有哪些属性？设置什么值。（答非所问）
追问：默认是横着排吗？有没有办法改变方向
3. JS问题
做手机端的时候怎么实现自适应的？
rpx是个什么单位？手机上1rpx是一个物理像素吗？是怎么做到的？
追问： 如何做到换算成750的?了解怎么吗
异步IO请求怎么发送？ （回答成为了实现异步的方式）ajax
ajax底层是哪个方法呢？js的api，真正底层提供这个概念的方法是什么呢（至今不明白）。。。
fetch实现异步请求吗？
ajax 可以跨域吗？那有什么限制吗？
可以，HTML5中可以使用CORS跨域资源共享机制实现跨域
CORS通过设置服务端的HTTP头部信息来告诉浏览器，允许域名跨域访问
比如header('Access-Control-Allow-Origin:*')
有办法跨域吗？jsonp是怎么做的呢？jsonp浏览器底层的方法是什么？
① 同源策略：同源指的是域名、端口、协议相同的url可以互相访问，在同源策略下，在某个服务器下的页面时无法获取到该服务器以外的数据的（比如在自己的网站通过ajax去获取豆瓣的地址，是会报错）
② 哪些不符合同源策略，可以跨域获取数据：<img>的src（获取图片）、<link>的href（获取css）、<script>的src（获取JavaScript）
② JSONP是JSON with padding，原理是通过动态创建<script>标签，利用<script>标签里的src不受同源策略约束来跨域获取数据
③ JSONP实现跨域请求：
JSONP由两个部分组成：回调函数和数据
<script type="text/javascript">
function handleResponse(response){ console.log(response); } </script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
这个相当于在body的第一个子节点中加入了一行代码:
<script type="text/javascript" src ="https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";></script>
回调函数是handleResponse(response)， 放在src的callback中，callback前面的地址获取的是地址内的JSON数据，将获取到的JSON数据作为参数传递给回调函数的参数（response），并执行回调函数
jsonp可以发post请求吗？
不可以；从post和get的区别入手
get是通过在请求的url上添加请求参数的
post是通过http post机制，将表单内各个字段与其内容放在HTML header内，作为HTTP消息的实体内容一起传送的；
jsonp是通过动态创建script，添加src属性实现跨域的，无法通过http post机制为html header传送数据
http有哪些方法你能说一下嘛？Options能做什么？
cookie 和 session的区别
如何清除cookie
事件委托的原理
ES6有哪些新的属性？
箭头函数相比于其他函数的区别？
Generator 和 async/await 函数用来做啥？
async的返回值是什么呢？
Promise的方法有哪些？
Promise可以取消吗？
Generator设计的目的是干啥？
ES6中的中this的指向怎样决定?
关于Vue
Vue对前端开发有什么优势
双向绑定中Vuex的工作原理？
vue-router的原理？改完整的path?url会有变化吗？
追问：服务端需要做什么配合吗？（不需要）
核心就是：更新视图但是不重新请求页面
其他问题
image caption算法的了解
对于项目分工以及我负责的内容
怎么接触的前端？
二、钉钉笔试题目
1.评测题目:
// 实现一个简单的模板引擎 render(template, data);
// 输入： let template = ‘我是{{name}}，年龄{{ age }}，性别{{sex}}’;
let data = { name: ‘姓名’, age: 18 }
// 输出：我是姓名，年龄18，性别undefined
在笔试的过程中，面试官是非常有耐心的，帮助我改了我忽略的空格问题，还引导我用其他的方式解决，但是时间来不及了，然后他已经推迟下班了，我为耽误人家时间表示非常的抱歉，但和我一样面试钉钉的同学是两道题，我只测了一道，问问题问了不到一小时吧，虽然面试官之前说整体30~60min.
经过这次面试呢，我的收获是：
简历上面的东西一定要摸得非常透彻
实事求是的回答问题，比搪塞一个答案要好
一定要多刷题，动手能力要棒！