裡面的段落

㈣ 前端常見面試題

前端開發可能問到的問題：
自我介紹（一定要對項目很熟悉）
ui-app web前端技術體系？

響應式怎麼做？

render跟狀態的差異
類組件的生命周期？
阻止冒泡，阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。

用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)

display有幾個值？默認值？
position有幾個值？默認值？
div水平垂直居中？
position有哪些值

react相關問題（概念理解、通訊組件等）、react常用內置
React-router
html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎麼聯調和上線的（現場想合適的前後端聯調方式，能和webpack環境切換聯系起來）
antd的Form shouldUpdate增量更新方式，性能優化。
對Hooks的理解

3:操作dom點擊事件向伺服器上傳數據，在上傳未完成之前不可重復操作事件
4:日期格式化，日期不足前兩位補0（2021-06-06 06:06:00）

用css寫一個布局，左側固定寬度，右側自適應

你看

㈤ 史上最全前端vue面試題！推薦收藏

1.為什麼會形成跨域？

不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。

② 然後再通過actions的commit來出發mutations來修改數據。

③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。

④ 最後由store觸發每一個調用它的組件更新。

3.vuex是什麼？怎麼使用？

vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502

4.vuex中的數據在頁面刷新後數據消失怎麼解決？

使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默認行為？

在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？

假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用

8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094

router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。

9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr

10. $on 兄弟組件傳值

$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：

使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄

11.組件跨級傳值
$attrs a->b->c
$listeners 監聽

12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync

13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。

15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。

16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。

17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。

18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。

19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。

20.vue獲取dom？
ref

21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none

22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。

23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx

24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。

25.如何讓scss只在當前組件中起作用？

㈥ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些

一、不定項選擇題 （每題3分，共30分）
1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是（ CD ）
A. 對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素，可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（ A ）
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕，使之打開一個新窗口，載入一個網頁，以下JavaScript代碼中可行的是（ AD ）
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>，以下代碼中可行的是（ BD ）
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼：
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是（ CD ）
A. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，第二個文本框的內容不變
7. 下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname)，用於輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個「-」，後面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中，（ A ）能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼！」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
9. 關於正則表達式聲明6位數字的郵編，以下代碼正確的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理，以下說明正確的是（ BCD ）
A. Xml是種可擴展標記語言，格式更規范，是作為未來html的替代
B. Xml一般用於傳輸和存儲數據，是對html的補充，兩者的目的不同
C. 在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同
D. 在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象，並列舉window對象的常用方法至少5個 （10分）
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 （10分）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之後關閉窗口； （10分）
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎？」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，並將以下字元串中的html標簽去除掉（15分）
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>

㈦ web前端面試經常問到的面試題有哪些

Web前端經常被問到的面試題及答案

一、HTML+CSS

1.對WEB標准以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;

2.xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時載入

前者無兼容性，後者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

後者優先順序高

7.前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js

8.css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些數據類型

Object number function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?

強制(parseInt,parseFloat,number)

隱式(== – ===)

3.split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字元串

4.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

7.IE和標准下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

9.call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據

使用eval parse 鑒於安全性考慮 使用parse更靠譜

11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

㈧ WEB前端面試題

第二章 面試題基礎篇

2.1 HTML面試題

面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

面試題：頁面導入樣式時，使用link和@import有什麼區別？

面試題：title與h1的區別、b與strong的區別、i與em的區別？

面試題：img標簽的title和alt有什麼區別？

面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？

2.2 CSS面試題

面試題：css背景紋路

面試題：介紹一下CSS的盒子模型

面試題：CSS選擇符有哪些？哪些屬性可以繼承？

面試題：CSS優先順序演算法如何計算？

面試題：用CSS畫一個三角形

面試題：一個盒子不給寬度和高度如何水平垂直居中？

面試題：display有哪些值？說明他們的作用。

面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？

面試題：清除浮動有哪些方式？

面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。

面試題：什麼是CSS reset？

面試題：css sprite是什麼,有什麼優缺點

面試題：display: none;與visibility: hidden;的區別

面試題：position有哪些值?有什麼作用? 【特別多公司問】

面試題：line-height和height有什麼區別？

面試題：opacity 和 rgba區別

2.3 JavaScript基礎面試題

面試題：延遲載入JS有哪些方式？

面試題：JS數據類型有哪些？

面試題：null和undefined的區別

面試題：JS數據類型考題

面試題：==和===有什麼不同

面試題：JS微任務和宏任務

面試題：JS作用域考題

面試題：JS對象考題

面試題：JS作用域+this指向+原型 考題

面試題：JS判斷變數是不是數組，你能寫出哪些方法？

面試題：slice是幹嘛的、splice是否會改變原數組

面試題：JS數組去重

面試題：找出多維數組最大值

面試題：給字元串新增方法實現功能

面試題：找出字元串出現最多次數的字元以及次數

2.4 真正移動端 —— H5/C3面試題

面試題：什麼是語義化標簽

面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。

面試題：如何關閉iOS鍵盤首字母自動大寫

面試題：怎麼讓Chrome支持小於12px 的文字？

面試題：rem和em有什麼樣區別

面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

面試題：webkit表單輸入框placeholder的顏色值能改變嗎？

面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

面試題：禁止ios和android用戶選中文字

面試題：自適應 [淘寶無線適配]

面試題：響應式

第三章 面試題進階篇

3.1 JavaScript進階面試題

面試題：new操作符具體做了什麼

面試題：閉包 【必須會】

面試題：原型鏈 【必須會】

面試題： JS繼承有哪些方式

面試題：說一下call、apply、bind區別

面試題：sort背後原理是什麼？

面試題：深拷貝和淺拷貝

面試題：localstorage、sessionstorage、cookie的區別

3.2 ES6面試題

面試題：var、let、const區別

面試題：作用域考題

面試題：將下列對象進行合並

面試題：箭頭函數和普通函數有什麼區別？

面試題：Promise有幾種狀態

面試題：find和filter的區別 【大廠】

面試題：some和every的區別 【大廠】

3.3 webpack面試題

面試題：webpack插件

3.4 Git面試題

面試題：git常用命令

面試題：解決沖突

面試題：GitFlow

第四章 面試題框架篇

4.1 區分初中高級的 —— Vue面試題

面試題：Vue2.x 生命周期有哪些？

1.系統自帶八個

2.當一旦進入到某個組件會執行哪些生命周期

3.$el和$data在哪個階段有

4.如果使用keep-alive會多倆個生命周期

5.如果加入keep-alive第一次進入組件會執行哪些生命周期

6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期

面試題：談談你對keep-alive的了解

面試題：v-if和v-show區別

面試題：v-if和v-for優先順序 2.x

面試題：ref是什麼？

面試題：nextTick是什麼？

面試題：Vue中如何做樣式穿透

面試題：scoped原理

面試題：Vuex是單向數據流還是雙向數據流？

面試題：講一下MVVM

面試題：雙向綁定原理

面試題：什麼是虛擬DOM

面試題：key是干什麼？

面試題：diff演算法

面試題：Vue組件傳值

面試題：props和data優先順序誰高？

面試題：computed、methods、watch有什麼區別？

面試題：Vuex

面試題：Vue路由

面試題：Vue項目打包後出現空白頁

4.2 微信小程序面試題

面試題：如何自定義頭部？

面試題：如何自定義底部？

4.3 uni-app面試題

面試題：生命周期

面試題：條件編譯

第五章 面試題性能優化篇

㈨ 前端面試題目匯總（一年經驗）

部分題目 有些面試完忘記了，面試真的不能安排太緊湊啊，腦子完全不夠用，血的教訓😂

寒冬期前端准備總結---JS篇
寒冬期前端准備總結---瀏覽器篇
寒冬期前端准備總結---伺服器和網路篇
寒冬期前端准備總結---CSS篇
寒冬期前端准備總結---框架篇
寒冬期前端准備總結---演算法篇

（當時一個下午現場面試兩家，累趴了，這家面的很差）

㈩ 前端面試題整理（一）

進程是CPU資源分配的最小單位，線程是CPU調度的最小單位

其中GUI渲染線程和JS引擎是無法同時工作的

默認情況下, TCP 連接會啟用延遲傳送演算法 (Nagle 演算法), 在數據發送之前緩存他們. 如果短時間有多個數據發送, 會緩沖到一起作一次發送 (緩沖大小見 socket.bufferSize), 這樣可以減少 IO 消耗提高性能.

如果是傳輸文件的話, 那麼根本不用處理粘包的問題, 來一個包拼一個包就好了. 但是如果是多條消息, 或者是別的用途的數據那麼就需要處理粘包.

可以參見網上流傳比較廣的一個例子, 連續調用兩次 send 分別發送兩段數據 data1 和 data2, 在接收端有以下幾種常見的情況:

A. 先接收到 data1, 然後接收到 data2 .
B. 先接收到 data1 的部分數據, 然後接收到 data1 餘下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部數據和 data2 的部分數據, 然後接收到了 data2 的餘下的數據.
D. 一次性接收到了 data1 和 data2 的全部數據.
其中的 BCD 就是我們常見的粘包的情況. 而對於處理粘包的問題, 常見的解決方案有:

多次發送之前間隔一個等待時間
關閉 Nagle 演算法
進行封包/拆包

通過滑動窗口協議（連續ARQ協議）實現，保證了分組無差錯、有序接收、流量控制。接收方返回的ACK中會包含自己的接收窗口的大小，並且利用大小來控制發送方的數據發送。

當發送者收到了一個窗口為0的應答，發送者便停止發送，等待接收者的下一個應答。如果這個窗口不為0的應答在傳輸過程中丟失，發送者一直等待，接收者以為發送者收到該應答，等待接收新數據，這樣雙方就相互等待，從而產生死鎖

TCP使用了持續計時器。每當發送者收到一個0窗口的應答後就啟動該計時器。計時器到時便主動發送報文詢問接收者的窗口大小。若接收者仍然返回0窗口，則重置該計時器繼續等待；若窗口不為0，則標識應答報文丟失了，此時重置發送窗口開始發送，這樣就避免了死鎖的產生

擁塞控制是作用於網路的，防止網路負載過大，常用的方法：1.慢啟動、擁塞避免 2.快重傳、快恢復。流量控制是作用於接收者的，控制發送者的發送速度使接收者來得及接收，防止分組丟失

發送方維持一個叫做擁塞窗口CWnd的狀態變數，控制著傳輸速度，TCP開始發送報文時CWnd=1。一個傳輸輪次所經歷的時間就是往返時間RTT，每經過一個RTT並且按時收到確認，就將擁塞窗口CWnd加倍。還有一個叫慢啟動門限ssthresh的狀態變數，當CWnd<ssthresh時，使用慢啟動，當CWnd>=ssthresh改用擁塞避免演算法

每經過一個往返時間RTT就把發送方的擁塞窗口cwnd加1而不是加倍。無論在慢啟動階段還是擁塞避免階段，只要發送方沒有按時收到確認，就把慢啟動門限設置為出現擁塞時的擁塞窗口cwnd的一半（但不小於2）。然後把擁塞窗口cwnd重置為1，執行慢啟動演算法

接收方收到一個失序的報文段後就立刻發出重復確認而不是等到自己發送數據時捎帶確認。只要發送方一連收到三個重復確認就立即重傳對方尚未收到的報文段，而不是等待重傳計時器到期

當發送方連續收到三個重復確認時，把慢啟動門限ssthresh減半，但是並不執行慢開始演算法，而是將擁塞窗口cwnd設置為ssthresh減半後的值，直接執行擁塞避免演算法。快重傳配合快恢復的TCP Reno版本是目前使用最廣的版本。

幀：HTTP/2 數據通信的最小單位消息：指 HTTP/2 中邏輯上的 HTTP 消息。例如請求和響應等，消息由一個或多個幀組成。
流：存在於連接中的一個虛擬通道。流可以承載雙向消息，每個流都有一個唯一的整數ID

HTTP/1.x會在請求和響應中中重復地攜帶不常改變的、冗長的頭部數據，給網路帶來額外的負擔。

服務端可以在發送頁面HTML時主動推送其它資源，而不用等到瀏覽器解析到相應位置，發起請求再響應。例如服務端可以主動把JS和CSS文件推送給客戶端，而不需要客戶端解析HTML時再發送這些請求。

服務端可以主動推送，客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器緩存過，瀏覽器可以通過發送RST_STREAM幀來拒收。主動推送也遵守同源策略，伺服器不會隨便推送第三方資源給客戶端。

HTTP 1.x 中，如果想並發多個請求，必須使用多個 TCP 鏈接，且瀏覽器為了控制資源，還會對單個域名有 6-8個的TCP鏈接請求限制。

HTTP2中：

同域名下所有通信都在單個連接上完成。
單個連接可以承載任意數量的雙向數據流。
數據流以消息的形式發送，而消息又由一個或多個幀組成，多個幀之間可以亂序發送，因為根據幀首部的流標識可以重新組裝

前端面試與進階指南
從輸入URL到頁面載入的過程？如何由一道題完善自己的前端知識體系！