一、阿里前端電話面-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.
經過這次面試呢，我的收獲是：
簡歷上面的東西一定要摸得非常透徹
實事求是的回答問題，比搪塞一個答案要好
一定要多刷題，動手能力要棒！