前端面試校招問題準備（總結）
前端點大而駁雜，面試前的準備往往會感到無所適從。在web開發的中，六項基礎知識還是新手所必須掌握的：
HTML、CSS、JavaScript、移動Web開發、除錯、HTTP網路知識。
HTML
1.常用的meta頭；
2.通過你對標籤語義化的理解來判斷你能否寫出更規範的HTML程式碼；
3.HTML5新增的能力；
4.HTML的渲染解析知識，比如為什麼CSS放前面JS放後面，怎麼理解並行載入序列執行
<!-- 字型編碼 --> <meta charset="utf-8" /> <!-- 關鍵字 --> <meta name="keywords" content="" /> <!-- 說明 --> <meta name="description" content="" /> <!-- 作者 --> <meta name="author" content="" /> <!-- 設定文件寬度、是否縮放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <!-- 優先使用IE最新版本或chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 360讀取到這個標籤立即錢換到極速模式 --> <meta name="renderer" content="webkit" /> <!-- 禁止百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- UC強制豎屏 --> <meta name="screen-orientation" content="portrait" /> <!--QQ強制豎屏 --> <meta name="x5-orientation" content="portrait" /> <!-- UC強制全屏 --> <meta name="full-scerrn" content="yes" /> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="ture" /> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app" /> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- window phone 點亮無高光 --> <meta name="msapplication-tap-highlight" content="no" /> <!-- 安卓裝置不自動識別郵件地址 --> <meta name="format-detection" name="email=no" />
HTML書寫規範 1. 文件型別宣告及編碼: 統一為html5宣告型別<!DOCTYPE html>; 編碼統一為<meta charset=”gbk” />, 書寫時利用IDE實現層次分明的縮排; 2. 非特殊情況下樣式檔案必須外鏈至<head>…</head>之間;非特殊情況下JavaScript檔案必須外鏈至頁面底部; 3. 引入樣式檔案或JavaScript檔案時, 須略去預設型別宣告, 寫法如下: <link rel=”stylesheet” href=”…” /> <style>…</style> <script src=”…”></script> 4. 引入JS庫檔案, 檔名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入外掛, 檔名格式為庫名稱+外掛名稱, 比如jQuery.cookie.js; 5. 所有編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標籤必須閉合, 包括 br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括; 6. 充分利用無相容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要為html元素新增自定義屬性的時候, 首先要考慮下有沒有預設的已有的合適標籤去設定, 如果沒有, 可以使用須以”data-”為字首來新增自定義屬性，避免使用”data:”等其他命名方式; 7. 語義化html, 如 標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可巢狀塊級元素; 8. 儘可能減少div巢狀, 如<div><div class=”welcome”>歡迎訪問XXX, 您的使用者名稱是<div class=”name”>使用者名稱</div></div></div>完全可以用以下程式碼替代: <div><p>歡迎訪問XXX, 您的使用者名稱是<span>使用者名稱</span></p></div>; 9. 書寫連結地址時, 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址後面加上“/”； 10. 在頁面中儘量避免使用style屬性,即style=”…”;11. 必須為含有描述性表單元素(input, textarea)新增label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p> 12. 能以背景形式呈現的圖片, 儘量寫入css樣式中; 13. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title; 14. 給區塊程式碼及重要功能(比如迴圈)加上註釋, 方便後臺新增功能; 15. 特殊符號使用: 儘可能使用程式碼替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等; 16. 書寫頁面過程中, 請考慮向後擴充套件性;
H5新增標籤 1、結構標籤 （1）section：獨立內容區塊，可以用h1~h6組成大綱，表示文件結構，也可以有章節、頁首、頁尾或頁首的其他部分； （2）article：特殊獨立區塊，表示這篇頁首中的核心內容； （3）aside：標籤內容之外與標籤內容相關的輔助資訊； （4）header：某個區塊的頭部資訊/標題； （5）hgroup：頭部資訊/標題的補充內容； （6）footer：底部資訊； （7）nav：導航條部分資訊 （8）figure：獨立的單元，例如某個有圖片與內容的新聞塊。 2、表單標籤 （1）email：必須輸入郵件； （2）url：必須輸入url地址； （3）number：必須輸入數值； （4）range：必須輸入一定範圍內的數值； （5）Date Pickers：日期選擇器 （6）search：搜尋常規的文字域； （7）color：顏色； 3、媒體標籤 （1）video：視訊 （2）audio：音訊 （3）embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。 3、媒體標籤 （1）video：視訊 （2）audio：音訊 （3）embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。 H5新增屬性 （1）對於js進行新增的屬性 <script defer src=".....js" onload="alert('a')"></script> <script async src=".....js" onload="alert('b')"></script> 非同步載入先出現b再出現a。 （2）網頁中標籤中加入小圖示的樣式程式碼 有序列表ol:新增start（列表起始值），reversed（是否倒置）menu選單type屬性（3個選單型別）內嵌css樣式：在標籤內部來定義一個樣式區塊（scoped）,只對樣式標籤內部才有效內嵌框架：iframe元素，新增了seamless無邊距無邊框，srcdoc定義了內嵌框架的內容。 總結新增屬性： manifest屬性： 定義頁面需要用到的離線應用檔案，一般放在<html>標籤裡 charset屬性： meta屬性之一,定義頁面的字符集 sizes屬性： <link>新增屬性，當link的rel="icon"時，用以設定圖示大小 base屬性: <base href="http://localhost/" target="_blank">表示當在新視窗開啟一個頁面時，會將href中的內容作為字首新增到地址前 defer屬性： script標籤屬性，表示指令碼載入完畢後，只有當頁面也載入完畢才執行（推遲執行） async屬性： script標籤屬性，指令碼載入完畢後馬上執行（執行過程中瀏覽器會解析下面的內容），即使頁面還沒有載入完畢（非同步執行） media屬性： <a>元素屬性：表示對何種裝置進行優化 hreflang屬性： <a>的屬性，表示超連結指向的網址使用的語言 ref屬性： <a>的屬性,定義超連結是否是外部連結 reversed屬性: <ol>的屬性，定義序號是否倒敘 start屬性： <ol>的屬性，定義序號的起始值 scoped屬性： 內嵌CSS樣式的屬性，定義該樣式只侷限於擁有該內嵌樣式的元素，適用於單頁開發
HTML渲染過程
解析渲染該過程主要分為以下步驟：
（1）解析HTML
（2）構建DOM樹
（3）DOM樹與CSS樣式進行附著構造呈現樹
（4）佈局
（5）繪製
瀏覽器的實際工作是將解析和構建DOM放在一起進行的。對於HTML瀏覽器有專門的html解析器來解析HTML，並在解析的過程中構建DOM樹。在這裡我們討論兩種DOM元素的解析，即樣式（link、style）與指令碼檔案（script）。由於瀏覽器採用自上而下的方式解析，在遇到這兩種元素時都會阻塞瀏覽器的解析，直到外部資源載入並解析或執行完畢後才會繼續向下解析html。對於樣式與指令碼的先後順序同樣也會影響到瀏覽器的解析過程，究其原因主要在於：script指令碼執行過程中可能會修改html介面（如document.write函式）；DOM節點的CSS樣式會影響js的執行結果。在我的測試中得到以下四條結論：
1）外部樣式會阻塞後續指令碼執行，直到外部樣式載入並解析完畢。
2）外部樣式不會阻塞後續外部指令碼的載入，但會阻塞外部指令碼的執行。
3） 如果後續外部指令碼含有async屬性（IE下為defer），則外部樣式不會阻塞該指令碼的載入與執行
4）對於動態建立的link標籤不會阻塞其後動態建立的script的載入與執行，不管script標籤是否具有async屬性，但對於其他非動態建立的script，以上三條結論仍適用
link或style標籤都會被解析成DOM節點。瀏覽器對於樣式表還會生成CSSStyleSheet物件(C++程式碼)
html解析完畢，DOM樹建立完成後DOMContentLoaded事件即觸發，這時候可以用過script來操作DOM節點。
HTML解析完畢後，開始構建呈現樹RenderTree，這一步的主要工作在於將css樣式應用到DOM節點上，WebKit核心將這一過程稱為附著，其他瀏覽器有不同的概念。對前端工程師而言這個過程會涉及到CSS層疊問題。
首先將根據樣式重要性排序，由低到高依次為：
（1）瀏覽器宣告
（2）使用者普通宣告
（3）作者普通宣告
（4）作者重要宣告
（5）使用者重要宣告
呈現樹的每一個節點即為與其相對應的DOM節點的CSS框，框的型別與DOM節點的display屬性有關，block元素生成block框，inline元素生成inline框。每一個呈現樹節點都有與之相對應的DOM節點，但DOM節點不一定有與之相對應的呈現樹節點，比如display屬性為none的DOM節點，而且呈現樹節點在呈現樹中的位置與他們在DOM樹中的位置不一定相同，比如float與絕對定位元素。
呈現樹構造完成後瀏覽器便進行佈局處理，及計算每個呈現樹節點的大小和位置資訊。有道友可能要問，前面已將樣式附著到DOM節點上，不是已經有了樣式資訊為何還要計算大小。這裡可以這樣理解，以上包含大小的樣式資訊只是存在記憶體裡，並沒有實際使用，瀏覽器要根據視窗的實際大小來處理呈現樹節點的實際顯示大小和位置，比如對於margin為auto的處理。
佈局完成後，便是將呈現樹繪製出來顯示在螢幕上。對於每一個呈現樹節點來說，主要繪製順序如下：
背景顏色
背景圖片
邊框
子呈現樹節點
輪廓
CSS
1.怎樣寫出更好的CSS，如層級不宜過深，如何時用ID和何時用class，如怎麼拆分組織CSS程式碼等;
2.盒模型；
3.非常常用的CSS3知識，比如CSS3動畫，比如彈性佈局。
css盒子模型概念
CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。
元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。
css彈性佈局概念
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工作。在該佈局模型中，容器會根據佈局的需要，調整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。當容器的尺寸由於螢幕大小或視窗尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作。
從圖中可以看到，彈性盒佈局中有兩個互相垂直的座標軸：一個稱之為主軸（main axis），另外一個稱之為交叉軸（cross axis）。主軸並不固定為水平方向的 X 軸，交叉軸也不固定為垂直方向的 Y 軸。在使用時，通過 CSS 屬性宣告首先定義主軸的方向（水平或垂直），則交叉軸的方向也相應確定下來。容器中的條目可以排列成單行或多行。主軸確定了容器中每一行上條目的排列方向，而交叉軸則確定行本身的排列方向。可以根據不同的頁面設計要求來確定合適的主軸方向。有些容器中的條目要求從左到右水平排列，則主軸應該是水平方向的；而另外一些容器中的條目要求從上到下垂直排列，則主軸應該是垂直方向的。
確定主軸和交叉軸的方向之後，還需要確定它們各自的排列方向。對於水平方向上的軸，可以從左到右或從右到左來排列；對於垂直方向上的軸，則可以從上到下或從下到上來排列。對於主軸來說，排列條目的起始和結束位置分別稱為主軸起始（main start）和主軸結束（main end）；對於交叉軸來說，排列行的起始和結束位置分別稱為交叉軸起始（cross start）和交叉軸結束（cross end）。在容器進行佈局時，在每一行中會把其中的條目從主軸起始位置開始，依次排列到主軸結束位置；而當容器中存在多行時，會把每一行從交叉軸起始位置開始，依次排列到交叉軸結束位置。
對於彈性盒佈局的容器，使用"display: flex"宣告使用彈性盒佈局。CSS 屬性宣告"flex-direction"用來確定主軸的方向，從而確定基本的條目排列方式，有row、row-reserve、column、column-reserve。
預設情況下，彈性盒容器中的條目會盡量佔滿容器在主軸方向上的一行。當容器的主軸尺寸小於其所有條目總的主軸尺寸時，會出現條目之間互相重疊或超出容器範圍的現象。CSS 屬性"flex-wrap"用來聲明當容器中條目的尺寸超過主軸尺寸時應採取的行為。
JavaScript
(1)事件模型
(2)閉包
(3)原型鏈
事件模型
javascript中有兩種事件模型：DOM0，DOM2。
DOM0級事件模型是早期的事件模型，所有的瀏覽器都是支援的，而且其實現也是比較簡單。
DOM2級事件模型
事件捕獲和事件冒泡
註冊事件和解除事件
在DOM2級中使用addEventListener和removeEventListener來註冊和解除事件（IE8及之前版本不支援）。這種函式較之之前的方法好處是一個dom物件可以註冊多個相同型別的事件，不會發生事件的覆蓋，會依次的執行各個事件函式。
閉包
當function裡巢狀function時，內部的function可以訪問外部function裡的變數。
但，這還不是閉包。當你return的是內部function時，就是一個閉包。內部function會close-over外部function的變數直到內部function結束。
function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar 現在是一個閉包 bar(10);
實際上閉包概念就是為了避免記憶體洩露而存在的，閉包重點（或者意義）就是理解js的作用域， 理解了作用域方能更主觀的避免記憶體洩露，好一點的教程都會將閉包跟作用域聯絡在一起。
原型鏈
JS在建立物件（不論是普通物件還是函式物件）的時候，都有一個叫做__proto__的內建屬性，用於指向建立它的函式物件的原型物件prototype。以上面的例子為例：
console.log(zjh.__proto__ === person.prototype) //true
同樣，person.prototype物件也有__proto__屬性，它指向建立它的函式物件（Object）的prototype
console.log(person.prototype.__proto__ === Object.prototype) //true
繼續，Object.prototype物件也有__proto__屬性，但它比較特殊，為null
console.log(Object.prototype.__proto__) //null
我們把這個有__proto__串起來的直到Object.prototype.__proto__為null的鏈叫做原型鏈。
移動Web開發
(1)移動Web開發和PC Web開發有何不同？此題考察你對移動Web開發的整體理解，同時看你能否有組織有條理地思考問題； (2)怎麼實現響應式佈局？考察你是否瞭解常見的佈局方案； (3)移動端的手勢和事件； (4)怎麼提高移動端頁面的渲染效能？針對移動端網路，考察你是否能從減少HTTP請求出發提出解決方案，是否瞭解GPU渲染（偏進階）等；
PC端有ie、chrome、ff核心相容問題移動端，簡單來說相容問題相對較少，但是移動端要做好多解析度的處理，移動端所有圖片和所有html標籤的尺寸都要減半。
PC端最常用的就是固定寬度980px，然後水平居中，移動端不能這麼做，因為考慮到橫豎屏和解析度不一的問題。只要牽涉到移動端，就要牽涉到響應式（也叫做自適應）；如果只針對移動端的專案，主要考慮的是320px到750px寬的相容。移動端相比於PC端多了觸控、滑動，減少了滑鼠懸停、點選等事件。
手機瀏覽器可能不相容CSS3的屬性，可以用一下程式碼來加強你程式碼的健壯性。
（1）@media screen and (max-width:355px)寬度小於355px
（2）width:95%
width:calc(100%-10px);
width:-webkit-calc(100%-10px);
width:-moc-calc(100%-10px);
常見的佈局方案
1、靜態佈局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置； 對於移動裝置，單獨設計一個佈局，使用不同的域名如wap.或m.。
2、彈性佈局
彈性佈局是CSS3引入的強大的佈局方式，用來替代以前Web開發人員使用的一些複雜而易錯hacks方法（如使用float進行類似流式佈局）。
其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：
flex-flow: <flex-direction> || <flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
3、自適應佈局（Adaptive Layout）
自適應佈局（Adaptive）的特點是分別為不同的螢幕解析度定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨視窗大小的調整發生變化。 你可以把自適應佈局看作是靜態佈局的一個系列。 就是說你看到的頁面，裡面元素的位置會變化而大小不會變化。
4、流式佈局
流式佈局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
5.響應式佈局（Responsive Layout）
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
name="viewport"
名稱=檢視
width=device-width
頁面寬度=裝置寬度(可以理解為獲取你手機的螢幕寬度)
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
分別為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨著視窗調整而自動適配。 可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。 每個螢幕解析度下面會有一個佈局樣式，同時位置會變而且大小也會變。
移動端前端常見的觸控相關事件touch、tap、swipe等整理
1.click事件
單擊事件，類似於PC端的click,但在移動端中，連續click的觸發有200-300ms的延遲。
2.touch事件
觸控事件，有touchstart touchmove touchend touchcancel四種之分。
3.tap事件
觸碰事件，一般用於代替click事件，有tab/long tab/single tap/double tab四種之分。
4.swipe類事件
滑動事件，有swipe/swipeLeft/swiperighgt/swipeup/swipedown五種之分。
移動端前端手勢事件
手勢事件只是概念型，目前還沒有瀏覽器原生支援，按照概念可以分為gesturestart 、gesturechange 、gestureend三種事件。
gesturestart：當有兩根或多根手指放到螢幕上的時候觸發
gesturechange：當有兩根或多根手指在螢幕上，並且有手指移動的時候觸發
gestureend：當倒數第二根手指提起的時候觸發，結束gesture
移動端頁面渲染優化
HTML文件是以包含文件編碼資訊的資料流方式在網路間傳輸，頁面的編碼資訊一般會在HTTP響應的頭部資訊或在文件內的HTML標記中指明，客戶端瀏覽 器只有在確定了頁面編碼後才能正確的渲染頁面，所以在繪製頁面或執行任何的javascript程式碼前，大部分的瀏覽器（ie6、ie7、ie8除外）都 會緩衝一定位元組的資料來從中查詢編碼資訊，不同的瀏覽器當中預緩衝的位元組數是不一樣的。
Viewport可以加速頁面的渲染、減少Dom節點、儘量使用CSS3動畫、 Touchmove、Scroll事件可導致多次渲染。
GPU渲染
開啟“強制進行GPU渲染”的弊端。任何東西有利必有弊，“強制進行GPU渲染”也不例外，就看利與弊誰多一些了。首先，圖形處理從由CPU承擔轉移到GPU上，手機是保證執行流暢了，但耗能肯定會相應的提升，這就會造成你的手機續航時間將會縮短一些。其次，有的應用程式存在不支援GPU渲染的情況。
首先GPU這個東西一開始被造出來，就是為了解決大量運算的問題。它的特點是運算速度超級快但是邏輯單一，只能處理簡單的演算法，而難以勝任複雜的工作。比如我們影視從業者一般搞的那種，一等半小時渲一張圖的渲染，叫離線渲染。這種渲染因為演算法比較複雜，就是GPU以前不能處理的。
所以到底那些開發人員到底是如何做到讓GPU也慢慢能夠做複雜的離線渲染，這件事情，我是搞不懂的，就像我也不知道今天在網上買的東西第二天就送到我手上這個事情背後複雜的細節。我只是明白這種事情就是從無到有，花費很多聰明的大腦多年努力才慢慢做起來的。困難重重。
而等到GPU真的可以做離線渲染之後，我們的渲染速度就像變魔術一樣瞬間得到超大幅度的提升。這種提升是由於GPU身體結構天生適合快速運算大量資料造成的，以前它只是不會，現在它既然會了，那麼就像脫繮的野馬，你真的想象不到的快。
GPU核心渲染過程
應用程式階段：進行涉及cpu和記憶體的演算法，按照我的理解，例如在unity裡面設定場景和物體，實現遊戲邏輯，這些都是cpu乾的活，但cpu並不能讓它在螢幕上顯示出來，於是cpu就把所有頂點座標、法向量、紋理座標、紋理等資訊傳遞給gpu。
幾何階段：主要負責頂點座標變換、光照、裁剪、投影以及螢幕對映 ，該階段基於 GPU 進行運算，它將從cpu傳遞過來的資訊加以處理，最後得到經過 變換和投影之後的頂點座標、顏色、以及紋理座標。光照計算也在此階段進行。
光柵階段：基於幾何階段的輸出資料，為畫素（Pixel）正確配色，以便繪製
完整影象，該階段進行的都是單個畫素的操作，每個畫素的資訊儲存在顏色緩衝 器（color buffer 或者 frame buffer）中。
除錯
(1)是否會使用基本的抓包工具、除錯控制檯； (2)怎麼從茫茫網路內容中找到有用資訊； (3)移動端如何除錯；
常用的除錯工具
瀏覽器下的外掛：Firebug、Web Developer(IE)、IETester(瀏覽器相容性測試)。主流Firebug還有一些比較好用的外掛：
YSlow（效能優化），Page Speed（效能優化），DNS Flusher（清除瀏覽器DNS快取，不重啟瀏覽器使hosts生效），Sen SEO（SEO優化工具），CSS Userage（清理多餘的CSS），Web Developer，User Agent Switcher（更換瀏覽器UserAgent）。 第三方軟體：主要有Fiddler、HttpWatch、Http Analyzer。Fiddler是Microsofot出品的免費產品，幾乎可以抓取所有的應用程式的HTTP請求。 Chrome控制檯除錯js使用 控制檯介紹： Elements:頁面元素，可以進行編輯，儲存後實時檢視頁面效果。 Network:檢視js模擬的http請求，例如修改購物車中的商品數量，可以實時地看到請求地址，點選請求地址會把請求的頭資訊和響應資訊等資料展示出來。還可以檢視頭資訊，preview、響應資訊、cookie、timeline。 Sources:左側sources目錄可以展開，從而檢視載入頁面所呼叫的資源，如js、css、php等，並且可以設定斷點分析。Timeline:檢視頁面效能和頁面渲染速度。
Profile:主要測試載入檔案速度參考。
Console:此功能是模擬js控制檯，直接寫程式碼。主要有log、debug、info、warn、error。
1、console.log 用於輸出普通訊息
2、console.info 用於輸出提示性資訊
3、console.error用於輸出錯誤資訊
4、console.warn用於輸出警示資訊
5、console.group輸出一組資訊的開頭
6、console.groupEnd結束一組輸出資訊
7、console.assert對輸入的表示式進行斷言，只有表示式為false時，才輸出相應的資訊到控制檯
8、console.count（這個方法非常實用哦）當你想統計程式碼被執行的次數
9、console.dir(這個方法是我經常使用的 可不知道比for in方便了多少) 直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查物件的方法發展等等
10、console.time 計時開始
11、console.timeEnd 計時結束
13、console.timeLine和console.timeLineEnd配合一起記錄一段時間軸
14、console.trace 堆疊跟蹤相關的除錯
移動端測試
Eruda 是一個專為手機網頁前端設計的除錯面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日誌、檢查元素狀態、顯示效能指標、捕獲XHR請求、顯示本地儲存和 Cookie 資訊、瀏覽器特性檢測等等。
Chrome Inspect：chrome瀏覽器自帶的除錯功能，能除錯大多數基於 webWiew 或者通過 chrome 瀏覽器開啟的頁面
Safari 開發者工具：連線 ios 裝置和 mac 電腦在 ‘開發’ 中找到要除錯的裝置選擇用於開發(或者對應頁面的title列表), Safari 會為當前要除錯的頁面新建一個 inspect, 在 inspect 上可以完成常見的除錯功能。
Weinre 遠端除錯：
最後是一種通用的移動端開發時除錯解決方案 Weinre Web Inspect Remote，瞭解一下Weinre的原理和結構:
- 目標頁面(target) : 被除錯的頁面，頁面已嵌入 weinre 的遠端指令碼.
- Debug 客戶端(client) : 本地的 Web Inspector 除錯客戶端
-
Debug 伺服器(agent) : 一個HTTP Server, 為目標頁面與Debug客戶端建立通訊。
client <------> Debug agent <------> Debug client
HTTP
(1)常見HTTP狀態碼； (2)不同請求型別的區別； (3)有什麼快取方案以及怎麼實現；
常見的HTTP狀態碼
2開頭 （請求成功）表示成功處理了請求的狀態程式碼。
200 （成功） 伺服器已成功處理了請求。 通常，這表示伺服器提供了請求的網頁。
201 （已建立） 請求成功並且伺服器建立了新的資源。
202 （已接受） 伺服器已接受請求，但尚未處理。
203 （非授權資訊） 伺服器已成功處理了請求，但返回的資訊可能來自另一來源。
204 （無內容） 伺服器成功處理了請求，但沒有返回任何內容。
205 （重置內容） 伺服器成功處理了請求，但沒有返回任何內容。
206 （部分內容） 伺服器成功處理了部分 GET 請求。
3開頭 （請求被重定向）表示要完成請求，需要進一步操作。 通常，這些狀態程式碼用來重定向。
300 （多種選擇） 針對請求，伺服器可執行多種操作。 伺服器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。
301 （永久移動） 請求的網頁已永久移動到新位置。 伺服器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動） 伺服器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
303 （檢視其他位置） 請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，伺服器返回此程式碼。
304 （未修改） 自從上次請求後，請求的網頁未修改過。 伺服器返回此響應時，不會返回網頁內容。
305 （使用代理） 請求者只能使用代理訪問請求的網頁。 如果伺服器返回此響應，還表示請求者應使用代理。
307 （臨時重定向） 伺服器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
4開頭 （請求錯誤）這些狀態程式碼表示請求可能出錯，妨礙了伺服器的處理。
400 （錯誤請求） 伺服器不理解請求的語法。
401 （未授權） 請求要求身份驗證。 對於需要登入的網頁，伺服器可能返回此響應。
403 （禁止） 伺服器拒絕請求。
404 （未找到） 伺服器找不到請求的網頁。
405 （方法禁用） 禁用請求中指定的方法。
406 （不接受） 無法使用請求的內容特性響應請求的網頁。
407 （需要代理授權） 此狀態程式碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408 （請求超時） 伺服器等候請求時發生超時。
409 （衝突） 伺服器在完成請求時發生衝突。 伺服器必須在響應中包含有關衝突的資訊。
410 （已刪除） 如果請求的資源已永久刪除，伺服器就會返回此響應。
411 （需要有效長度） 伺服器不接受不含有效內容長度標頭欄位的請求。
412 （未滿足前提條件） 伺服器未滿足請求者在請求中設定的其中一個前提條件。
413 （請求實體過大） 伺服器無法處理請求，因為請求實體過大，超出伺服器的處理能力。
414 （請求的 URI 過長） 請求的 URI（通常為網址）過長，伺服器無法處理。
415 （不支援的媒體型別） 請求的格式不受請求頁面的支援。
416 （請求範圍不符合要求） 如果頁面無法提供請求的範圍，則伺服器會返回此狀態程式碼。
417 （未滿足期望值） 伺服器未滿足"期望"請求標頭欄位的要求。
5開頭（伺服器錯誤）這些狀態程式碼表示伺服器在嘗試處理請求時發生內部錯誤。 這些錯誤可能是伺服器本身的錯誤，而不是請求出錯。
500 （伺服器內部錯誤） 伺服器遇到錯誤，無法完成請求。
501 （尚未實施） 伺服器不具備完成請求的功能。 例如，伺服器無法識別請求方法時可能會返回此程式碼。
502 （錯誤閘道器） 伺服器作為閘道器或代理，從上游伺服器收到無效響應。
503 （服務不可用） 伺服器目前無法使用（由於超載或停機維護）。 通常，這只是暫時狀態。
504 （閘道器超時） 伺服器作為閘道器或代理，但是沒有及時從上游伺服器收到請求。
505 （HTTP 版本不受支援） 伺服器不支援請求中所用的 HTTP 協議版本。
不同請求型別的區別：
當使用RESTful web服務的時候，每一種HTTP請求方法的含義如下：
GET：從伺服器取回資料（只是取回資料，而不會產生其他的影響）。這是一個冪等的方法（譯者注：使用相同的引數重複執行，應該能夠獲取到相同的結果）。下面是一個使用GET請求從伺服器獲取id為123的書的例子。
GET /books/123
POST：POST請求通常用來建立一個實體，也就是一個沒有ID的資源。一旦這個請求成功執行了，就會在HTTP請求的響應中，返回這個新建立的實體的id。我們通常用它來上傳檔案或者表單。
POST /books/
PUT：PUT請求和POST請求類似，但是一般用來更新一個已有的實體。通過把已經存在的資源的ID和新的實體用PUT請求上傳的伺服器，來更新資源。
PUT /books/123
DELETE:DELETE方法用來從伺服器上刪除資源。和PUT類似，你需要把要刪除的資源的ID上傳給伺服器。
DELETE /books/123
TRACE:提供一種方法來測試當一個請求發生的時候，伺服器通過網路收到的內容。所以，它會返回你傳送的內容。
HEAD:HEAS請求和GET請求資源類似，但是僅僅返回響應的頭部（沒有具體的響應體）。同時，和GET請求類似，HEAD也是冪等的，不會在伺服器上造成其他影響。
OPTIONS:OPTIONS方法允許客戶端請求一個服務所支援的請求方法。它所對應的響應頭(response header)是Allow, 它非常簡單地列出了支援的方法。
CONNECT:主要用來建立一個對資源的網路連線（通常請求一些能夠把HTTP連線轉發成為TCP連線並保持的代理）。一旦建立連線後，會響應一個200狀態碼和一條“Connection Established”的訊息。
WEB快取方案
web快取分為很多種，比如資料庫快取、代理伺服器快取、還有我們熟悉的CDN快取，以及瀏覽器快取。瀏覽器先向代理伺服器發起Web請求，再將請求轉發到源伺服器。它屬於共享快取，所以很多地方都可以使用其快取資源，因此對於節省流量有很大作用。
頁面快取狀態是由http header決定的，一個瀏覽器請求資訊，一個是伺服器響應資訊。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規定，Cache-Control由HTTP/1.1規定。
圖中，第一次請求：瀏覽器通過http的header報頭，附帶Expires，Cache-Control，Last-Modified/Etag向伺服器請求，此時伺服器記錄第一次請求的Last-Modified/Etag再次請求：當瀏覽器再次請求的時候，附帶Expires，Cache-Control，If-Modified-Since/Etag向伺服器請求伺服器根據第一次記錄的Last-Modified/Etag和再次請求的If-Modified-Since/Etag做對比，判斷是否需要更新，然後響應請求。
css，js，flash的快取主要通過伺服器的配置來實現這個技術，如果使用apache伺服器的話，可以使用mod_expires模組來實現.同樣可以用nginx方式實現前端頁面快取，詳情請看nginx利用proxy_cache來快取檔案。
測試網頁效能工具：
⑴Page Speed：
是開源 Firefox/Firebug 外掛。網站管理員和網路開發人員可以使用 Page Speed 來評估他們網頁的效能，並獲得有關如何改進效能的建議。
⑵yslow：
YSlow可以對網站的頁面進行分析，並告訴你為了提高網站效能，如何基於某些規則而進行優化