征服前端面試（下）

時間 2019-11-11

原文原文鏈接

ES6

ES6的瞭解

es6是一個新的標準，它包含了許多新的語言特性和庫，是JS最實質性的一次升級。好比’箭頭函數’、’字符串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等，還有就是引入module模塊的概念。javascript

箭頭函數可讓this指向固定化，這種特性頗有利於封裝回調函數
（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。
（4）不可使用yield命令，所以箭頭函數不能用做Generator函數。php

async/await是寫異步代碼的新方式，之前的方法有回調函數和Promise。
async/await是基於Promise實現的，它不能用於普通的回調函數。
async/await與Promise同樣，是非阻塞的。
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。css

說說你對Promise的理解

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件監聽——更合理和更強大。html

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。前端

Promise對象有如下兩個特色:html5

對象的狀態不受外界影響，Promise對象表明一個異步操做，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）java

一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。webpack

說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數。nginx

AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。程序員

Gulp、Webpack比較

Gulp

一、Gulp就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。
二、Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。
三、Gulp是經過task對整個開發過程進行構建。

Webpack

一、當下最熱門的前端資源模塊化管理和打包工具
二、能夠很好的管理模塊以及各個模塊之間的依賴
三、對js、css、圖片等資源文件都支持打包
四、有獨立的配置文件webpack.config.js
五、能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間
六、能夠生成優化且合併後的靜態資源

兩大特點：一、代碼能夠自動完成編譯。二、loader 能夠處理各類類型的靜態文件，而且支持串聯操做

CSS

display:none和visibility:hidden的區別？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

position:absolute和float屬性的異同

A：共同點：
對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

B：不一樣點：
float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

box-sizing屬性

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

position的值

static 默認值。沒有定位，元素出如今正常的流中

relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

absolute 生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。

fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。

CSS3新特性

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

CSS sprites

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了http2。

解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
設置overflow爲hidden或者auto，給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

浮動元素引發的問題

一、父元素的高度沒法被撐開，影響與父元素同級的元素
二、與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
三、若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

HTML

說說你對語義化的理解

一、去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
二、有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
三、方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
四、便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

一、<!DOCTYPE> 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
二、嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
三、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
四、<!DOCTYPE> 不存在或格式不正確會致使文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

HTML與XHTML——兩者有什麼區別

一、全部的標記都必需要有一個相應的結束標記
二、全部標籤的元素和屬性的名字都必須使用小寫
三、全部的XML標記都必須合理嵌套
四、全部的屬性必須用引號」」括起來
五、把全部<和&特殊符號用編碼表示
六、給全部屬性賦一個值
七、不要在註釋內容中使「–」
八、圖片必須有說明文字

html5有哪些新特性

語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
拖拽釋放(Drag and drop) API
本地離線存儲
表單控件，calendar、date、time、email、url、search

計算機網絡

HTTP請求四部分

一、HTTP請求的方法或動做，好比是get仍是post請求；
二、正在請求的URL（請求的地址）；
三、請求頭，包含一些客戶端環境信息、身份驗證信息等；
四、請求體（請求正文），能夠包含客戶提交的查詢字符串信息、表單信息等。

請求頭字段：

Accept:text/html,image/*(告訴服務器，瀏覽器能夠接受文本，網頁圖片)
Accept-Charaset:ISO-8859-1 [接受字符編碼：iso-8859-1]
Accept-Encoding:gzip,compress[能夠接受 gzip,compress壓縮後數據]
Accept-Language:zh-cn[瀏覽器支持的語言]
Host:localhost:8080[瀏覽器要找的主機]
If-Modified-Since:Tue, 09 May 2017 01:34:02 GMT[告訴服務器我這緩存中有這個文件,該文件的時間是…]
User-Agent:Nozilla/4.0(Com…)[告訴服務器個人瀏覽器內核，客戶端環境信]
Cookie：[身份驗證信息]
Connection:close/Keep-Alive [保持連接，發完數據後，我不關閉連接]

HTTP響應三部分

一、一個數字和文字組成的狀態碼，用來顯示請求是成功仍是失敗；
二、響應頭，響應頭也和請求頭同樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等；
三、響應體（響應正文）。

響應頭字段：

Cache-Control:[告訴瀏覽器如何緩存頁面(由於瀏覽器的兼容性最好設置兩個)]
Connection:close/Keep-Alive [保持連接，發完數據後，我不關閉連接]
Content-Type:text/html;charset=gb2312[內容格式和編碼]
Last-Modified:Tue,11 Juj,2017 18 18:29:20[告訴瀏覽器該資源上次更新時間是多少]
ETag:」540-54f0d59b8b680」
Expires:Fri, 26 May 2017 13:28:33 GMT [失效日期]
server:apache tomcat nginx [哪一種服務器]

說說TCP傳輸的三次握手

第一次握手，客戶端給服務器發送數據包（帶SYN標誌的數據包）。此時服務器確認本身能夠接收客戶端的包，而客戶端不確認服務器是否接收到了本身發的數據包。

第二次握手，服務器端回覆（回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息）客戶端。此時客戶端確認本身發的包被服務器收到，也確認本身能夠正常接收服務器包，客戶端對這次通訊沒有疑問了。服務器也能夠確認本身能接收到客戶端的包，但不能確認客戶端可否接收本身發的包。

第三次握手，客戶端回覆（發送端再回傳一個帶ACK標誌的數據包，表明「握手」結束）服務器。客戶端已經沒有疑問了，服務器也確認剛剛客戶端收到了本身的數據包。兩邊都沒有問題，開始通訊。

爲何要三次握手：
爲了防止已失效的鏈接請求報文段忽然又傳送到了服務端，於是產生錯誤。也防止了服務器端的一直等待而浪費資源
TCP做爲一種可靠傳輸控制協議，其核心思想：既要保證數據可靠傳輸，又要提升傳輸的效率，而用三次偏偏能夠知足以上兩方面的需求！

四次揮手

一、主機向服務器發送一個斷開鏈接的請求（不早了，我該走了）,發送一個FIN報文段；
二、服務器接到請求後發送確認收到請求的信號（知道了）回一個ACK報文段；
三、服務器向主機發送斷開通知（我也該走了）發送FIN報文段，請求關閉鏈接；
四、主機接到斷開通知後斷開鏈接並反饋一個確認信號（嗯，好的），服務器收到確認信號後也斷開鏈接；

TCP和UDP的區別

TCP（Transmission Control Protocol，傳輸控制協議）是基於鏈接的協議，也就是說，在正式收發數據前，必須和對方創建可靠的鏈接。一個TCP鏈接必需要通過三次「對話」才能創建起來

UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非鏈接的協議，它不與對方創建鏈接，而是直接就把數據包發送過去！
UDP適用於一次只傳送少許數據、對可靠性要求不高的應用環境。

HTTP和HTTPS

一、HTTP協議一般承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的HTTPS
二、默認HTTP的端口號爲80，HTTPS的端口號爲443

HTTPS 相對於 HTTP 性能上差點，由於多了 SSL/TLS 的幾回握手和加密解密的運算處理，可是加密解密的運算處理已經能夠經過特有的硬件來加速處理。

什麼是Etag？

把Last-Modified和ETag請求的http報頭一塊兒使用，可利用客戶端（例如瀏覽器）的緩存。ETag用於標識資源的狀態，當資源發生變動時，若是其頭信息中一個或者多個發生變化，或者消息實體發生變化，那麼ETag也隨之發生變化。瀏覽器下載組件的時候，會將它們存儲到瀏覽器緩存中。若是須要再次獲取相同的組件，瀏覽器將檢查組件的緩存時間，
假如已通過期，那麼瀏覽器將發送一個條件GET請求到服務器，服務器判斷緩存還有效，則發送一個304響應，告訴瀏覽器能夠重用緩存組件。

Expires和Cache-Control

Expires 用來控制緩存的失效日期
Cache-Control 用來控制網頁的緩存常見的取值有private、no-cache、max-age、must-revalidate等，默認爲private。

關於Http 2.0 你知道多少？

HTTP/2引入了「服務端推（server push）」的概念，它容許服務端在客戶端須要數據以前就主動地將數據發送到客戶端緩存中，從而提升性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術，容許多個消息在一個鏈接上同時交差。
它增長了頭壓縮（header compression），所以即便很是小的請求，其請求和響應的header都只會佔用很小比例的帶寬。

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

一、瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求（TCP三次握手）；
二、服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
三、瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
四、載入解析到的資源文件，渲染頁面，完成。

瀏覽器的渲染過程

一、瀏覽器請求到HTML代碼後，在生成DOM的最開始階段，並行發起css、圖片、js的請求，不管他們是否在HEAD裏。瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點。
二、CSS文件下載完成，開始構建CSSOM
三、全部CSS文件下載完成，CSSOM構建結束後，和 DOM 一塊兒生成 Render Tree。
四、有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操做就是計算出每一個節點在屏幕中的位置。
五、最後一步，按照算出來的規則，把內容渲染到屏幕上。

以上五個步驟前3個步驟由於DOM、CSSOM、Render Tree均可能在第一次Painting後又被更新屢次，好比JS修改了DOM或者CSS屬性。Layout 和 Painting 也會被重複執行，除了DOM、CSSOM更新的緣由外，圖片下載完成後也須要調用Layout 和 Painting來更新網頁。

display:none 的節點不會被加入 Render Tree，而 visibility: hidden 則會，因此，若是某個節點最開始是不顯示的，設爲 display:none 是更優的。

一個完整的URL包括如下幾部分

http://www.hzzly.net:8080/news/index.php?boardID=5&ID=24618&page=1#name

一、協議部分
二、域名部分
三、端口部分
四、虛擬目錄部分：從域名後的第一個「/」開始到最後一個「/」爲止
五、文件名部分：從域名後的最後一個「/」開始到「？」爲止
六、參數部分：從「？」開始到「#」爲止之間的部分
七、錨部分：從「#」開始到最後

GET和POST的區別

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在1024字節，Get是經過地址欄來傳值。

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。（經常使用於發送表單數據，新建、修改等），Post是經過提交表單來傳值。

常見HTTP狀態碼

1xx（臨時響應）表示臨時響應並須要請求者繼續執行操做的狀態碼。
2xx（成功）表示成功處理了請求的狀態碼。
200（成功）：服務器已成功處理了請求。一般，這表示服務器提供了請求的網頁。
3xx（重定向）要完成請求，須要進一步操做。
301（永久移動）：請求的網頁已永久移動到新位置。
302（臨時移動）：服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來響應之後的請求。
304（未修改）：自從上次請求後，請求的網頁未修改過。
4xx（請求錯誤）這些狀態碼錶示請求可能出錯，妨礙了服務器的處理。
400（錯誤請求）：服務器不理解請求的語法。
404（未找到）：服務器找不到請求的網頁。
5xx（服務器錯誤）這些狀態碼錶示服務器在處理請求時發生內部錯誤。
500（服務器內部錯誤）：服務器遇到錯誤，沒法完成請求。
503（服務不可用）：服務器目前沒法使用（因爲超載或停機維護）。

說說網絡分層裏七層模型是哪七層

應用層、表示層、會話層（從上往下）（HTTP、FTP、SMTP、DNS）

傳輸層（TCP和UDP）

網絡層（IP）

物理和數據鏈路層（以太網）

講講304緩存的原理

服務器首先產生ETag，服務器可在稍後使用它來判斷頁面是否已經被修改。本質上，客戶端經過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。

304是HTTP狀態碼，服務器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已緩存的文件

http keep-alive與tcp keep-alive

http keep-alive是爲了讓tcp活得更久一點，以便在同一個鏈接上傳送多個http，提升socket的效率。而tcp keep-alive是TCP的一種檢測TCP鏈接情況的保鮮機制。

常見web安全及防禦原理

sql注入原理
就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。
XSS
指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。
CSRF
CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：一、登陸受信任網站A，並在本地生成Cookie。二、在不登出A的狀況下，訪問危險網站B。