前端面試校招問題準備（總結）

時間  2019-11-17
標籤 前端 面試 問題 準備 總結 欄目 快樂工作 简体版
原文   原文鏈接

前端點大而駁雜，面試前的準備每每會感到無所適從。在web開發的中，六項基礎知識仍是新手所必須掌握的：javascript

HTML、CSS、JavaScript、移動Web開發、調試、HTTP網絡知識。php

HTMLcss

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. 特殊符號使用: 儘量使用代碼替代: 好比 <(<) & >(&gt;) & 空格( ) & »(») 等等;
16. 書寫頁面過程當中, 請考慮向後擴展性;

 

H5新增標籤
一、結構標籤
（1）section：獨立內容區塊，能夠用h1~h6組成大綱，表示文檔結構，也能夠有章節、頁眉、頁腳或頁眉的其餘部分；
（2）article：特殊獨立區塊，表示這篇頁眉中的核心內容；
（3）aside：標籤內容以外與標籤內容相關的輔助信息；
（4）header：某個區塊的頭部信息/標題；
（5）hgroup：頭部信息/標題的補充內容；
（6）footer：底部信息；
（7）nav：導航條部分信息
（8）figure：獨立的單元，例如某個有圖片與內容的新聞塊。
二、表單標籤
（1）email：必須輸入郵件；
（2）url：必須輸入url地址；
（3）number：必須輸入數值；
（4）range：必須輸入必定範圍內的數值；
（5）Date Pickers：日期選擇器
（6）search：搜索常規的文本域；
（7）color：顏色；
三、媒體標籤
（1）video：視頻
（2）audio：音頻
（3）embed：嵌入內容（包括各類媒體），Midi、Wav、AU、MP三、Flash、AIFF等。
三、媒體標籤
（1）video：視頻
（2）audio：音頻
（3）embed：嵌入內容（包括各類媒體），Midi、Wav、AU、MP三、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的處理。

　佈局完成後，即是將呈現樹繪製出來顯示在屏幕上。對於每個呈現樹節點來講，主要繪製順序以下：
背景顏色
背景圖片
邊框
子呈現樹節點
輪廓

 

CSShtml

1.怎樣寫出更好的CSS，如層級不宜過深，如什麼時候用ID和什麼時候用class，如怎麼拆分組織CSS代碼等;
2.盒模型；
3.很是經常使用的CSS3知識，好比CSS3動畫，好比彈性佈局。

 css盒子模型概念前端

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：html5

圖中最內部的框是元素的實際內容，也就是元素框，緊挨着元素框外部的是內邊距padding，其次是邊框（border），而後最外層是外邊距（margin），整個構成了框模型。一般咱們設置的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其餘元素。java

元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；jquery

元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。ios

 css彈性佈局概念nginx

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即使容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工做。在該佈局模型中，容器會根據佈局的須要，調整其中包含的條目的尺寸和順序來最好地填充全部可用的空間。當容器的尺寸因爲屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。好比當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。在傳統的佈局方式中，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);

常見的佈局方案

一、靜態佈局（Static Layout）

即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 意思就是無論瀏覽器尺寸具體是多少，網頁佈局就按照當時寫代碼的佈局來佈置； 對於移動設備，單獨設計一個佈局，使用不一樣的域名如wap.或m.。

二、彈性佈局

彈性佈局是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兩個方向上的顯示方式

三、自適應佈局（Adaptive Layout）

自適應佈局（Adaptive）的特色是分別爲不一樣的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每一個佈局中，頁面元素不隨窗口大小的調整發生變化。 你能夠把自適應佈局看做是靜態佈局的一個系列。 就是說你看到的頁面，裏面元素的位置會變化而大小不會變化。

四、流式佈局

流式佈局（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代碼前，大部分的瀏覽器（ie六、ie七、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。

一、console.log 用於輸出普通訊息
二、console.info 用於輸出提示性信息
三、console.error用於輸出錯誤信息
四、console.warn用於輸出警示信息
五、console.group輸出一組信息的開頭
六、console.groupEnd結束一組輸出信息
七、console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯
八、console.count（這個方法很是實用哦）當你想統計代碼被執行的次數
九、console.dir(這個方法是我常用的 可不知道比for in方便了多少) 直接將該DOM結點以DOM樹的結構進行輸出，能夠詳細查對象的方法發展等等
十、console.time 計時開始
十一、console.timeEnd  計時結束
1三、console.timeLine和console.timeLineEnd配合一塊兒記錄一段時間軸
1四、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能夠對網站的頁面進行分析，並告訴你爲了提升網站性能，如何基於某些規則而進行優化
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程