OSI

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

? （1）同一層中的各網(wǎng)絡(luò)節(jié)點(diǎn)都有相同的層次結(jié)構(gòu)，具有同樣的功能。

? （2）同一節(jié)點(diǎn)內(nèi)相鄰層之間通過接口進(jìn)行通信。

? （3）七層結(jié)構(gòu)中的每一層使用下一層提供的服務(wù)，并且向其上層提供服務(wù)。

? （4）不同節(jié)點(diǎn)的同等層按照協(xié)議實(shí)現(xiàn)對等層之間的通信。

HTTP和HTTPS

請求方法，狀態(tài)碼，HTTPS傳輸數(shù)據(jù)的流程

UDP和TCP

TCP應(yīng)用：

（1）FTP：文件傳輸協(xié)議；

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

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

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

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

UDP應(yīng)用：

流媒體，實(shí)時游戲，物聯(lián)網(wǎng)，QQ文件傳輸語音視頻

對稱加密和非對稱加密

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

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

XSS和CSRF

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

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

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

跨域

1、jsonp的原理就是利用<script>標(biāo)簽沒有跨域限制，通過<script>標(biāo)簽src屬性，發(fā)送帶有callback參數(shù)的GET請求，服務(wù)端將接口返回數(shù)據(jù)拼湊到callback函數(shù)中，返回給瀏覽器，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)。

2、CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

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

4、postMessage()方法允許來自不同源的腳本采用異步方式進(jìn)行有限的通信，可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞。

強(qiáng)緩存和協(xié)商緩存

都是從客戶端緩存中讀取資源；區(qū)別是強(qiáng)緩存不會發(fā)請求，協(xié)商緩存會發(fā)請求。

強(qiáng)緩存： 通過http的response header中的Cache-Control和Expire兩個字段控制。

主要看Cache-Control：

private：僅瀏覽器可以緩存

public：瀏覽器和代理服務(wù)器都可以緩存

max-age=xxx：過期時間

no-cache：不進(jìn)行強(qiáng)緩存

no-store：不強(qiáng)緩存，也不協(xié)商緩存

強(qiáng)緩存步驟：1，第一次請求文件時，緩存中沒有該信息，直接請求服務(wù)器。

2，服務(wù)器返回請求的文件，并且http response header中cache-control為max-age=xxx

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

協(xié)商緩存：它的觸發(fā)條件有兩點(diǎn)、

　　　　　第一點(diǎn)是 Cache-Control 的值為 no-cache，則會促發(fā)協(xié)商緩存。

　　　　　第二點(diǎn)是 max-age 過期了，觸發(fā)協(xié)商緩存。

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

判斷JS數(shù)據(jù)類型的基本方法

typeof運(yùn)算符，

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

Object.prototype.toString方法。

this的指向問題

1. 全局作用域、普通函數(shù)以及定時器中的this指向全局對象window
2. 方法中的this指向的是調(diào)用它的對象
3. 構(gòu)造函數(shù)中的this指向構(gòu)造函數(shù)的實(shí)例
4. 箭頭函數(shù)中沒有綁定this，this為最近外層作用域下有定義的this
5. call、apply、bind可改變this指向

JS運(yùn)行機(jī)制

JS是單線程語言

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

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

Event Loop(事件循環(huán))中，每一次循環(huán)稱為 tick,

執(zhí)行順序：先執(zhí)行同步代碼，遇到異步宏任務(wù)則將異步宏任務(wù)放入宏任務(wù)隊列中，遇到異步微任務(wù)則將異步微任務(wù)放入微任務(wù)隊列中，當(dāng)所有同步代碼執(zhí)行完畢后，再將異步微任務(wù)從隊列中調(diào)入主線程執(zhí)行，微任務(wù)執(zhí)行完畢后再將異步宏任務(wù)從隊列中調(diào)入主線程執(zhí)行，一直循環(huán)直至所有任務(wù)執(zhí)行完畢。

javascript垃圾回收機(jī)制原理：

標(biāo)記清除，引用計數(shù)

JS中的數(shù)組

數(shù)組本來應(yīng)該是一個連續(xù)的內(nèi)存分配，但是在Javascript中不是連續(xù)分配的，而是類似哈希映射的方式存在的。

對于上述的實(shí)現(xiàn)方式，熟悉數(shù)據(jù)結(jié)構(gòu)的同學(xué)應(yīng)該知道，對于讀取操作，哈希表的效率并不高，而修改刪除的效率比較高。

現(xiàn)在瀏覽器為了優(yōu)化其操作，對數(shù)組的創(chuàng)建時候的內(nèi)存分配進(jìn)行了優(yōu)化：

對于同構(gòu)的數(shù)組，也就是，數(shù)組中元素類型一致，會創(chuàng)建連續(xù)的內(nèi)存分配

對于不同構(gòu)數(shù)組，按照原來的方式創(chuàng)建。

如果你想插入一個異構(gòu)數(shù)據(jù)，那么就會重新解構(gòu)，通過哈希映射的方式創(chuàng)建

map()和forEach()的區(qū)別

• 能用forEach()做到的，map()同樣可以。反過來也是如此。
• map()會分配內(nèi)存空間存儲新數(shù)組并返回，forEach()不會返回數(shù)據(jù)。
• forEach()允許callback更改原始數(shù)組的元素。map()返回新的數(shù)組。
• ?

cookie、sessionStorage和localStorage

如何創(chuàng)建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占位；聲明后不能再修改 ；如果聲明的是復(fù)合類型數(shù)據(jù)，可以修改其屬性

聲明 提升

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

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

3:函數(shù)聲明的優(yōu)先級高于變量聲明的優(yōu)先級，并且函數(shù)聲明和函數(shù)定義的部分一起被提升。

垂直居中

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

CSS選擇器優(yōu)先級

內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式>ID選擇器>類選擇器and偽類選擇器>標(biāo)簽（元素）選擇器and偽元素選擇器>通配符選擇器

回流reflow 重繪repaint

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

·使用resize、scroll時進(jìn)行防抖和節(jié)流處理，這兩者會直接導(dǎo)致回流

·使用visibility替換display:none，因?yàn)榍罢咧粫鹬乩L，后者會引發(fā)回流

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

·避免觸發(fā)同步布局事件，我們在獲取offsetWidth這類的屬性時，可以使用變量將查詢結(jié)果存起來，避免多次查詢，每次對offset / scroll /client等屬性進(jìn)行操作時都會觸發(fā)回流

·對于復(fù)雜動畫效果，使用絕對定位讓其脫離文檔流，復(fù)雜動畫效果會頻繁的觸發(fā)回流和重繪，我們可以將動畫元素設(shè)置絕對定位從而脫離文檔流避免反復(fù)回流重繪。

尾調(diào)用優(yōu)化

尾調(diào)用之所以與其他調(diào)用不同，就在于它的特殊的調(diào)用位置。函數(shù)調(diào)用會在內(nèi)存形成一個"調(diào)用記錄"，又稱"調(diào)用幀"（call frame），保存調(diào)用位置和內(nèi)部變量等信息。

如果在函數(shù)A的內(nèi)部調(diào)用函數(shù)B，那么在A的調(diào)用記錄上方，還會形成一個B的調(diào)用記錄。等到B運(yùn)行結(jié)束，將結(jié)果返回到A，B的調(diào)用記錄才會消失。

如果函數(shù)B內(nèi)部還調(diào)用函數(shù)C，那就還有一個C的調(diào)用記錄棧，以此類推。所有的調(diào)用記錄，就形成一個"調(diào)用棧"（call stack）。

而尾調(diào)用時,由于是函數(shù)的最后一步操作，所以不需要保留外層函數(shù)的調(diào)用記錄，因?yàn)檎{(diào)用位置、內(nèi)部變量等信息都不會再用到了，只要直接用內(nèi)層函數(shù)的調(diào)用記錄，取代外層函數(shù)的調(diào)用記錄就可以了。

只保留內(nèi)層函數(shù)的調(diào)用記錄。

如果所有函數(shù)都是尾調(diào)用，那么完全可以做到每次執(zhí)行時，調(diào)用記錄只有一項(xiàng)，這將大大節(jié)省內(nèi)存。

節(jié)流 防抖

• 都可以通過使用 setTimeout 實(shí)現(xiàn)
• 目的都是，降低回調(diào)執(zhí)行頻率。節(jié)省計算資源

防抖在連續(xù)的事件，只需觸發(fā)一次回調(diào)的場景有：

• 搜索框搜索輸入。只需用戶最后一次輸入完，再發(fā)送請求
• 手機(jī)號、郵箱驗(yàn)證輸入檢測
• 窗口大小resize。只需窗口調(diào)整完成后，計算窗口大小。防止重復(fù)渲染。

let btn=document.getElementsByTagName('button')[0];

let timeout;

btn.onclick=()=>{

	clearTimeout(timeout);

	timeout=setTimeout(()=>{

		console.log("ADD");//需要執(zhí)行的代碼

	},2000);

}

節(jié)流在間隔一段時間執(zhí)行一次回調(diào)的場景有：

• 滾動加載，加載更多或滾到底部監(jiān)聽
• 搜索框，搜索聯(lián)想功能

let btn=document.getElementsByTagName('button')[0];

        let bol=true;

        btn.onclick=()=>{

            if(bol){

                console.log("ADD");//需要執(zhí)行的代碼

                bol=false;

            }else{

                return ;

            }

            setTimeout(()=>{

                bol=true;

            },2000)

        }

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

防止擴(kuò)展：

禁止為對象添加屬性和方法。但已存在的屬性和方法可以被修改或刪除。

實(shí)施操作：Object.preventExtensions()

檢測是否應(yīng)用該操作：Object.isExtensible()

密封：

禁止為對象刪除已存在的屬性和方法。被密封的對象也是不可擴(kuò)展的。

實(shí)施操作：Object.seal()

檢測是否應(yīng)用該操作：Object.isSealed()

凍結(jié)：

禁止為對象修改已存在的屬性和方法。所有字段均只讀。被凍結(jié)的對象也是不可擴(kuò)展和密封的。

實(shí)施操作：Object.freeze()

檢測是否應(yīng)用該操作：Object.isFrozen()

加載阻塞

defer 特點(diǎn)

• 對于 defer 的 script，瀏覽器會繼續(xù)解析 html，且同時并行下載腳本，等 DOM 構(gòu)建完成后，才會開始執(zhí)行腳本，所以它不會造成阻塞；
• defer 腳本下載完成后，執(zhí)行時間一定是 DOMContentLoaded 事件觸發(fā)之前執(zhí)行；
• 多個 defer 的腳本執(zhí)行順序嚴(yán)格按照定義順序進(jìn)行，而不是先下載好的先執(zhí)行；

async 特點(diǎn)

• 對于 async 的 script，瀏覽器會繼續(xù)解析 html，且同時并行下載腳本，一旦腳本下載完成會立刻執(zhí)行；和 defer 一樣，它在下載的時候也不會造成阻塞，但是如果它下載完成后 DOM 還沒解析完成，則執(zhí)行腳本的時候是會阻塞解析的；
• async 腳本的執(zhí)行 和 DOMContentLoaded 的觸發(fā)順序無法明確誰先誰后，因?yàn)槟_本可能在 DOM 構(gòu)建完成時還沒下載完，也可能早就下載好了；
• 多個 async，按照誰先下載完成誰先執(zhí)行的原則進(jìn)行，所以當(dāng)它們之間有順序依賴的時候特別容易出錯。

em rem

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

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

em/rem：用于做響應(yīng)式頁面

css設(shè)置0.5px的border

1、transform:scale(0.5);

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

2、svg

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

JS浮點(diǎn)數(shù)精度問題

把小數(shù)放大為整數(shù)（乘），進(jìn)行算術(shù)運(yùn)算，再縮小為小數(shù)（除）

總結(jié)

以上是生活随笔為你收集整理的Web前端杂乱知识复习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。