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的指向問題

1. 全局作用域、普通函數以及定時器中的this指向全局對象window
2. 方法中的this指向的是調用它的對象
3. 構造函數中的this指向構造函數的實例
4. 箭頭函數中沒有綁定this，this為最近外層作用域下有定義的this
5. 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前端杂乱知识复习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。