前端知識集錦1

原文連接： 征服前端面試，僅供學習使用
前端知識集錦2

1. JavaScript

1.1 原型

咱們建立的每個函數，均可以有一個prototype屬性，該屬性指向一個對象。這個對象，就是原型。

當咱們在建立對象時，能夠根據本身的需求，選擇性的將一些屬性和方法經過prototype屬性，掛載在原型對象上。而每個new出來的實例，都有一個proto屬性，該屬性指向構造函數的原型對象，經過這個屬性，讓實例對象也可以訪問原型對象上的方法。所以，當全部的實例都可以經過proto訪問到原型對象時，原型對象的方法與屬性就變成了共有方法與屬性。

// 聲明構造函數
function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
// 經過prototye屬性，將方法掛載到原型對象上
Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person('tim', 10);
var p2 = new Person('jak', 22);

console.log(p1.getName === p2.getName); // true

經過圖示咱們能夠看出，構造函數的prototype與全部實例對象的proto都指向原型對象。而原型對象的constructor指向構造函數。

1.2 原型鏈

咱們知道全部的函數都有一個叫作toString的方法。那麼這個方法究竟是在哪裏的呢？

先隨意聲明一個函數：

function foo() {}

其中foo是Function對象的實例。而Function的原型對象同時又是Object的實例。這樣就構成了一條原型鏈。原型鏈的訪問，其實跟做用域鏈有很大的類似之處，他們都是一次單向的查找過程。所以實例對象可以經過原型鏈，訪問處處於原型鏈上對象的全部屬性與方法。這也是foo最終可以訪問處處於Object原型對象上的toString方法的緣由。

1.3 做用域鏈

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

1.4 閉包

• 第一種理解（紅寶書）：是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量。
• 第二種理解（你不知道的javascript）：當函數能夠記住並訪問所在的詞法做用域時，就產生了閉包，這個函數持有對該詞法做用域的引用，這個引用就叫作閉包。
• 閉包本質仍是函數，只不過這個函數綁定了上下文環境（函數內部引用的全部變量）。

缺點：常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。
做用(使用場景)：能夠用來管理私有變量和私有方法，將對變量（狀態）的變化封裝在安全的環境中，使得這些變量不能被外部隨意修改，同時又能夠經過指定的函數接口來操做。
閉包有三個特性：

• 函數嵌套函數
• 函數內部能夠引用外部的參數和變量
• 參數和變量不會被垃圾回收機制回收

題外話：

• JavaScript的做用域就是詞法做用域而不是動態做用域；
• 詞法做用域最重要的特徵是它的定義過程發生在代碼的書寫階段；
• 動態做用域的做用域鏈是基於調用棧的 詞法做用域的做用域鏈是基於代碼中的做用域嵌套。

1.4 this

JavaScript的this老是指向一個對象，而具體指向哪一個對象是在運行時基於函數的執行環境動態綁定的，而非函數被聲明時的環境。

this的指向：

• 做爲普通函數調用（this指向全局對象window對象）
• 做爲對象的方法調用（this指向該對象）
• 構造器調用（this指向用new返回的這個對象）
• call、apply、bind的調用（this指向第一個參數對象）

1.5 高階函數

• 函數做爲參數傳遞
• 函數做爲返回值輸出

1.6 new操做符具體幹了什麼呢?

• 建立一個新對象；
• 將構造函數的做用域賦給新對象（所以this就指向了這個新對象）；
• 執行構造函數中的代碼（爲這個新對象添加屬性）
• 返回新對象

1.7 繼承

簡單原型鏈繼承：

function Super(){
    this.name = 'hzzly';
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心

缺點：
修改sub1.name後sub2.name也變了，由於來自原型對象的引用屬性是全部實例共享的。

構造函數式繼承：

function Super(val){
    this.val = val;
    this.fun = function(){  // 實例函數
        // ...
    }
}

function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}

缺點：
沒法實現函數複用，每一個子類實例都持有一個新的fun函數，太多了就會影響性能，內存爆炸。

組合式繼承

function Super(){
    this.name = 'hzzly';
}

// 原型函數
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...

function Sub(){
    Super.call(this);   // 核心
    // ...
}

Sub.prototype = new Super();    // 核心

缺點：
子類原型上有一份多餘的父類實例屬性，由於父類構造函數被調用了兩次，生成了兩份，而子類實例上的那一份屏蔽了子類原型上父類的。又是內存浪費。

寄生組合式繼承

function Super(){
    this.name = 'hzzly';
}

Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...

function Sub(){
   Super.call(this);   // 核心
    // ...
}

Sub.prototype=Object.create(Super.prototype)   // 核心
Sub.prototype.constructor=Sub   // 核心

es6的class繼承方式

class A {
}
class B extends A {
}
B.__proto__ === A   // true
B.prototype.__proto__ === A.prototype   // true

es6引入了class、extends、super、static(部分爲ES2016標準)

1.8 null和undefined的區別？

• null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。
• undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。
• null表示」沒有對象」，即該處不該該有值。

1.9 call、apply、bind的區別

• 三者都是用來改變函數的this對象的指向的。
• 三者第一個參數都是this要指向的對象，也就是想指定的上下文。
• call 傳入的參數數量不固定，第二部分參數要一個一個傳，用，隔開。
• apply 接受兩個參數，第二個參數爲一個帶下標的集合，能夠爲數組，也能夠爲類數組。
• bind 是返回一個改變了上下文的函數副本，便於稍後調用；apply 、call 則是當即調用。

1.10 本地存儲

• sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
• localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

1.11 cookie 和session

• cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
• cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙，考慮到安全應當使用session。
• session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用COOKIE。
• 單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。每次請求一個新的頁面的時候Cookie都會被髮送過去，與服務器進行交互。

1.12 XML和JSON的區別？

• 數據體積方面：JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
• 列表項目：JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
• 數據描述方面：JSON對數據的描述性比XML較差。
• 傳輸速度方面：JSON的速度要遠遠快於XML。

1.13 如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

1.14 線程與進程的區別

• 一個程序至少有一個進程,一個進程至少有一個線程。
• 線程的劃分尺度小於進程，使得多線程程序的併發性高。
• 進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
• 線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
• 從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

1.15 漸進加強和優雅降級

• 漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
• 優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

1.16 性能優化

• 網頁內容

  • 減小 http請求次數
  • 減小 DNS查詢次數
  • 避免頁面跳轉
  • 緩存 Ajax
  • 延遲加載
  • 提早加載
  • 減小 DOM元素數量
  • 避免 404

• 服務器

  • 使用CDN(內容分發網絡)
  • 添加Expires或Cache-Control報文頭
  • Gzip壓縮傳輸文件

• CSS

  • 將樣式表置頂
  • 用代替@import

• JavaScript

  • 把腳本置於頁面底部
  • 使用外部JavaScript和CSS
  • 精簡JavaScript和CSS
  • 去除重複腳本
  • 減小DOM訪問

• 圖片

  • 優化圖像
  • 優化CSS Spirite
  • 不要在HTML中縮放圖片
  • favicon.ico要小並且可緩存

1.17 如何解決跨域問題?

• jsonp
• CORS
• document.domain+iframe
• window.name
• window.postMessage
• jsonp的原理是動態插入script標籤

1.18 請解釋一下 JavaScript 的同源策略。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

1.19 哪些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
• 垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

1.20 Javascript垃圾回收方法

• 標記清除：這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。
• 引用計數：引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

1.21 事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。

阻止冒泡：ev.stopPropagation()

1.22 說說嚴格模式的限制

• 變量必須聲明後再使用
• 函數的參數不能有同名屬性，不然報錯
• 禁止this指向全局對象
• 不能使用with語句
• 增長了保留字
• arguments不會自動反映函數參數的變化

設立」嚴格模式」的目的：

• 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
• 消除代碼運行的一些不安全之處，保證代碼運行的安全；
• 提升編譯器效率，增長運行速度；
• 爲將來新版本的Javascript作好鋪墊。

1.23 請解釋什麼是事件代理

事件代理（Event Delegation），又稱之爲事件委託。便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能。

1.24 Event Loop、消息隊列、事件輪詢

異步函數在執行結束後，會在事件隊列中添加一個事件（回調函數）(遵循先進先出原則)，主線程中的代碼執行完畢後（即一次循環結束），下一次循環開始就在事件隊列中「讀取」事件，而後調用它所對應的回調函數。這個過程是循環不斷的，因此整個的這種運行機制又稱爲Event Loop（事件循環）
主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼（同步任務）調用各類外部API，它們在」任務隊列」中加入各類事件（click，load，done）。只要棧中的代碼執行完畢，主線程就會去讀取」任務隊列」，依次執行那些事件所對應的回調函數。
執行棧中的代碼（同步任務），老是在讀取」任務隊列」（異步任務）以前執行。

1.25 緩存

瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制，有效的緩存使用能夠避免重複的網絡請求和瀏覽器快速地讀取本地數據。

• http緩存：http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下，瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件判斷expires，若是未過時，直接讀取http緩存文件
• indexDB：是一個在客戶端存儲可觀數量的結構化數據,而且爲這些數據添加索引進行高性能檢索。
• cookie：指通常網站爲了辨別用戶身份、儲存在用戶本地終端上的數據（一般通過加密）。cookie通常經過http請求中在頭部一塊兒發送到服務器端。一條cookie記錄主要由鍵、值、域、過時時間、大小組成，通常用戶保存用戶的認證信息。
• localstorage：localStorage是h5的一種新的本地緩存方案,加快下次頁面打開時的渲染速度,除非主動刪除數據，不然數據是永遠不會過時的。
• sessionstorage：也是h5的一種本地緩存方案，數據的存儲僅特定於某個會話中，也就是說數據只保持到瀏覽器關閉，當瀏覽器關閉後從新打開這個頁面時， 以前的存儲已經被清除。

2. ES6

2.1 ES6的瞭解

es6是一個新的標準，它包含了許多新的語言特性和庫，是JS最實質性的一次升級。好比’箭頭函數’、’字符串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等，還有就是引入module模塊的概念。
箭頭函數可讓this指向固定化，這種特性頗有利於封裝回調函數。
(1) 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
(2) 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
(3) 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。
(4) 不可使用yield命令，所以箭頭函數不能用做Generator函數。

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

2.2 說說你對Promise的理解

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件監聽——更合理和更強大。
所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。

Promise對象有如下兩個特色:

• 對象的狀態不受外界影響，Promise對象表明一個異步操做，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）
• 一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。

2.3 說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數。
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

3. Gulp、Webpack比較

3.1 Gulp

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

3.2 Webpack

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

兩大特點：

• 代碼能夠自動完成編譯
• loader 能夠處理各類類型的靜態文件，而且支持串聯操做

4. CSS

4.1 display:none和visibility:hidden的區別？

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

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

4.2 position:absolute和float屬性的異同

A：共同點：
對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
B：不一樣點：
float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

4.3 box-sizing屬性

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

4.4 position的值

• static 默認值。沒有定位，元素出如今正常的流中。
• relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
• absolute 生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
• fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。

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

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

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

#box:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

4.6 浮動元素引發的問題

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

5. 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

6. CSS sprites

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

7. HTML

7.1 說說你對語義化的理解

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

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

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

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

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

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

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

7.5 html5有哪些新特性

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

8. 計算機網絡

8.1 HTTP請求四部分

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

8.2 請求頭字段：

• 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 [保持連接，發完數據後，我不關閉連接]

8.3 HTTP響應三部分

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

響應頭字段：

• 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 [哪一種服務器]

8.4 說說TCP傳輸的三次握手

第一次握手，客戶端給服務器發送數據包（帶SYN標誌的數據包）。此時服務器確認本身能夠接收客戶端的包，而客戶端不確認服務器是否接收到了本身發的數據包。
第二次握手，服務器端回覆（回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息）客戶端。此時客戶端確認本身發的包被服務器收到，也確認本身能夠正常接收服務器包，客戶端對這次通訊沒有疑問了。服務器也能夠確認本身能接收到客戶端的包，但不能確認客戶端可否接收本身發的包。
第三次握手，客戶端回覆（發送端再回傳一個帶ACK標誌的數據包，表明「握手」結束）服務器。 客戶端已經沒有疑問了，服務器也確認剛剛客戶端收到了本身的數據包。兩邊都沒有問題，開始通訊。

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

8.5 四次揮手

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

8.6 TCP和UDP的區別

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

UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非鏈接的協議，它不與對方創建鏈接，而是直接就把數據包發送過去！

UDP適用於一次只傳送少許數據、對可靠性要求不高的應用環境。

8.7 HTTP和HTTPS

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

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

8.8 什麼是Etag？

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

8.9 Expires和Cache-Control

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

8.10 關於Http 2.0 你知道多少？

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

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

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

8.12 瀏覽器的渲染過程

• 瀏覽器請求到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 是更優的。

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

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

8.14 GET和POST的區別

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

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

8.15 常見HTTP狀態碼

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

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

• 應用層
• 表示層
• 會話層（從上往下）（HTTP、FTP、SMTP、DNS）
• 傳輸層（TCP和UDP）
• 網絡層（IP）
• 物理層
• 數據鏈路層（以太網）

8.17 304緩存

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

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

8.18 http keep-alive與tcp keep-alive

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

8.19 常見web安全及防禦原理

• sql注入原理

就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。

• XSS

指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。

• CSRF

CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：一、登陸受信任網站A，並在本地生成Cookie。二、在不登出A的狀況下，訪問危險網站B。

9. 算法

9.1 數組去重

建一個空對象和空數組，循環遍歷須要去重的數組，判斷對象有沒有此屬性，沒有的話就給對象添加此屬性，並向空數組中push這個值。

//es5
function unique(arr){
    var obj = {}
    var result = []
    for(var i in arr){
        if(!obj[arr[i]]){
            obj[arr[i]] = true;
            result.push(arr[i]);
        }
    }
    return result;
}

//es6
[...new Set(arr)]

9.2 排序

請參考專欄相關文章

10. 其餘

10.1 對前端界面工程師這個職位是怎麼樣理解的?

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

• 實現界面交互
• 提高用戶體驗

10.2 談談你對重構的理解

在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

• 減小代碼間的耦合
• 讓代碼保持彈性
• 嚴格按規範編寫代碼
• 設計可擴展的API
• 代替舊有的框架、語言(如VB)
• 加強用戶體驗
• 一般來講對於速度的優化也包含在重構中

10.3 你遇到過比較難的技術問題是？你是如何解決的？

10.4 平時是如何學習前端開發的？

10.5 平時如何管理你的項目？

• 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
• 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
• 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
• 頁面進行標註（例如 頁面 模塊 開始和結束）；
• CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
• JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。
• 圖片採用整合的 images.png png8 格式文件使用盡可能整合在一塊兒使用方便未來的管理