平安壹錢包二面

問題總結

1 瀏覽器標籤頁通信方式

方式一：cookie+setInterval
關於cookie
cookie最初是在客戶端用於存儲用戶的會話信息的。cookie實際上是一小段文本信息，客戶端請求服務器，如果服務器需要記錄該用戶狀態，就使用response向客戶端瀏覽器頒發一個cookie。客戶端會把cookie保存起來，當瀏覽器再次請求該網站時，把請求的網址和cookie一同提交給服務器。服務器檢查該cookie以此來辨認用戶狀態。服務器也可根據需要修改cookie的內容。
document.cookie可以讀取、寫入、刪除cookie。
cookie的特性：一個頁面產生的cookie能被與這個頁面同一目錄或其他子目錄下的頁面訪問，由此產生了一個共享的存儲空間。通常把cookie的path設置爲一個更高級別的目錄從而使更多頁面共享。cookie所在的域默認爲請求的地址，也可以設置document。domain爲父域等方式擴大cookie可被訪問的域。
實現原理
需求：新聞詳情頁修改數據提交後，列表頁可顯示

//列表頁 間隔1s檢測tid字段是否更新
window.onload=function(){
  var tid='';
  setInterval(function(){
    if(tid!=QQ.cookie.get('tid')){
      alert('數據更新');
      tid=QQ.cookie.get('tid');
    }
  },1000);
}

//詳情頁 有數據修改時 寫入cookie
<input id='content' type='text'>
<button id='btn'></button>
<script>
window.onload=function(){
  var oBtn=document.getElementById('btn');
  var oInput=document.getElementById('content');
  oBtn.onclick=function(){
    var val=oInput.value;
    QQ.cookie.set('tid',val);
  }
}
</script>

不足
1 cookie空間有限，瀏覽器在每一個域名下最多能設置30-50個cookie，容量最多4K左右
2 每次HTTP請求會把當前域的cookie發送到服務器上，而有些cookie只是瀏覽器才能用到，浪費網絡帶寬
3 setInterval的頻率設置，過大影響瀏覽器性能，過小影響時效性
優點
兼容性好幾乎所有瀏覽器都支持

方式二：localStorage

HTML5中加入了一個localStorage特性，主要是用來作爲本地存儲使用的，解決了cookie存儲空間不足的問題。一般瀏覽器支持的是5M大小，不同瀏覽器中localStorage也會有所不同。
localStorage提供了JS的讀寫操作。

if(！window.localStorage){
  alert('瀏覽器不支持localStorage');
  return false;
}else{
  var storage=window.localStorage;
  storage.a=1;
  storage.setItem('b',2);
  storage.clear();
}

除了讀寫之外，比cookie多了一個優點，提供了onstorage以及storage事件，可以綁定一個回調函數。

window.onstorage=function(e){
  console.log(e);
}
window.addEventListener('storage',function(e){
  console.log(e);
});

localStorage是Storage對象的實例，對Storage事件進行任何修改都會觸發storage事件。屬性/setItem保存數據 delete/removeItem刪除數據 clear都會觸發，通過這個事件我們可以實現頁卡之間的變動監聽。
實現原理

//列表頁
<script>
window.addEventListener('storage',function(event){
  console.log('newValue is'+localStorage.getItem('tid'));
  console.log('oldValue is'+event.oldValue);
  alert('數據更新');
},false);
</script>
//詳情頁
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
    window.onload=function(){
        var oBtn=document.getElementById("btn");
        var oInput=document.getElementById("content");
        oBtn.onclick=function(){
            var val=oInput.value;
            localStorage.setItem("tid",val);
        }
    }
</script>

注意
onstorage以及storage事件都是針對非當前頁面對localStorage進行修改時纔會觸發。並且，在對原有的數據的值進行修改時纔會觸發，比如原本有一個key爲a，value爲1的localStorage，再執行localStorage.setItem(‘a’,1)是不會觸發監聽函數的
不足
瀏覽器對於localStorage的容量大小不統一，並且高版本瀏覽器才支持localStorage這個屬性
目前所有瀏覽器中都會把localStorage的值類型限定爲string類型，需要JSON轉換
localStorage本質上是對字符串的讀取，存儲內容多的話會消耗內存空間，導致頁面變卡
只能監聽非己頁面的數據變化，這一點嚴重影響使用
優點
解決了cookie容量小和時效性不足的問題

方式三：WebSocket
WebSocket API是下一代客戶端-服務器的異步通信方法，雙向實時通信。WebSocket並不侷限於以Ajax(或XHR)方式通信，因爲Ajax技術需要客戶端發起請求，而WebSocket兩端可以彼此相互推送。XHR受到域的限制，而WebSocket允許跨域通信。

//使用方式
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  //發送
  socket.send('I am the client..listening..');
  //監聽消息
  socket.onmessage=function(event){
    console.log('client received a message',event);
  };
  //監聽socket關閉
  socket.onclose=function(event){
    console.log('client notified socket has closed',event);
  };
  //關閉socket
  socket.close();
}

send和onmessage用於發送、接收數據。onmessage事件提供了一個data屬性，包含消息的body部分。body部分必須是一個字符串，可以進行序列化/反序列化操作，以便傳遞更多數據。
實現原理

//列表頁通過onmessage監聽socket服務器發送過來的消息
<script>
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  socket.onmessage=function(event){
    console.log('Client received a message',event);
  };
};
</script>
//詳情頁有數據修改時，通過socket連接，通知列表頁更新數據
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
var socket=new WebSocket('ws://localhost:8080');
window.onload=function(){
  var oBtn=document.getElementById("btn");
  var oInput=document.getElementById("content");
  oBtn.onclick=function(){
    var val=oInput.value;
    socket.onopen=function(event){
      socket.event('數據更新');
    }
  }
}
</script>

WebSocket的語法簡單，不過需要IE10+瀏覽器才支持WebSocket通信。如果需要兼容IE8、9，通常使用第三方庫來解決這個問題，比如Socket.IO。
不足
需要瀏覽器端支持才能完成任務。如果socket數據量比較大的話，會嚴重消耗服務器的資源。
優點
簡單可實時

方式四：BroadcastChannel
BroadcastChannel即廣播頻道，是window下面的一個API，用於同源不同頁面之間完成通信。postmessage傳遞數據，onmessage監聽消息。只要初始化實例時傳入相同的頻道值，就會被接入到一個相同的廣播頻道中。
實現原理

//詳情頁傳遞數據
let listCast=new BroadcastChannel('mychannel');
myObj={tid:'123',title:'更改後的標題'};
listCast.postMessage(myObj);
//列表頁接收廣播
let articleCast=new BroadcastChannel('mychannel');
articleCast.onmessage=function(e){
  console.log(e.data);
}

不足
兼容性差只支持最新版Chrome和Firefox,完全不支持IE和Safari。
優點
簡單單一

方式五：SharedWorker
SharedWorker是HTML5新提供的瀏覽器API，叫做共享工作線程。允許多個頁面共享使用線程，每個頁面都鏈接到該共享工作線程的某個端口號上。頁面通過該端口與共享工作進程進行通信。
實現原理

//列表頁
<script>
var s=new SharedWorker('x.js');
s.port.onmessage=function(e){
  console.log(e.data);
  alert('數據變化');
};
s.port.start();
</script>
//詳情頁 通過SharedWorker通知列表頁更新數據
<input id="content" /><input type="button" id="btn" value="發送"/>
<script>
var s=new SharedWorker('x.js');
btn.onclick=function(){
  s.port.postMessage(document.getElementById('content').value);
  s.port.start();
}
</script>
//共享線程x.js 雙向 每一個頁面都能用來發送和接收數據
// sharedWorker所要用到的js文件，不必打包到項目中，直接放到服務器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]
  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

SharedWorker可以被多個window同時使用，但是必須保證這些標籤頁同源。
不足
兼容性差，不支持IE
API簡單，配置繁瑣
優點
另啓一個新線程，不影響主線程代碼業務，無需藉助服務器。

2 Ajax提交表單怎麼寫

先複習提交表單的GET和POST區別

GET會在Request URL後面添加參數，POST參數在消息體內(在chrome裏Form Data就是請求的第四部分-消息體)
GET安全性比POST低
GET請求可被緩存，有長度限制(添加到URL中而URL有長度限制 2048個字符)。POST沒有。
ajax提交表單使用jquery如下

function login(){
  $.ajax({
    type:'POST',
    dataType:'json',//預期服務器返回的數據類型
    url:'users/login',
    data:$('#form1').serialize(),
    success:function(result){
      if(result.resultCode==200){
        console.log('SUCCESS');
      }
    },
    error:function(){
      console.log('ERROR');
    }
  });
}

serialize() 方法
通過序列化表單值，創建 URL 編碼文本字符串。
可以選擇一個或多個表單元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。
如果要表單元素的值包含到序列字符串中，元素必須使用 name 屬性。

3 如何判斷json對象

首先複習JSON格式，附上JSON與JS對象的區別
https://www.jb51.net/article/107041.htm
判斷方法

function isJson(obj) {
  var isjson =
    typeof obj == 'object' &&
    Object.prototype.toString.call(obj).toLowerCase() == '[object object]' &&
    !obj.length
  return isjson
}

4 BFC

參考地址：
https://www.cnblogs.com/giggle/p/5236982.html
https://www.cnblogs.com/giggle/p/5236770.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

什麼是BFC？
根據MDN解釋，BFC就是塊格式化上下文，可理解爲一個區域。
進行盒模型佈局的時候，如果一個元素符合了成爲BFC的條件，那麼該元素就成爲了一個隔離的獨立容器，BFC的區域不會與外部浮動元素重疊，且在同一個BFC內的兩個相鄰塊級元素的外邊距會重疊，但不同 BFC外邊距不會重疊；在計算BFC高度時，將它內部的浮動元素也包含在內。總之，BFC與外部元素互不影響。
觸發BFC的條件 ?
1 不是所有的元素模式都能產生BFC，w3c 規範： display 屬性爲 block, list-item, table 的元素，會產生BFC.
2 何時觸發BFC ?
給這些元素添加如下屬性就可以觸發BFC。
常用方式：
-float屬性不爲none
-position爲absolute或fixed
-display爲inline-block, table-cell, table-caption, flex, inline-flex
-overflow不爲visible。
3 BFC的作用 ?
清除元素內部浮動(讓浮動內容和周圍內容等高)
設置父元素overflow:hidden/auto
解決外邊距合併
設置其中一個的父元素overflow:hidden/display:table-cell
-自適應佈局/防止與浮動元素重疊
以兩側固定中間自適應爲例，可以設置兩端float爲left/right，中間採用overflow:hidden/display:table-cell+width:9000px(一個很大的值)

5 紅黑樹

參考這篇知乎的漫畫專欄https://zhuanlan.zhihu.com/p/31805309
首先複習什麼是二叉查找樹(BST):
1 左子樹所有節點值都小於等於根節點值
2 右子樹所有節點值都大於等於根節點值
3 左右子樹也分別是二叉排序樹
優點：查找所需最大次數約等於樹的高度
缺陷：插入節點時可能導致不平衡
由此產生了紅黑樹：自平衡的二叉查找樹
附加特性：
1 節點是紅色/黑色
2 根節點是黑色
3 每個葉子節點都是黑色的空節點
4 每個紅色節點的兩個子節點都是黑色(從每個葉子到根的所有路徑上不能有兩個連續的紅色節點)
5 從任意節點到其每個葉子的所有路徑都包含相同數目的黑色節點
完整說明 https://huangxsu.com/2018/08/01/js-data-structure/
代碼太長給我整懵了先碼再看

6 一天的時間怎麼安排的

要具體到時間點我的回答是每天的工作內容怎麼安排怎麼分塊除了起牀時間…沒有回答固定的時間因爲不是很懂這個問題的意義看作息是否健康？每天的任務不同上班時間都是一樣的剩下的是根據當天的情況再劃分

其餘的記不起來了

平安壹錢包二面

問題總結

1 瀏覽器標籤頁通信方式

2 Ajax提交表單怎麼寫

3 如何判斷json對象

4 BFC

5 紅黑樹

6 一天的時間怎麼安排的

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Python 潮流週刊#51：用 Python 繪製美觀的圖表

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

高頻面試題之HTTP篇

vue教程實踐

0829面試總結

【JavaScript高級】貪喫蛇

高頻面試題之CSS篇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結