OSI OSI是Open System Interconnect的縮寫，意為開放式系統互聯。其各個層次的劃分遵循下列原則：（1）同一層中的各網路節點都有相同的層次結構，具有同樣的功能。（2）同一節點內相鄰層之間通過介面進行通信。（3）七層結構中的每一層使用下一層提供的服務，並且向其 ...

OSI

OSI是Open System Interconnect的縮寫，意為開放式系統互聯。其各個層次的劃分遵循下列原則：

（1）同一層中的各網路節點都有相同的層次結構，具有同樣的功能。

（2）同一節點內相鄰層之間通過介面進行通信。

（3）七層結構中的每一層使用下一層提供的服務，並且向其上層提供服務。

（4）不同節點的同等層按照協議實現對等層之間的通信。

HTTP和HTTPS

請求方法，狀態碼，HTTPS傳輸數據的流程

UDP和TCP

TCP應用：

（1）FTP：文件傳輸協議；

（2）SSH：安全登錄、文件傳送(SCP)和埠重定向；

（3）Telnet：不安全的文本傳送；

（4）SMTP：簡單郵件傳輸協議Simple Mail Transfer Protocol (E-mail)；

（5）HTTP：超文本傳送協議 (WWW)；

UDP應用：

流媒體，實時游戲，物聯網，QQ文件傳輸語音視頻

對稱加密和非對稱加密

對稱加密指的就是加密和解密使用同一個秘鑰。更不安全

非對稱加密指的是：加密和解密使用不同的秘鑰，一把作為公開的公鑰，另一把作為私鑰。公鑰加密的信息，只有私鑰才能解密。私鑰加密的信息，只有公鑰才能解密。效率更低

XSS和CSRF

Cross-Site Scripting（跨站腳本攻擊）簡稱 XSS，是一種代碼註入攻擊。

跨站請求偽造（英語：Cross-site request forgery），也被稱為 one-click attack 或者 session riding，通常縮寫為 CSRF 或者 XSRF，是一種挾制用戶在當前已登錄的 Web 應用程式上執行非本意的操作的攻擊方法。

攻擊利用受害者在被攻擊網站的登錄憑證，冒充受害者提交操作

跨域

1、jsonp的原理就是利用<script>標簽沒有跨域限制，通過<script>標簽src屬性，發送帶有callback參數的GET請求，服務端將介面返回數據拼湊到callback函數中，返回給瀏覽器，瀏覽器解析執行，從而前端拿到callback函數返回的數據。

2、CORS是一個W3C標準，全稱是"跨域資源共用"（Cross-origin resource sharing）。
它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而剋服了AJAX只能同源使用的限制。

3、nginx：a網站向b網站請求1.js文件時，向b網站發送一個獲取的請求，nginx根據配置文件接收這個請求，代替a網站向b網站來請求這個資源，nginx拿到這個資源後再返回給a網站，以此來解決了跨域問題。

4、postMessage()方法允許來自不同源的腳本採用非同步方式進行有限的通信，可以實現跨文本檔、多視窗、跨域消息傳遞。

強緩存和協商緩存

都是從客戶端緩存中讀取資源；區別是強緩存不會發請求，協商緩存會發請求。

強緩存：通過http的response header中的Cache-Control和Expire兩個欄位控制。

主要看Cache-Control：

private：僅瀏覽器可以緩存

public：瀏覽器和代理伺服器都可以緩存

max-age=xxx：過期時間

no-cache：不進行強緩存

no-store：不強緩存，也不協商緩存

強緩存步驟：1，第一次請求文件時，緩存中沒有該信息，直接請求伺服器。

2，伺服器返回請求的文件，並且http response header中cache-control為max-age=xxx

3，再次請求該文件時，判斷是否過期，如果沒有過期，直接讀取本地緩存，如果已經過期了，則進行協商緩存。

協商緩存：它的觸發條件有兩點、

　　　　　第一點是 Cache-Control 的值為 no-cache，則會促發協商緩存。

　　　　　第二點是 max-age 過期了，觸發協商緩存。

當屬性值為對象類型時，只拷貝了對象數據的引用，導致新舊數據沒有完全分離，還會互相影響。array.concat()或者array.slice() 是特殊的實現數組淺拷貝的方式。

判斷JS數據類型的基本方法

typeof運算符，

instanceof操作符（基於原型鏈），

Object.prototype.toString方法。

this的指向問題

全局作用域、普通函數以及定時器中的this指向全局對象window
方法中的this指向的是調用它的對象
構造函數中的this指向構造函數的實例
箭頭函數中沒有綁定this，this為最近外層作用域下有定義的this
call、apply、bind可改變this指向

JS運行機制

JS是單線程語言

巨集任務：1. script (可以理解為外層同步代碼)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）

微任務：1. Promise2.process.nextTick（Node.js） 3. Object.observe（已廢棄；Proxy 對象替代）4. MutaionObserver

Event Loop(事件迴圈)中，每一次迴圈稱為 tick,

執行順序：先執行同步代碼，遇到非同步巨集任務則將非同步巨集任務放入巨集任務隊列中，遇到非同步微任務則將非同步微任務放入微任務隊列中，當所有同步代碼執行完畢後，再將非同步微任務從隊列中調入主線程執行，微任務執行完畢後再將非同步巨集任務從隊列中調入主線程執行，一直迴圈直至所有任務執行完畢。

javascript垃圾回收機制原理：

標記清除，引用計數

JS中的數組

數組本來應該是一個連續的記憶體分配，但是在Javascript中不是連續分配的，而是類似哈希映射的方式存在的。

對於上述的實現方式，熟悉數據結構的同學應該知道，對於讀取操作，哈希表的效率並不高，而修改刪除的效率比較高。

現在瀏覽器為了優化其操作，對數組的創建時候的記憶體分配進行了優化：

對於同構的數組，也就是，數組中元素類型一致，會創建連續的記憶體分配

對於不同構數組，按照原來的方式創建。

如果你想插入一個異構數據，那麼就會重新解構，通過哈希映射的方式創建

map()和forEach()的區別

能用forEach()做到的，map()同樣可以。反過來也是如此。
map()會分配記憶體空間存儲新數組並返回，forEach()不會返回數據。
forEach()允許callback更改原始數組的元素。map()返回新的數組。

cookie、sessionStorage和localStorage

如何創建BFC

body 根元素

浮動元素：float 除 none 以外的值

絕對定位元素：position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)
（常用於解決CSS高度坍塌）

let、var、const

1.var聲明的變數會掛載在window上，而let和const聲明的變數不會

2.var聲明變數存在變數提升，let和const不存在變數提升

3.let和const聲明形成塊作用域

4.同一作用域下let和const不能聲明同名變數，而var可以

5.const一旦聲明必須賦值,不能使用null占位；聲明後不能再修改；如果聲明的是複合類型數據，可以修改其屬性

聲明提升

1:所有的聲明都會提升到作用域的最頂上去。

2:同一個變數只會聲明一次，其他的會被忽略掉。

3:函數聲明的優先順序高於變數聲明的優先順序，並且函數聲明和函數定義的部分一起被提升。

垂直居中

設定行高（line-height）
添加偽元素（vertical-align）
calc動態計算
使用表格或假裝表格
transform
絕對定位（上級position）
使用Flexbox

CSS選擇器優先順序

內聯樣式>內部樣式>外部樣式>ID選擇器>類選擇器and偽類選擇器>標簽（元素）選擇器and偽元素選擇器>通配符選擇器

迴流reflow 重繪repaint

·使用class代替style，減少style的使用

·使用resize、scroll時進行防抖和節流處理，這兩者會直接導致迴流

·使用visibility替換display:none，因為前者只會引起重繪，後者會引發迴流

·批量修改元素時，可以先讓元素脫離文檔流，等修改完畢後，再放入文檔流

·避免觸發同步佈局事件，我們在獲取offsetWidth這類的屬性時，可以使用變數將查詢結果存起來，避免多次查詢，每次對offset / scroll /client等屬性進行操作時都會觸發迴流

·對於複雜動畫效果，使用絕對定位讓其脫離文檔流，複雜動畫效果會頻繁的觸發迴流和重繪，我們可以將動畫元素設置絕對定位從而脫離文檔流避免反覆迴流重繪。

尾調用優化

尾調用之所以與其他調用不同，就在於它的特殊的調用位置。函數調用會在記憶體形成一個"調用記錄"，又稱"調用幀"（call frame），保存調用位置和內部變數等信息。

如果在函數A的內部調用函數B，那麼在A的調用記錄上方，還會形成一個B的調用記錄。等到B運行結束，將結果返回到A，B的調用記錄才會消失。

如果函數B內部還調用函數C，那就還有一個C的調用記錄棧，以此類推。所有的調用記錄，就形成一個"調用棧"（call stack）。

而尾調用時,由於是函數的最後一步操作，所以不需要保留外層函數的調用記錄，因為調用位置、內部變數等信息都不會再用到了，只要直接用內層函數的調用記錄，取代外層函數的調用記錄就可以了。

只保留內層函數的調用記錄。
如果所有函數都是尾調用，那麼完全可以做到每次執行時，調用記錄只有一項，這將大大節省記憶體。

節流防抖

都可以通過使用 setTimeout 實現
目的都是，降低回調執行頻率。節省計算資源

防抖在連續的事件，只需觸發一次回調的場景有：

搜索框搜索輸入。只需用戶最後一次輸入完，再發送請求
手機號、郵箱驗證輸入檢測
視窗大小resize。只需視窗調整完成後，計算視窗大小。防止重覆渲染。

let btn=document.getElementsByTagName('button')[0];
let timeout;
btn.onclick=()=>{
	clearTimeout(timeout);
	timeout=setTimeout(()=>{
		console.log("ADD");//需要執行的代碼
	},2000);
}

節流在間隔一段時間執行一次回調的場景有：

滾動載入，載入更多或滾到底部監聽
搜索框，搜索聯想功能

let btn=document.getElementsByTagName('button')[0];
        let bol=true;
        btn.onclick=()=>{
            if(bol){
                console.log("ADD");//需要執行的代碼
                bol=false;
            }else{
                return ;
            }
            setTimeout(()=>{
                bol=true;
            },2000)
        }

JavaScript阻止修改對象的三種方式

防止擴展：

禁止為對象添加屬性和方法。但已存在的屬性和方法可以被修改或刪除。
實施操作：Object.preventExtensions()
檢測是否應用該操作：Object.isExtensible()

密封：

禁止為對象刪除已存在的屬性和方法。被密封的對象也是不可擴展的。
實施操作：Object.seal()
檢測是否應用該操作：Object.isSealed()

凍結：

禁止為對象修改已存在的屬性和方法。所有欄位均只讀。被凍結的對象也是不可擴展和密封的。
實施操作：Object.freeze()
檢測是否應用該操作：Object.isFrozen()

載入阻塞

defer 特點

對於 defer 的 script，瀏覽器會繼續解析 html，且同時並行下載腳本，等 DOM 構建完成後，才會開始執行腳本，所以它不會造成阻塞；
defer 腳本下載完成後，執行時間一定是 DOMContentLoaded 事件觸發之前執行；
多個 defer 的腳本執行順序嚴格按照定義順序進行，而不是先下載好的先執行；

async 特點

對於 async 的 script，瀏覽器會繼續解析 html，且同時並行下載腳本，一旦腳本下載完成會立刻執行；和 defer 一樣，它在下載的時候也不會造成阻塞，但是如果它下載完成後 DOM 還沒解析完成，則執行腳本的時候是會阻塞解析的；
async 腳本的執行和 DOMContentLoaded 的觸發順序無法明確誰先誰後，因為腳本可能在 DOM 構建完成時還沒下載完，也可能早就下載好了；
多個 async，按照誰先下載完成誰先執行的原則進行，所以當它們之間有順序依賴的時候特別容易出錯。

em rem

em相對於父元素，rem相對於根元素

像素（px）：用於元素的邊框或定位。

em/rem：用於做響應式頁面

css設置0.5px的border

1、transform:scale(0.5);

利用的是 transform 縮放功能，將 1px 縮放一半，同時利用定位，將偽元素覆蓋整個 div 元素，從而達到偽元素與本身元素的合併效果。

2、svg

原理是利用SVG的描邊屬性為1物理像素（物理像素最低也必須得有1，不然什麼也看不見了），是高清屏的0.5px。

JS浮點數精度問題

把小數放大為整數（乘），進行算術運算，再縮小為小數（除）

Web前端雜亂知識複習

OSI