爲頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則

CSS選擇器：標籤選擇器、類選擇器、ID選擇器、全局選擇器（*）、組合選擇器、後代選擇器、羣組選擇器、繼承選擇器、僞類選擇器、字符串匹配的屬性選擇器（^ $ *）、子選擇器（帶>）、CSS相鄰兄弟選擇器（帶+）

CSS優先級：!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認樣式

同一級別中後寫的會覆蓋先寫的樣式

css繼承特性主要是指文本方面的繼承，盒模型相關的屬性基本沒有繼承特性

at規則由一個@關鍵字和後續的一個區塊組成，如果沒有區塊，則以分號結束。

at規則

CSS僞類和僞元素有哪些，它們的區別和實際應用

僞類：爲了通過選擇器，格式化DOM樹以外的信息以及不能被常規CSS選擇器獲取到的信息

僞元素：可以創建一些文檔語言無法創建的虛擬元素。比如：文檔語言沒有一種機制可以描述元素內容的第一個字母或第一行，但僞元素可以做到（::first-letter、::first-line）。同時，僞元素還可以創建源文檔不存在的內容，比如使用 ::before 或 ::after

區別在於僞類是彌補了CSS選擇器的不足，更方便獲取信息。僞元素本質上是創建了一個虛擬容器，我們可以在其中添加內容或樣式。僞類用單冒號，僞元素用雙冒號。一個選擇器可以同時使用多個僞類，而一個選擇器只能同時使用一個僞元素。

僞類： :link :visited :active :hover : focus :first-child :first-of-type :nth-child

僞元素：::first-letter(選擇蒜素的首字母) ::first-line ::before ::after ::lang(language)選擇帶有“language”開頭的元素

HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理

什麼是文檔流？文檔內元素的流動方向，內聯元素從左往右，塊級元素從上到下。

CSS定位規則：

1.靜態定位(static)：一般元素不加任何定位屬性就屬於靜態定位，處於正常的文檔流

2.絕對定位(absolute)：絕對定位的元素從文檔流拖出，使用left，top等屬性相對於最接近的一個最有定位設置的父級進行絕對定位。（子絕父相）絕對定位元素可層疊，可通過z-index控制。

3.相對定位(relative)：相對定位元素不可層疊，依據left，top等屬性在正常文檔流中偏移自身位置。

4.固定定位(fixed)：固定定位與絕對定位類似，但它是相對於瀏覽器窗口定位，並不會隨着滾動條進行滾動。

雪碧圖：

CSS雪碧即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

實現原理：把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。

水平垂直居中的方案，可以實現6種以上並對比它們的優缺點

水平居中

行內元素：首先看它的父元素是不是塊級元素，如果是，則直接給父元素設置text-align: center;如果不是，就將父級設置成塊級元素display：block

塊級元素：1.寬度固定，設置margin: 0 auto; 不定寬度，設置子元素display: inline-block;或 display: inline;父元素設置 text- align:center;

2.使用定位屬性：子絕父相。設置子元素left: 50%;讓子元素的左上角水平居中。

如果子元素寬度固定，設置子元素margin-left: 元素寬度一半px;或transform: translateX(-50%)

寬度不固定，設值子元素transform: translateX(-50%);

3.使用flexbox佈局實現，父元素添加屬性display:flex;justify-content: center;

垂直居中

單行的行內元素，設置行內元素的行高等於盒子高；多行的行內元素，給父元素設置display: table-cell;和vertical-align:middle

塊級元素：1.使用定位：子絕父相，子元素top:50%,讓子元素左上角垂直居中

高度固定，則設置子元素margin-top: 元素高度一半px;或transform: translateY(-50%)

高度不固定，設值子元素transform: translateY(-50%)

2.使用flexbox佈局實現，父元素添加屬性display:flex;align-items: center;

水平垂直居中

行內元素：1.可使用父元素text-align:center + 子元素 vertical-align:middle

2.writing-mode:改變文字的顯示方向

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>

<style>
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}
</style>

3.table也能夠實現水平垂直居中，但是會增加很多冗餘代碼。tabel單元格中的內容天然就是垂直居中的，只要添加一個水平居中屬性

4.css-table，父元素display: table-cell;text-align: center;vertical-align: middle;

已知寬高的元素：1.子絕父相，子元素top,left等爲0，margin:auto

2.子絕父相，子元素left:50%;top:50%;margin-left:元素寬度一半px；margin-top:元素高度一般px；

3.子絕父相，子元素top: calc(50% - 元素一半px)； left: calc(50% - 元素寬度一半px)

未知寬高的元素：1.使用定位屬性：子絕父相，left:50%;top:50%;transform: translateX(-50%);transform: translateY(-50%)

2.使用flex佈局實現，父元素flex定位，justify-content: center;align-items: center;

3.grid，css新出的網格佈局，兼容性不好。父元素display: grid 子元素 align-self: center;justify-self: center;

JS垂直居中： left = 瀏覽器可視區的寬度(clientWidth) -減去要居中元素本身的寬度(offsetWidth) /除以 2 +'px'

top = 將瀏覽器可視區的高度(clientHeight) -減去要居中元素本身的高度(offsetHeight) /除以 2 +'px'

BFC實現原理，可以解決的問題，如何創建BFC

BFC (block formatting context 塊級格式化上下文)，決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。在進行盒子元素佈局的時候，BFC 提供了一個環境，在這個環境中按照一定規則進行佈局不會影響到其它環境中的佈局。比如浮動元素會形成 BFC，浮動元素內部子素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。

形成BFC的條件：

1.float的值不爲none

2.overflow的值不爲visible

3.display的值爲table-cell,table-caption,inline-block任何一種

4.position的值不爲relative和static

BFC的作用：

1.BFC會根據子元素的情況自適應高度，這個特性事對父元素使用overflow:hidden/auto/scroll、float:left/right樣式可以閉合浮動的原理。

2.阻止margin摺疊。重疊會以大的爲準。

3.不被浮動元素覆蓋，浮動元素會巫師兄弟元素的存在，覆蓋在兄弟元素上面

可使用CSS函數複用代碼，實現特殊效果

sass，less

PostCSS、Sass、Less的異同，以及使用配置

關於sass（scss）、less、postcss、stylus等的用法與區別

CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染

CSS模塊化方案分類：

1.命名約定：BEM、OOCSS、AMCSS、SMACSS

2.CSS in JS：eg styled-components

3.使用JS來管理樣式模塊：CSS Modules

防止CSS阻塞渲染：

可以通過 CSS“媒體類型”和“媒體查詢”來解決這類用例

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

防止css阻塞可將<link></link>標籤置於<body></body>標籤內，但爲避免dom加載完畢而樣式表未加載完成而出現醜陋的"內容閃現"的狀況，建議首次渲染內容阻塞渲染（包括但不限於導航條的樣式、超大屏幕樣式、按鈕樣式、其他佈局和字體的公用樣式），而不需要立即顯示在頁面中的樣式我們可以將它們放於<body></body>標籤內，以減少css的響應時間

熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等

css常見動畫

CSS瀏覽器兼容性的寫法，瞭解不同API在不同瀏覽器下的兼容性情況

-webkit-,針對safari、chrome瀏覽器的內核

-moz-，針對firefox瀏覽器內核

-ms-，針對ie內核

-o-，針對Opera內核

掌握一套完整的響應式佈局方案

1.第三方庫：normalize.css、bootstrap
2.JavaScript計算
3.CSS：css3 @media、rem、postcss

手寫

手寫圖片瀑布流效果

使用JS實現圖片展示瀑布流效果

vue-waterfall

使用CSS繪製幾何圖形（圓，三角形，扇形等）

圓形：border-radius: 50% 圓角

三角：

.Triangle{
            width: 0px;
            height: 0px;
            border-width: 50px;
            border-style: solid;
            border-color: red transparent transparent transparent

扇形

菱形：

width: 100px

height:50px

backgroud: #000

transform: skew(-20deg)

line-height: 50px

使用純CSS實現曲線運動（貝塞爾曲線）

css3實現曲線運動

cubic-bezier 放入animation

@keyframes控制初始終止位置

實現常用佈局（三欄，聖盃，雙飛翼，吸頂），可說出多種方法並理解優缺點

三欄佈局就是header、container、footer

聖盃佈局和雙飛翼佈局的理解和區別

聖盃佈局:

就是利用給給 container設置padding: 0 200px,中間middle加float或overflow: hidden形成BFC，left設置margin-left: -100% left: -200px,right設置margin-left: -200px right:-200px

缺點：center在寬度較小時會出現混亂

雙飛翼佈局：

給 center 部分包裹了一個 main 通過設置margin主動地把頁面撐開。

吸頂效果：純CSS實現吸頂效果

三、計算機基礎

編譯原理

理解代碼到底是什麼，計算機如何將代碼轉換爲可以運行的人目標程序

代碼就是程序員用開發工具所支持的語言寫出來的源文件，是一組由字符、符號或信號碼元一離散形式表示信息的明確的規則體系。代碼設計的原則包括唯一確定性、標準化和通用行、可擴充性與穩定性、便於識別和記憶。

某種意義上說，源代碼相當於代碼。源代碼常用格式時文本文件，這種典型格式的目的是爲了編譯出計算機程序。計算機源代碼最終目的時將人類可讀文本翻譯成爲計算機可執行的二進制指令，這種過程叫編譯，它由通過編譯器完成。

正則表達式的匹配原理和性能優化

正則表達式使用單個字符串來描述、匹配一系列匹配某個句法規則的字符串。通常被用來檢索、替換那些匹配某個模式的文本。

正則表達式由元字符和普通文本字符組成。

元字符：

1、行的起始^和結束$ 2、字符組[] 3、點號匹配任意字符 4、多選結構 | 5、單詞分界符 \b 6、可選項元素？

匹配原理

正則引擎分爲兩大類：DFA和NFA。NFA是表達式主導的，能提供一些DFA不支持的功能，相對而言它具有更開闊的施展空間。

規則1：優先選擇最左端的匹配結果

規則2：標準量詞是優先匹配的

NFA引擎最重要的性質是在遇到多個可能成功的可能中進行選擇時，它會選擇其一，當匹配失敗時，引擎會回溯到之前記錄的位置繼續嘗試匹配。記錄的位置包括兩個位置信息：正則表達式中的位置，和未嘗試的分支在字符串中的位置。這些記錄的位置被稱爲備用狀態。

正則表達式的性能優化

減少回溯次數，是提高性能的主要方法。

1.使用正確的邊界匹配器(^、$、\b、\B)，限定搜索字符串的位置

2.儘量不使用通配符“.”，字符使用具體的元字符、字符類（\d、\w、\s等）

3.使用正確的量詞（+、*、？、{n,m}），如果能夠限定長度，匹配最佳

4.使用非捕獲祖、原子組，減少沒有必要的字匹配捕獲用（？：），減少內存

如何將JS代碼解析成抽象語法樹（AST）

什麼是抽象語法樹？

在計算機科學中，抽象語法樹其實是源代碼的抽象語法結構的樹狀表現形式。

我們常用的瀏覽器就是通過將js代碼轉化爲抽象語法樹來進行下一步的分析等其他操作。所以將js轉化爲抽象語法樹更利於程序的分析。

抽象語法樹的作用事代碼語法檢查，代碼風格檢查，代碼的格式化，代碼錯誤提示，自動補全等等。

javascript Parser解析器可以把js源碼轉化爲抽象的語法樹。常見的javascript parser：esprima、traceur、acorn、shift

抽象語法樹

base64的編碼原理

base64已經是網絡上常見傳輸8bit字節代碼的編碼方式之一。

原理就是把每三個8Bit的字節轉換爲四個6Bit的字節。

一篇文章徹底弄懂Base64編碼原理

幾種進制的相互轉換計算方法，在JS中如何表示和轉換

對於js裏面各個進制之間的相互轉換其實是很簡單的，通過 m.toString(n); m 爲要轉換的數字，n 爲要轉換成的進制。

這裏要注意一點 m 的區間爲[2,36] (可在2到36之間進行轉換) 如果不在這個區間的轉換是不支持的。

網絡協議

理解什麼是協議，瞭解TCP/IP網絡協議族的構成，每層協議在應用程序中發揮的作用

協議是網絡中計算機或設備之間進行通信的一系列規則的集合。常用協議有IP、TCP、HTTP、SMTP等

協議作用：

1.建立對等層之間的虛擬通訊

2.實現層次之間的無關性

網絡通訊協議的作用是負責再網絡上建立通信通道和控制通過通道的信息流的規則。通訊雙方必須遵守通訊協議。

應用層：決定了向用戶提供應用服務時通信的活動，負責處理特定的應用程序細節。

傳輸層：對應用層提供處於網絡連接中的兩臺設備之間的數據傳輸。

網絡層：用來處理在網絡上流動的數據包。數據包時網絡傳輸的最小數據單元。

鏈路層：用來處理鏈接網絡的硬件部分。包括控制操作系統，硬件的設備驅動及光纖燈物理可見的部分。

三次握手和四次揮手詳細原理，爲什麼要使用這種機制

三次握手

第一次握手：建立連接，客戶端發送syn包（同步序列編號）到服務器，進入SYN_SENT狀態，等待服務器確認；

第二次握手：服務器收到syn包，確認客戶SYN，發送一個SYN+ACK包（確認號），服務器進入SYN+RECV狀態

第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK，客戶端和服務器進入TCP連接成功狀態

四次揮手

第一次揮手：客戶端發出連接釋放報文，停止發送數據，釋放數據報文首部FIN=1，seq=u，告知服務器沒有數據了

第二次揮手：服務器收到連接釋放報文，發出確認報文，ACK=1，ack=u+1，服務端進入CLOSE_WAIT狀態，客戶端

向服務端的方向就釋放了，客戶端收到確認請求後等待服務端發送鏈接釋放報文

第三次揮手：服務端將最後的數據發送完畢後，向客戶端發送連接釋放報文，FIN=1,ack=u+1，進入LAST-ACK狀態

第四次揮手：客戶端收到服務端的連接釋放報文後，發出確認，ACK=1,ack=w+1。客戶端就進入了TIME-WAIT狀態。此時

TCP連接還未釋放，經過最長報文段壽命時間後，客戶端撤銷相應的TCP後進入CLOSED狀態。

有哪些協議是可靠的，TCP有哪些手段保證可靠交付

TCP是一種提供可靠性交付的協議。TCP連接傳輸的數據無差錯，不丟失，不重複，按序到達。依靠以下幾種技術

1.滑動窗口

2.超時重傳

3.流量控制

4.擁塞控制

TCP可靠性交付

DNS的作用，DNS解析的詳細過程，DNS優化原理

DNS（Domain Name System）域名系統，萬維網上作爲域名和IP地址相互映射的一個分佈式數據庫，能讓用戶更方便的訪問互聯網。可以將其理解爲電話本。

DNS原理及其解析過程

DNS優化

DNS存在着多級緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統緩存，路由器緩存，IPS服務器緩存，根域名服務器緩存，頂級域名服務器緩存，主域名服務器緩存。處理辦法就是用DNS負載均衡技術，原理是在DNS服務器中爲同一個主機名配置多個IP地址,在應答DNS查詢時,DNS服務器對每個查詢將以DNS文件中主機記錄的IP地址按順序返回不同的解析結果,將客戶端的訪問引導到不同的機器上去,使得不同的客戶端訪問不同的服務器,從而達到負載均衡的目的。

CDN的作用和原理

CDN（Content Delivery Network）內容分發網絡，主要作用是爲源站減少訪問壓力的同時，爲客戶端提供更快速的內容響應。CDN還能對源站進行安全防護。

CDN就是利用DNS的重定向技術，DNS服務器會返回一個跟用戶最接近的點的IP地址個用戶，CDN節點的服務器負責相應用戶的請求，提供所需的內容。

CDN的原理以及其中的一些技術

HTTP請求報文和相應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什麼

HTTP請求報文有四部分組成：請求行、請求頭部、空行、請求數據

HTTP響應報文：響應行、響應頭、響應體

HTTP請求/響應報文結構

HTTP所有狀態碼的具體含義，看到異常狀態碼能快速定位問題

200 請求已成功，請求所希望的響應頭或數據體將隨此響應返回。

301 被請求的資源已永久移動到新位置。

302 請求的資源現在臨時從不同的 URI 響應請求。

400 1、語義有誤，當前請求無法被服務器理解。2、請求參數有誤。

401 當前請求需要用戶驗證。

403 服務器已經理解請求，但是拒絕執行它。

404 請求失敗，請求所希望得到的資源未被在服務器上發現。

500 服務器遇到了一個未曾預料的狀況，無法完成對請求的處理，會在程序碼出錯時出現。

501 服務器不支持當前請求所需要的某個功能。無法識別請求的方法。

502 作爲網關或者代理工作的服務器嘗試執行請求時，從上游服務器接收到無效的響應。

503 由於臨時的服務器維護或者過載，服務器當前無法處理請求。

HTTP1.1、HTTP2.0帶來的改變

HTTP1.1則在1999年纔開始廣泛應用於現在的各大瀏覽器網絡請求中，同時HTTP1.1也是當前使用最爲廣泛的HTTP協議。主要區別主要體現在：

1.緩存處理 2.帶寬優化及網絡連接的使用 3.錯誤通知的管理 4.Host頭處理 5.長連接

HTTP2.0新特性：

1.新的二進制格式 2.多路複用 3.header壓縮 4.服務端推送

HTTP1.0、HTTP1.1 和 HTTP2.0 的區別

HTTPS的加密原理，如何開啓HTTPS，如何劫持HTTPS請求

HTTPS可以理解爲HTTP+SSL，加密的詳細內容需要SSL，用於安全的HTTP數據傳輸。

簡單地來講：

客戶端和服務端建立 SSL 握手，客戶端通過 CA 證書來確認服務端的身份；
互相傳遞三個隨機數，之後通過這隨機數來生成一個密鑰；
互相確認密鑰，然後握手結束；
數據通訊開始，都使用同一個對話密鑰來加解密；

HTTPS加密原理

申請並部署SSL證書，就可開啓HTTPS

利用Hook技術實現瀏覽器HTTPS劫持

理解WebSocket協議的底層原理、與HTTP的區別

WebSocket用於在Web瀏覽器和服務器之間進行任意的雙向數據傳輸的一種技術。WebSocket協議基於TCP協議實現，包含初始的握手過程，以及後續的多次數據幀雙向傳輸過程。其目的是在WebSocket應用和WebSocket服務器進行頻繁雙向通信時，可以使服務器避免打開多個HTTP連接進行工作來節約資源，提高了工作效率和資源利用率。

與HTTP的區別：它是一種雙向通信協議，服務器和客戶端都能主動向對方發送或接受數據

傳統的HTTP請求方式： websocket的通信方式：

設計模式

熟練使用前端常用的設計模式編寫代碼，如單例模式，裝飾器模式，代理模式等

單例模式：保證一個類只有一個實例，並且提供一個訪問它的全局訪問點。

觀察者模式：對象間一種一對多的依賴關係。

工廠模式：將其成員對象的實例化推遲到子類來實現的類。

命令模式：用來對方法調用進行參數化處理和傳送，經過這樣處理過的方法調用可以在任何需要的時候執行。

職責鏈模式：使多個對象都有機會處理請求，從而避免請求的發送者和接收者之前的耦合關係，將這些對象練成一條鏈，並沿着這條鏈傳遞該請求，直到有一個對象處理它爲止。

前端常用的設計模式

裝飾器模式：向一個現有的對象添加新的功能，同時又不改變其結構的設計模式，它是作爲現有的類的一個包裝。

ES7 Decorator 裝飾者模式

代理模式：爲一個對象提供一個代用品或佔位符，以便控制對它的訪問。

學習JavaScript設計模式之代理模式

發佈訂閱模式和觀察者模式的異同以及實際應用

本質的區別是調度的地方不同。

觀察者模式：

發佈/訂閱模式：

觀察者模式的訂閱者與發佈者之間是存在依賴的，而發佈/訂閱模式則不會。觀察者模式主要以同步方式發生。發佈/訂閱大多情況下是異步方式。

可以說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用

單例模式應用於頁面中的登陸框，顯示消息的提示窗。

代理模式實現圖片預加載，圖片真正加載號前，有意佔位菊花圖避免出現空白。

vue中的雙向綁定就是發佈/訂閱模式。

JS設計模式與開發實踐

前端工程師自檢清單（二）

二、HTML和CSS

HTML

從規範的角度理解HTML，從分類和語義的角度使用標籤

常用頁面標籤的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式

元信息類標籤(head、title、meta)的使用目的和配置方法

HTML5離線緩存原理

可以使用Canvas API、SVG等繪製高性能的動畫

CSS

CSS盒模型，在不同瀏覽器的差異

CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則

CSS僞類和僞元素有哪些，它們的區別和實際應用

HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理

水平垂直居中的方案，可以實現6種以上並對比它們的優缺點

BFC實現原理，可以解決的問題，如何創建BFC

可使用CSS函數複用代碼，實現特殊效果

PostCSS、Sass、Less的異同，以及使用配置

CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染

熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等

CSS瀏覽器兼容性的寫法，瞭解不同API在不同瀏覽器下的兼容性情況

掌握一套完整的響應式佈局方案

手寫

手寫圖片瀑布流效果

使用CSS繪製幾何圖形（圓，三角形，扇形等）

使用純CSS實現曲線運動（貝塞爾曲線）

實現常用佈局（三欄，聖盃，雙飛翼，吸頂），可說出多種方法並理解優缺點

三、計算機基礎

編譯原理

理解代碼到底是什麼，計算機如何將代碼轉換爲可以運行的人目標程序

正則表達式的匹配原理和性能優化

如何將JS代碼解析成抽象語法樹（AST）

base64的編碼原理

幾種進制的相互轉換計算方法，在JS中如何表示和轉換

網絡協議

理解什麼是協議，瞭解TCP/IP網絡協議族的構成，每層協議在應用程序中發揮的作用

三次握手和四次揮手詳細原理，爲什麼要使用這種機制

有哪些協議是可靠的，TCP有哪些手段保證可靠交付

DNS的作用，DNS解析的詳細過程，DNS優化原理

CDN的作用和原理

HTTP請求報文和相應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什麼

HTTP所有狀態碼的具體含義，看到異常狀態碼能快速定位問題

HTTP1.1、HTTP2.0帶來的改變

HTTPS的加密原理，如何開啓HTTPS，如何劫持HTTPS請求

理解WebSocket協議的底層原理、與HTTP的區別

設計模式

熟練使用前端常用的設計模式編寫代碼，如單例模式，裝飾器模式，代理模式等

發佈訂閱模式和觀察者模式的異同以及實際應用

可以說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用