前端點大而駁雜，面試前的准備往往會感到無所適從。在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還有一些比較好用的插件：
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可以對網站的頁面進行分析，並告訴你為了提高網站性能，如何基於某些規則而進行優化