前端開發面試題

whjin發表於2018-06-25
前端面試題

前端開發面試題

站點地址：全棧開發
原文連結：前端開發面試題

HTML

  • Doctype作用？標準模式與相容模式各有什麼區別？

1、<!DOCTYPE>宣告位於HTML文件中的第一行，處於<html>標籤之前，告知瀏覽器的解析器用什麼文件標準解析。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
2、標準模式的排版和JS執行模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。

  • HTML5為什麼只需要寫<!DOCTYPE HTML>？

HTML5不基於SGML(標準通用標記語言)，因此不需要對DTD(文件型別定義)進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）
HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

  • 行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

首先：CSS規範規定，每個元素都有display屬性，確定鈣元素的型別，每個元素都有預設的display值，如div的display預設值為block，都是塊級元素；span預設display屬性值為inline，是行內元素。
1、行內元素：a、b、span、img、input、select、strong（強調的語氣）
2、塊級元素：div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、p
3、常見的空元素：br、hr、img、input、link、meta
不常用的空元素：area、base、col、command、embed、keygen、param、source、track、wbr

  • 頁面匯入樣式時，使用link和@import有什麼區別？

1、link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS，定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS。
2、頁面被載入時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入。
3、import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。
4、link支援使用JS控制DOM改變樣式，而@import不支援。

  • 介紹一下你對瀏覽器核心的理解？

主要分成兩部分：渲染引擎（layout或engine）和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影像等）、整理資訊（加入CSS等），以及計算網頁的顯示方式，然後輸出到顯示器或印表機。瀏覽器的核心的不同對網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎：解析和執行JS來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分額很明確，後來JS引擎越來越獨立，核心就傾向於只是指渲染引擎。

  • 常見的瀏覽器核心有哪些？

Trident核心：IE，MaxThon，TT，The World，360，搜狗瀏覽器等[MSHTML]
Gecko核心：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上[Opera核心原為：Presto，現為：Blink]
Webkit核心：Safari，Chrome等[Chrome：Blink（Webkit的分支）]

  • HTML5有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5？

HTML5現在已經不是SGML的子集，主要是關於影像，位置，儲存，多工等功能的增加。
繪畫canvas
用於媒介回放的video和audio元素
本地離線儲存localStorage長期儲存資料，瀏覽器關閉後資料不丟失
sessionStorage的資料在瀏覽器關閉後自動刪除

語義化更好的內容元素，比如article、footer、header、nav、section
表單控制元件：calendar、date、time、email、url、search
新技術：webworker、websocket、Geolocation

移除的元素：
純表現的元素：basefont、big、center、font、s、strike、tt、u
對可用性產生負面影響的元素：frame、frameset、noframes

支援HTML5新標籤：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要新增預設的樣式。
也可以直接使用成熟的框架，如html5shim：

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>    
<![endif]>

區分HTML5,：DOCTYPE宣告，新增的結構元素，功能元素等

  • 簡述一下你對HTML語義化的理解？

語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析
沒有CSS樣式也能正常閱讀文件
搜尋引擎的爬蟲依賴HTML標記來確定上下文和各個關鍵字的權重，有利於SEO

  • HTML5的離線儲存怎麼使用，工作原理解釋一下？

在使用者沒有聯網時，可以正常訪問站點或應用；在聯網的情況下，更新使用者機器上的快取檔案。
原理：HTML5的離線儲存是基於一個新建的.appchache檔案的快取機制（不是儲存技術），通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存下來。之後當網路處於離線狀態時，瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用：
1、頁面頭部加入一個manifest的屬性
2、在cache.manifest檔案的編寫離線儲存的資源
3、在離線狀態下，操作window.applicationCache進行需求實現

  • 瀏覽器是如何對HTML5的離線儲存資源進行管理和載入的？

線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，瀏覽器會根據manifest檔案的內容下載相應的資源並且進行離線儲存。
如果已經訪問過app，並且資源已經離線儲存，瀏覽器會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案，如果檔案沒有發生改變，就不做任何操作，否則就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器直接使用離線儲存的資源。

  • 請描述一下cookie，sessionStorage，localStorage的區別？

cookie是網站為了標識使用者身份而儲存在使用者本地終端上的資料（通常經過加密）
cookie資料始終在同源的http請求中攜帶（即使不需要），就會在瀏覽器和伺服器間來回傳遞
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存

儲存大小：
cookie資料大小不能超過4k
sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大

有效時間：
localStorage儲存持久資料，瀏覽器關閉後資料不丟失，除非主動刪除資料
sessionStorage資料在當前瀏覽器視窗關閉後自動刪除
cookie設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

  • iframe有哪些缺點？

iframe會阻塞主頁面的onload事件
搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO
iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入
使用iframe之前需要考慮兩個缺點。如果需要使用iframe，最好是通過JS
動態給iframe新增src屬性值，可以繞開以上兩個問題。

  • label的作用是什麼？怎麼用？

label標籤定義表單控制元件間的關係，當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name">
  • HTML5的form如何關閉自動完成功能？

給不想要提示的form或某個input設定為autocomplete=off

  • 如何實現瀏覽器內多個標籤頁之間的通訊？（阿里）

WebSocket，SharedWorkder
也可以呼叫localStorage、cookies等本地儲存方式
localStorage另一個瀏覽上下文中被新增、修改或刪除時，它都會觸發一個事件，通過監聽事件，控制它的值來進行頁面資訊通訊

  • WebSocket如何相容低瀏覽器？（阿里）

Adobe Flash Socket
ActiveX HTMLFile（IE）
基於multipart編碼傳送XHR
基於長輪詢的XHR

  • 頁面可見性可以有哪些用途？

通過visibilityState的值檢測頁面當前是否可見，以及開啟頁面的時間等
在頁面被切換到其他後臺程式的時候，自動暫停音樂或視訊的播放

  • 如何在頁面上實現一個圓形的可點選區域？

1、map+area或者SVG
2、border-radius
3、純JS實現，需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等

  • 實現不使用border畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height: 1px;overflow: hidden;background: red;"></div>

<div style=”height: 1px;overflow: hidden;background: red;”></div>

CSS

  • 介紹一下標準CSS的盒子模型？低版本IE的盒子模型有什麼不同？

1、有兩種，IE盒子模型、W3C盒子模型
2、盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（border）
3、區別：IE的content部分把border和padding計算進去

  • CSS選擇符有哪些？哪些屬性可以繼承？

1、ID選擇器
2、類選擇器
3、標籤選擇器
4、相鄰選擇器（h1+p）
5、子選擇器（ul>li）
6、後代選擇器（li a）
7、萬用字元選擇器（*）
8、屬性選擇器（a[rel="external"]）
9、偽類選擇器（a:hover,li:nth-child）

可繼承的樣式：font-size、font-family、color、ul、li、dl、dd、dt
不可繼承的樣式：border、padding、margin、width、height

  • CSS優先順序如何計算？

優先順序就近原則，同權重情況下樣式定義最近者為準
載入樣式以最後載入的定位為準

優先順序為：
同權重：內聯樣式表（標籤內部）>嵌入樣式表（當前檔案）>外部樣式表（外部檔案）
!important > id > class > tag
!important比內聯優先順序高

  • CSS3新增偽類有哪些？

p:first-of-type 選擇屬於其父元素的首個<p>元素
p:last-of-type 選擇屬於其父元素的最後<p>元素
p:only-of-type 選擇屬於其父元素唯一的<p>元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個<p>元素
::after在元素之前新增內容，也可以用來做清除浮動
::before在元素之後新增內容
::enabled ::disabled控制表單控制元件的禁用狀態
:checked單選框或核取方塊被選中

  • 水平居中：給div設定一個寬度，然後新增margin: 0 auto屬性
div {
  width: 200px;
  margin: 0 auto;
}
  • 讓絕對定位的div居中
div {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
}
  • 水平垂直居中一

確定容器的寬高
設定層的外邊距

div {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  background: #ccc;
}
  • 水平垂直居中二

未知容器的寬高，利用transform屬性

div {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bbb;
}
  • 水平垂直居中三

利用flex佈局
實際使用時應考慮相容性

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: green;
}

span {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}
  • display有哪些值？說明它們的作用？

block塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。
none預設值。像行內元素型別一樣顯示。
inline行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。
inline-block預設寬高為內容寬度，可以設定寬高，同行顯示。
list-item像塊型別元素一樣顯示，並新增樣式列表標記。
table此元素會作為塊級表格顯示。
inherit規定應該從父元素繼承display屬性的值。

  • position的值relative和absolute定位原點？

absolute生成絕對定位的元素，相對於值不為static的第一個父元素進行定位
fixed（老IE不支援）生成絕對定位的元素，相對於瀏覽器視窗進行定位
relative生成相對定位的元素，相對於其正常位置進行定位
static預設值。沒有定位，元素出現在正常的流中（忽略top、right、bottom、left宣告）
inherit規定從父元素繼承position屬性的值

  • CSS3有哪些新特性？

新增各種CSS選擇器（:not(.input)）：所有class不是input的節點
圓角border-radius:8px;
多列布局multi-column layout
陰影個反射shadow
eflect
文字特效text-shadow
文字渲染text-decoration
線性漸變gradient
旋轉transform
縮放、定位、傾斜、動畫、多背景
例如：transform:scale(0.85,0.90) ranslate(0,-30px)skew(-9deg,0)animation

  • 請解釋一下CSS3的flexbox（彈性盒佈局模型），以及適用場景？

一個用於頁面佈局的全新CSS3功能，flexbox可以把列表放在同一個方向（從上到下，從左到右），並讓列表能延伸到佔用可用的空間。
較為複雜的佈局還可以通過巢狀一個伸縮容器（flex container）來實現。
採用flex佈局的元素，稱為flex容器（flex container），簡稱容器
它的所有子元素自動稱為容器成員，稱為flex專案（flex item），簡稱專案
常規佈局是基於塊和內聯流方向，而flex佈局是基於flex-flow流，可以很方便地用來做居中，能對不同螢幕大小自適應。

  • 用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設為transparent）

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent red transparent;
}
  • 如何設計一個滿屏品字佈局？

簡單方式：
上面的div寬100%
下面的兩個div分別寬50%
然後用float或者inline使其不換行即可

body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 300px;
    background: green;
}

.left {
    width: 50%;
    height: 300px;
    background: aqua;
    float: left;
}

.right {
    width: 50%;
    height: 300px;
    background: blue;
    float: right;
}
  • 如何實現CSS多列等高？

利用padding-bottom|margin-bottom正負值相抵；
設定父容器超出隱藏overflow:hidden;，這樣子父容器的高度還是它裡面的列沒有設定padding-bottom時的高度；
當它裡面的任何一列高度增加，則父容器的高度被撐開到裡面最高那一列的高度
其他比這列低的會用它們的padding-bottom補償這部分的高度差

body {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.left {
    float: left;
    width: 30%;
    height: 100px;
    background: aqua;
    padding-bottom: 200px;
    margin-bottom: -200px;
}

.right {
    float: right;
    width: 70%;
    height: 200px;
    background: #6cc;
    padding-bottom: 200px;
    margin-bottom: -200px;
}
  • 經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼？常用hack技巧？

png24位的圖片在IE6瀏覽器上出現背景，解決方案是做成png8
瀏覽器預設的margin和padding不同。解決方案是加一個全域性{margin:0;padding:0;}來統一
IE6雙邊距bug塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大
浮動IE產生的雙倍距離

#box {
    float: left;
    width: 10px;
    margin: 0 0 0 100px;
}

這種情況下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入_display:inline;將其轉化為行內屬性。（_這個符號只有IE6會識別）
漸進識別的方式，從總體中逐漸排除區域性。
首先，巧妙地使用9這一標記，將IE瀏覽器從所有情況中分離出來。
接著，再次使用+將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

div {
    background-color: red; /*所有識別*/
    background-color: #00deff 9; /*IE6、7、9識別*/
    _background-color: #1e0bd1; /*IE6識別*/
}

IE下可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
firefox下只能使用getAttribute()獲取自定義屬性
解決方法：統一通過getAttribute()獲取自定義屬性

IE下event物件有x、y屬性，但是沒有pageX、pageY屬性；
Firefox下event物件有pageX、pageY屬性，但是沒有x、y屬性
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數

chrome中文介面下預設會將小於12px的文字強制按照12px顯示
可通過加入CSS屬性-webkit-text-size-adjust:none;解決

超連結訪問過後hover樣式不出現，被點選訪問過的超連結樣式不再具有hover和avtive。
解決方法：改變CSS屬性的排列順序。

L-V-H-A：a:link{} a:visited{} a:hover{} a:active{}
  • li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

行框的排列會受到中間空白（回車/空格）等的影響，因為空格也屬於字元，這些空白也會被應用樣式，佔據空間，所以會有間隔，把字元大小設為0，就沒有空格。

  • 為什嗎要初始化CSS樣式？

瀏覽器有相容問題，不同瀏覽器對有些標籤的預設值不同，沒有CSS初始化會出現瀏覽器之間的頁面顯示差異。

初始化樣式會對SEO有一定的影響，儘量在影響最小的情況下進行初始化。

  • absolute的containing block（容器塊）計算方式跟正常流有什麼不同？

無論屬於哪種，都要先找到其祖先元素中最近的position值不為static的元素，然後再判斷：
1、若此元素為inline元素，則containing block為能夠包含這個元素生成的第一個和最後一個inline box的padding box（除margin，border外的區域）的最小矩形；
2、否則由這個祖先元素的padding box構成
如果都找不到，則為initial containing block

補充：
1、static/relative，它的父元素的內容框（即去掉padding的部分）
2、absolute：向上找最近的定位為absolute、relative的元素
3、fixed：它的containing block一律為根元素（html/body），根元素也是initial containing block

  • CSS裡的visibility屬性有個collapse屬性值得作用？在不同瀏覽器下有什麼區別？

對於普通元素visibility:collapse;會將元素完全隱藏，不佔據頁面佈局空間，與display:none;表現相同。如果目標元素為table，visibility:collapse;將table隱藏，但是會佔據頁面佈局空間。僅在Firefox下起作用，IE會顯示元素，Chrome會將元素隱藏，但是佔據空間。

  • position跟display、margin collapse、overflow、float這些特性相互疊加後會怎樣？

如果元素的display為none，那麼元素不被渲染，position，float不起作用；
如果元素擁有position:absolute;或position":fixed;屬性，那麼元素將為絕對定位，float不起作用。
如果元素float屬性不是none，元素會脫離文件流，根據float屬性值來顯示。有浮動、絕對定位，inline-block屬性的元素，margin不會和垂直方向上的其他元素margin摺疊。

  • 對BFC規範（塊級格式化上下文）的理解？

它是一個獨立容器，決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。
一個頁面是由多個Box組成，元素的型別和display屬性，決定了這個Box的型別
不同型別的Box會參與不同的Formatting Context（決定如何渲染文件的容器），因此Box內的元素會以不同的方式渲染，也就是說BFC內部的元素和外部的元素不會相互影響。

  • CSS定義的權重

權重的規則：標籤的權重為1，class的權重為10，id的權重為100。

  • 請解釋一下為什麼需要清除浮動？清除浮動的方法？

清除浮動是為了清除使用浮動元素產生的影響。
浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。

1、父級div定義height；
2、父級div也一起浮動；
3、常規的使用一個class；

.clearfix:before, .clearfix:after {
    content: ``;
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SASS編譯的時候，浮動元素的父級div定義偽類:after 

div:after, div:before {
    content: ``;
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

解析原理：
1、displa:block;使生成的元素以塊級元素顯示，佔滿剩餘空間；
2、height:0避免生成內容破壞原有佈局的高度；
3、visibility:hidden;使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動；
4、通過content:"."生成內容作為最後一個元素，
5、zoom:1;觸發IE hasLayout

通過分析發現，除了clear:both用來閉合浮動，其他程式碼都是為了隱藏content生成的內容，這也是其他版本的閉合浮動為什麼有font-size:0，line-height:0

  • 什麼是外邊距合併？

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度重的較大者

  • zoom:1的清除浮動原理？

清除浮動，觸發hasLayout；
zoom屬性時IE瀏覽器的專有屬性，它可以設定或檢索物件的縮放比例。解決IE存在的bug
比如外邊距的重疊，浮動清除，觸發IE的hasLayout屬性等

當設定了zoom的值後，所設定的元素就會擴大或縮小，高度寬度就會重新計算，一旦改變zoom值時也會發生重新渲染，運用這個原理解決IE中子元素浮動時父元素不隨著自動擴大的問題。

目前非IE瀏覽器不支援這個屬性，可以通過CSS3中的動畫屬性scale進行縮放。

  • 瀏覽器如何解析CSS選擇器？

從關鍵選擇器開始匹配，然後左移查詢規則選擇器祖先元素。
只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或因為不匹配而放棄規則。

  • margin和padding分別適用什麼場景？

margin用來隔開元素與元素的間距；
padding用來隔開元素與內容的間隔；
margin用於佈局分開元素使元素與元素互不相干；
padding用於元素與內容之間的間隔，讓內容與元素之間有一段距離

  • ::before和:after中雙冒號和單冒號有什麼區別？解釋一下這兩個偽類的作用？

單冒號（:）用於CSS3偽類，雙冒號（::）用於CSS3偽元素。（偽元素由雙冒號和偽元素組成）
雙冒號是在當前規範中引入的，用於區分偽類和偽元素。

  • 如何修改Chrome記住密碼後自動填充表單的黃色背景？

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

    background-color: rgb(250, 250, 189);
background-image: none;
color: rgb(0, 0, 0);

    }

  • 設定元素浮動後，該元素的display值是多少？

自動變成display:block

  • 如何讓Chrome支援小於12px的文字？

1、使用圖片：如果是內容固定不變的情況下，使用將小於12px文字內容切出做圖片，這樣既相容又美觀。
2、使用12px字型大小樣式設定，如果不考慮Chrome可以不用考慮相容同時在設定小於12px物件設定-webkit-text-adjust:none，做到最大相容考慮。
4、使用12px以上字型，重新考慮權重下相容性。

  • 如何用CSS讓頁面的字型變得清晰，變細？
-webkit-font-smoothing:antialiased;
  • position:fixed;在Android下無效如何處理？

fixed的元素是相對整個頁面固定位置，在螢幕上滑動只是在移動這個所謂的viewport
並不是IOS不支援fixed，只是fixed的元素不是相對手機螢幕固定的。

  • 手動寫動畫，最小時間間隔是多少？

多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60*1000ms=16.7ms

  • display:inline-block什麼時候會顯示間隙？

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

  • 什麼是cookie隔離？（請求資源的時候不要讓它攜帶cookie）

如果靜態檔案都放在主域名下，靜態檔案請求的時都帶有cookie的資料提交給server，非常浪費流量。

因為cookie有域的限制，因此不能跨域提交請求，所以使用非主要域名的時候，請求頭中就不會帶有cookie資料。
這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。
同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節。
提高了webserver的HTTP請求的解析速度。

JavaScript

  • 介紹JS的基本資料型別

undefined、null、Boolean、number、string
ES6新增：symbol（建立唯一且不可變資料型別）

  • 介紹JS有哪些內建物件？

Object是JS中所有物件的父物件
資料封裝類物件：Object、Array、Boolean、Number和String
其他物件：Function、arguments、Math、Date、RegExp、Error

  • 寫JS的基本規範

1、不在同一行宣告多個變數
2、使用===/!==來比較true/false或者數值
3、使用物件字面量替代new Array
4、不使用全域性函式
5、switch語句必須帶有default分支
6、函式應該有返回值
7、for迴圈必須使用大括號
8、if語句必須使用大括號
9、for-in迴圈中的變數，應該使用var關鍵字明確限定作用域，從而避免作用域汙染

  • JS原型，原型鏈？有什麼特點？

每個物件都會在其內部初始化一個屬性，就是prototype（原型），當訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，如此反覆，就是原型鏈的概念。

關係：instance.constructor.prototype=instance.__proto__

特點：
JS物件通過引用來傳遞，建立的每個新物件實體中並沒有一份屬於自己的原型副本。當修改原型時，與之相關的物件也會繼承這一改變。

當需要一個屬性時，JS引擎會先看當前物件中是否有這個屬性，如果沒有，就會查詢它的prototype物件是否有這個屬性，如此遞推，一直檢索到Object內建物件。

function Func() {}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function () {
    return this.name;
};
var person = new Func();//var person=Object.create(oldObject)
console.log(person.getInfo());//Sean
console.log(Func.prototype);//Object {name: "Sean"}
  • JS有幾種型別的值？畫一下記憶體圖？

棧：原始資料型別（undefined，null、Boolean、number、string）
堆：引用資料型別（物件、陣列和函式）

兩種型別的區別：儲存位置不同
原始資料型別直接儲存在棧中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料，所以放入棧中儲存；
引用資料型別儲存在堆中的物件，佔據空間大、大小不固定。如果儲存在棧中，將會影響程式執行的效能；
引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。當解析器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體。

  • 如何將字串轉化為數字，例如12.3b？

parseFloat(`12.3b`);

  • 如何將浮點數點左邊的數每三位新增一個逗號，如12000000.11轉化為12,000,000.11？
function commafy(num) {
    return num && num.toString().replace(/(d)(?=(d{3})+.)/g, function ($1, $2) {
        return $2 + `,`;
    })
}
  • 如何實現陣列的隨機排序？
//方法一：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    for (var i = 0, len = arr.length; i < len; i++) {
        var rand = parseInt(Math.random() * len);
        var temp = arr[rand];
        arr[rand] = arr[i];
        arr[i] = temp;
    }
    return arr;
}
//方法二：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    var mixedArray = [];
    while (arr.length > 0) {
        var randomIndex = parseInt(Math.random() * arr.length);
        mixedArray.push(arr[randomIndex]);
        arr.splice(randomIndex, 1);
    }
    return mixedArray;
}
//方法三：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(function () {
    return Math.random() - 0.5;
});
  • JS如何實現繼承？

1、構造
2、原型
3、例項
4、拷貝

原型prototype機制或apply和call方法去實現比較簡單，建議使用建構函式與原型混合方式。

function Parent() {
    this.name = name;
}
function Child() {
    this.age = age;
}
Child.prototype = new Parent();//繼承Parent，通過原型
  • JS建立物件的方式？

JS建立物件，就是使用內建物件或各種自定義物件，還可以使用JSON；
1、物件字面量var person={firstname:"Mark",lastname:"Yun"}
2、用function模擬無引數的建構函式

function Person() {}
var person = new Person();//定義一個function，如果使用new例項化，該function可以看作一個class
person.name = "Mark";
person.age = "25";
person.word = function () {
    return person.name + `hello`
};

3、用function模擬引數建構函式來實現（用this關鍵字定義構造的上下文屬性）

function Pet(name, age, hobby) {
    this.name = name;//this作用域，當前物件
    this.age = age;
    this.hobby = hobby;
    this.eat = function () {
        return "我是" + this.name + "，我喜歡" + this.hobby + "，是個程式設計師。";
    }
}
var maidou = new Pet("麥兜", 25, "coding");//例項化、建立物件
maidou.eat();//呼叫eat方法

4、用工廠方式來建立（內建物件）

var mcDog = new Object();
mcDog.name = "旺財";
mcDog.age = 3;
mcDog.work = function () {
    return mcDog.name + `,汪汪汪......`;
};
mcDog.work();

5、用原型方式來建立

function Dog() {}
Dog.prototype.name = "旺財";
Dog.prototype.eat = function () {
    return this.name = "是個吃貨"
};

6、用混合方式來建立

function Car(name, price) {
    this.name = name;
    this.price = price;
}

Car.prototype.sell = function () {
    return "我是" + this.name + "，我現在賣" + this.price + "萬元。";
};
var camry = new Car("凱美瑞", 27);
  • JS作用域鏈？

全域性函式無法檢視區域性函式的內部細節，但區域性函式可以檢視其上層的函式細節，直至全域性細節。
當需要從區域性函式查詢某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查詢，直至全域性函式，這種組織形式就是作用域鏈。

  • 談談對this物件的理解？

this總是指向函式的直接呼叫者；
如果有new關鍵字，this指向new出來的物件；
在事件中，this指向觸發這個事件的物件，特殊的是IE中的attachEvent中的this總是指向全域性物件window。

  • eval的作用？

它的功能是把對應的字串解析成JS程式碼並執行；
應該避免使用eval，不安全，非常耗效能（2次，一次解析成JS語句，一次執行）
由JSON字串轉換成JSON物件的時候可以用eval，var obj=eval(`(`+str+`)`);

  • 什麼是window物件？什麼是document物件？

window物件是指瀏覽器開啟的視窗
document物件時Document物件（HTML文件物件）的一個只讀引用，window物件的一個屬性。

  • null、undefined的區別？

null表示一個物件的值為空；
undefined表示一個變數宣告瞭，但是沒有初始化（賦值）；

undefined不是一個有效的JSON，而null是；
undefined的型別（typeof）是undefined
null的型別typeof是object

JS將未賦值的變數預設設為undefined；
JS從來不會將變數設為null。它是用來標明某個用var宣告的變數時沒有值。

typeof undefined;//undefined
undefined：是一個表示無的原始值或說表示缺少值，就是此處應該有一個值，但是還沒有定義。

typeof null;//null
null：是一個物件（空物件，沒有任何屬性和方法）
作為函式的引數，表示該函式的引數不是物件；

注意：
在驗證null時，一定要使用===，因為==無法區分null和undefined

null == undefined;//true
null === undefined;//false

寫一個通用的事件偵聽器函式

<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”bKjVvM” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”通用的事件偵聽器函式” class=”codepen”>See the Pen 通用的事件偵聽器函式 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

  • [`1`, `2`, `3`].map(parseInt);答案是多少？

[`1`, `2`, `3`].map(parseInt);//[ 1, NaN, NaN ]；
parseInt()函式能解析一個字串，並返回一個整數，需要兩個引數（val、radix）；
其中radix表示要解析的數字的基數。（該值介於2~36之間，並且字串中的數字不能大於radix才能正確返回數字結果值）；
此處map穿了3個（element,index,array），重寫parseInt函式測試是否符合上面的規則。

function parseInt(str, radix) {
    return str + `-` + radix;
}
var a = [`1`, `2`, `3`];
console.log(a.map(parseInt));//[ `1-0`, `2-1`, `3-2` ]不能大於radix

因為二進位制裡面沒有數字3，導致出現超範圍的radix賦值和不合法的進位制解析，才會返回NaN。

  • 什麼是事件？IE與火狐的事件機制有什麼區別？如何組織冒泡？

1、在網頁中的某個操作，例如點選一個按鈕就會產生一個事件，可以被JS偵測到的行為。
2、事件處理機制：IE是事件冒泡、Firefox同時支援兩種事件模型，也就是：捕獲型事件和冒泡型事件；
3、ev.stopPropation();（舊IE的方法ev.cancelBubble=true;）

  • 什麼是閉包（closure），為什麼要使用它？

閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見方式是一個函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數；
利用閉包可以突破作用域鏈，將函式內部的變數和方法傳遞到外部。

閉包的特性：
1、函式內再巢狀函式；
2、內部函式可以引用外層的引數和變數；
3、引數和變數不會被垃圾回收機制回收

li節點的onclick事件都能正確的彈出當前被點選的li索引

var nodes = document.getElementsByTagName(`li`);
for (var i = 0, len = nodes.length; i < len; i++) {
    nodes[i].onclick = (function (i) {
        return function () {
            console.log(i);
        }
    })(i)
}

執行sayNum()後，sayNum()閉包內部變數依舊存在，而閉包內部的函式的變數不會存在；
使得JS的垃圾回收機制GC不會收回sayNum()所佔用的資源，因為sayNum()的內部函式的執行需要依賴sayNum()中的變數。這是對閉包作用的非常直白的描述。

function sayNum() {
    var num = 666;
    var sayLog = function () {
        console.log(num);
    };
    num++;
    return sayLog;
}
var sayLog = sayNum();
sayLog();//667
  • JS程式碼中的use strict;有什麼作用？使用它區別是什麼？

use strict是一種ES6新增的（嚴格）執行模式，這種模式使得JS在更嚴格的條件下執行；

使JS編碼更佳規範化的模式，消除JS語法的一些不合理、不嚴謹的地方，減少一些怪異行為。
預設支援的槽糕特性都會被禁用，比如不能使用with，也不能再意外的情況下給全域性變數賦值；
全域性變數的顯示宣告，函式必須宣告在頂層，不允許再非函式程式碼塊內宣告函式，arguments.callee也不允許使用；
消除程式碼執行的一些不安全之處，保證程式碼執行的安全，限制函式中的arguments修改，嚴格模式下的eval函式的行為和非嚴格模式的也不相同。

提高編譯器效率，增加執行速度；

  • 如何判斷一個物件是否屬於某個類？

使用instanceof 

if (a instanceof Person) {
    console.log("yes");
}
  • 解釋一下new操作符？

1、建立一個空物件，並且this變數引用該物件，同時還繼承了該函式的原型；
2、屬性和方法被加入到this引用的物件中；
3、新建立的物件由this所引用，並且最後隱式的返回this。

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
  • JS中的hasOwnProperty函式，執行物件查詢時不會去查詢原型，詳細解釋一下？

JS中hasOwnProperty函式方法是返回一個布林值，指出一個物件是否具有指定名稱的屬性。
此方法無法檢查該物件的原型鏈中是否具有該屬性；
該屬性必須是物件本身的一個成員。

使用方法：
Object.hasOwnProperty(proName)
其中引數object是必選項。一個物件的例項。
proName是必選項。一個屬性名稱的字串值。

如果object具有指定名稱的屬性，JS中hasOwnproperty函式方法返回true，反之則返回false。

  • 說一下你對JSON的瞭解？

JSON是一種輕量級的資料交換格式。
它是基於JS的一個子集。資料格式簡單，易於讀寫，佔用頻寬小

JSON字串轉換成JSON物件：

var obj = eval(`(` + str + `)`);
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON物件轉換成JSON字串：

var last = obj.toJSONString();
var last = JSON.stringify(obj);
  • JS有哪些延遲載入的方式？

defer和async、動態建立DOM方式（用得最多）、按需非同步載入JS

  • Ajax是什麼？如何建立一個Ajax？

非同步傳輸+JS+XML
非同步：向伺服器傳送請求時，不必等待結果，而是可以同時做其他的事情，等到有了結果會自己根據設定進行後續操作；
與此同時，頁面不會發生整體重新整理，提供了使用者體驗。

1、建立XMLHTTPRequest物件，也就是建立一個非同步呼叫物件；
2、建立一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證資訊；
3、設定響應HTTP請求狀態變化的函式；
4、傳送HTTP請求
5、獲取非同步呼叫返回的資料
6、使用JS和DOM實現區域性重新整理

  • Ajax解決瀏覽器快取問題？

1、在ajax傳送請求前新增

AjaxObj.setRequestHeader("IF-Modified-Since","0");

2、在ajax傳送請求前新增

AjaxObj.setRequestHeader("Cache-Control", "no-cache");

3、在URL後面新增一個隨機數："fresh=" + Math.random();

4、在URL後面新增時間戳："nowtime=" + new Date().getTime();

5、如果使用jQuery，則$.ajaxSetup({cache: false});。這樣頁面的所有ajax都會執行這條語句，不需要儲存快取記錄。

  • 同步和非同步的區別？

同步：不同程式為協同完成某項工作，在先後次序上調整（通過阻塞，喚醒等方式）。

同步：瀏覽器訪問伺服器請求，頁面重新整理，重新傳送請求，等待請求完成，頁面重新整理顯示新內容，如此反覆。
非同步：瀏覽器訪問伺服器請求，操作頁面，瀏覽器後端進行請求。等待請求完成，頁面不重新整理顯示新內容。

  • 如何解決跨域問題？

jsonp、iframe、window.name、window.postMessage、伺服器上設定代理頁面

  • AMD、CMD規範的卻別？

AMD非同步模組定義，所有的模組將被非同步載入，模組載入不影響後面語句執行。
所有依賴某些模組的語句都放置在回撥函式中。

區別：
1、對於依賴的模組，AMD是提前執行，CMD是延遲執行。
2、CMD推崇依賴就近，AMD推崇依賴前置

//AMD
define([`./a`, `./b`], function (a, b) {//依賴必須一開始就寫好
    a.doSomething();
    b.doSomething();
});

//CMD
define(function (require, exports, module) {
    var a = require(`./a`);
    a.doSomething();
    var b = require(`./b`);//依賴可以就近寫
    b.doSomething();
});
  • document.write和innerHTML的區別？

document.write只能重回整個頁面
innerHTML可以重繪頁面的一部分

  • DOM操作——新增、移除、移動、賦值、建立和查詢節點？

1、建立新節點

createDocumentFragment();//建立一個DOM片段
createElement();//建立一個具體的元素
createTextNode();//建立一個文字節點

2、新增、移除、替換、插入

appendChild();//新增
removeChild();//移除
replaceChild();//替換
insertBefore();//在已有的子節點前插入一個新的子節點

3、查詢

getElementsByTagName();//通過標籤名
getElementsByName();//通過元素的Name屬性的值（IE容錯能力較強，會得到一個陣列，其中包括id等於name值）
getElementById();//通過元素id，唯一性
  • jquery.extend和jquery.fn.extend的區別？

jquery.extend為jquery類新增類方法，可以理解為新增靜態方法
jquery.fn.extend:
原始碼jquery.fn=jquery.prototype，對jquery.fn的擴充套件，就是為jquery類新增成員函式
使用：
jquery.extend擴充套件，需要通過jquery類呼叫，而jquery.fn.extend擴充套件，所有jquery例項都可以直接呼叫。

  • 針對jQuery的優化方法？

基於class的選擇器的效能相對於id選擇器開銷很大，因為需要遍歷所有DOM元素。

頻繁操作的DOM，先快取起來再操作。用jQuery的鏈式呼叫更好。比如var str=$("a").attr("href");

for (var i = size, len = arr.length; i < len; i++) {}

  • 如何判斷當前指令碼執行在瀏覽器還是Node環境中？（阿里）

this === window ? `browser` : `node`;
通過判斷global物件是否為window，如果不為window，當前指令碼沒有執行在瀏覽器中。

  • 哪些操作會造成記憶體洩漏？

垃圾回收器定義掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為0（沒有其他物件引用過該物件），或對該物件的唯一引用是迴圈的，那麼該物件的記憶體即可回收。

setTimeout的第一個引數使用字串而非函式，會引發記憶體洩漏。
閉包、控制檯日誌、迴圈（兩個物件彼此引用，且彼此保留時，就會產生一個迴圈）

  • 用JS實現千位分隔符？
function commafy(num) {
    return num && num
        .toString()
        .replace(/(d)(?=(d{3})+.)/g, function ($0, $1) {
            return $1 + `,`;
        })
}
  • 使用JS實現獲取副檔名？
function getFileExtension(filename) {
    return filename.splice((filename.ladtIndexOf(".") - 1 >>> 0) + 2);
}

String.lastIndexOf()方法返回指定值，在呼叫該方法的字串中最後出現的位置，如果沒找到則返回-1。
對於filename和.hiddenfile，lastIndexOf的返回值分別為0和-1。
String.prototype.splice()從計算的索引提取檔案的副檔名。如果索引比檔名的長度大，結果為""。

  • webpack熱更新實現原理？

1、webpack編譯期，為需要熱更新的entry注入熱更新程式碼（EventSource通訊）
2、頁面首次開啟後，服務端與客戶端通過EventSource建立通訊渠道，把下一次的hash返回前端
3、客戶端獲取到hash，這個hash將作為下一次請求服務端hot-update.js和hot-update.json的hash
4、修改頁面程式碼，webpack監聽到檔案修改後，開始編譯，編譯完成後傳送build訊息給客戶端
5、客戶端獲取到hash，成功後客戶端構造hot-update.js的script連結，然互毆插入主文件
6、hot-update.js插入成功後，執行hotAPI的createRecord和reload方法，獲取到元件的render方法，重新render元件，從而實現UI無重新整理更新。

ES6

  • Object.is()與原來的比較操作符===、==的區別？

==判斷，會在比較時進行型別轉換
===判斷（嚴格判斷），比較時不進行隱式型別轉換，型別不同就會返回false

Object.is()在===判斷的基礎上特別處理了NaN、-0和+0，保證-0和+0不再相同，但Object.is(NaN,NaN)會返回true

  • 如何進行頁面重構？

網站重構：在不改變UI的情況下對網站進行優化，在擴充套件的同時保持一致的UI。

對傳統的網站來說，重構通常是：
1、表格table佈局改為div+css
2、使網站前端相容於現代瀏覽器
3、對於移動平臺的優化
4、針對SEO進行優化

深層次的網站重構應該考慮：
1、減少程式碼間的耦合
2、讓程式碼保持彈性
3、嚴格按照規範編寫程式碼
4、設計可擴充套件的API
5、代替舊有的框架、語言
6、增強使用者體驗
7、對速度的優化

1、壓縮JS、CSS、image等前端資源（通常是由伺服器來解決）
2、程式的效能優化（資料讀寫）
3、採用CDN來加速資源載入
4、對於JS DOM的優化
5、HTTP伺服器的檔案快取

  • 列舉IE與其他瀏覽器不同的特性？

事件：觸發事件的元素被認為是目標（target）。在IE中，目標包含在event物件的SRCElement屬性；

獲取字元程式碼：如果按鍵代表一個字元（shift、Ctrl、Alt除外），IE的keyCode會返回字元程式碼unicode，DOM中按鍵的程式碼和字元是分離的，要獲取字元程式碼，需要使用charCode屬性；

阻止某個事件的預設行為：IE中阻止某個事件的預設行為，必須將returnValue屬性設定為false，火狐瀏覽器中需要呼叫preventDefault()方法。

停止事件冒泡，IE中阻止事件進一步冒泡，需要設定cancelBubble為true，火狐中需要呼叫stopPropagation()。

  • 解析一下優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是舊式瀏覽器，則程式碼會針對舊版本的IE進行降級處理，使之在舊式瀏覽器上以某種形式降級體驗而不至於完全不能使用。
例如：border-shadow

漸進增強：從被所有瀏覽器支援的基本能工開始，逐步地新增那些只有新版本瀏覽器才支援的功能，向頁面增加不影響基礎瀏覽器的額外樣式和功能。當瀏覽器支援時，它們會自定地呈現出來併發揮作用。
例如：預設使用flash上傳，但如果瀏覽器支援HTML5的檔案上傳功能，則使用HTML5實現更好的體驗。

  • Web應用從伺服器主動推送Data到客戶端有哪些方式？

HTML5提供的WebSocket
不可見的iframe
WebSocket通過flash
XHR長時間連線
XHR Multipart Streaming
<script>標籤的長時間連線（可跨域）

  • 談一下Node的優點和缺點？

優點：
因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求；
因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好很多。
此外，與Node代理伺服器互動的客戶端程式碼是由JS語言編寫，因此客戶端和伺服器端都用同一種語言編寫。

缺點：
Node是一個相對新的開源專案，所以不太穩定，總是一直在變，而且缺少足夠多的第三方庫支援。

  • 你使用過哪些前端效能優化的方法？

1、減少HTTP請求次數：CSS Sprites、JS、CSS原始碼壓縮、控制圖片大小；網頁Gzip，CDN託管，data快取，圖片伺服器
2、前端模板：JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
3、用innerHTML代替DOM操作，減少DOM操作次數，優化JS效能
4、當需要設定的樣式很多時，設定className而不是直接操作style
5、少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
6、避免使用CSS表示式，又稱動態屬性
7、圖片預載入，將樣式表放在頂部，將指令碼放在底部，加上時間戳
8、避免在頁面的主題佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。

對普通的網站有一個統一的思路，就是儘量向前端優化、減少資料庫操作、減少磁碟IO讀寫。
向前端優化指的是，在不影響功能和體驗的情況下，
能在瀏覽器執行的不在伺服器端執行，
能在快取伺服器上直接返回的不要到應用伺服器執行，
程式能直接取得的結果不要到外部取得，
本機內能取得的資料不要到遠端取得，
記憶體能取到的不要到磁碟上取，
快取中有得不要去資料庫查詢。

減少資料庫操作，指的是減少更新次數、快取結果減少查詢次數、將資料庫執行的操作儘可能的讓程式完成（例如join查詢），
減少磁碟IO指儘量不適用檔案系統作為快取、減少讀寫檔案次數等。

  • HTTP狀態碼有哪些？分別代表什麼？

簡單版：
100–continue：繼續，一般在傳送post請求時，已傳送http header之後伺服器端將返回此資訊表示確認，之後傳送具體引數資訊。
200–OK：正常返回資訊
201–created：請求成功並且伺服器建立了新的資源
202–Accepted：伺服器已接受請求，但尚未處理

301–Moved Permanently：請求的網頁已經永久移動到新的位置
302–Found：臨時性重定向
303–See Other：臨時性重定向，且總是使用GET請求新的URI
304–Not Modified：自從上次請求後，請求的網頁未修改過
400–Bad Request：伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求

401–Unauthorized：請求未授權
403–Forbidden：禁止訪問
404–Not Found：找不到如何與URI相匹配的資源

500–Internal Server Error：最常見的伺服器端錯誤
503–Server Unavailable：伺服器端暫時無法處理請求（可能是過載或維護）

完整版：
1**（資訊類）：表示接收到請求並且繼續處理
100——客戶必須繼續發出請求
101——客戶要求伺服器根據請求轉換HTML協議版本

2**（響應成功）：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源傳送回客戶端
201——提示知道新檔案的URL
202——接受和處理、但處理未完成
203——返回資訊不確定或不完整
204——請求收到，但返回資訊為空
205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案
206——伺服器已經完成了部分使用者的GET請求

3**（重定向類）：為了完成指定的動作，必須接受進一步處理
300——請求的資源可在多處得到
301——本網頁被永久性轉移到另一個URL
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續通過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的request。
303——建議客戶訪問其他URL或訪問方式
304——自從上次請求後，請求的網頁未修改過，伺服器返回此響應時，不會返回網頁內容，代表上次的文件已經被快取，還可以繼續使用。
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的程式碼，現行版本中不再使用
307——申明請求的資源臨時性刪除

4**（客戶端錯誤類）：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被伺服器所理解

401——請求未經授權，這個狀態碼必須和WWW-Authenticate報頭域一起使用
HTTP 401.1——未授權：登入失敗
HTTP 401.2——未授權：伺服器配置問題導致登入失敗
HTTP 401.3——ACL 禁止訪問資源
HTTP 401.4——未授權：授權被篩選器拒絕
HTTP 401.5——未授權：ISAPI或CGI授權失敗

402——保留有效ChargeTo頭響應

403——禁止訪問，伺服器收到請求，但是拒絕提供服務
HTTP 403.1——禁止訪問：禁止可執行訪問
HTTP 403.2——禁止訪問：禁止讀訪問
HTTP 403.3——禁止訪問：禁止寫訪問
HTTP 403.4——禁止訪問：要求SSL
HTTP 403.5——禁止訪問：要求SSL 128
HTTP 403.6——禁止訪問：IP地址被拒絕
HTTP 403.7——禁止訪問：要求客戶證照
HTTP 403.8——禁止訪問：禁止站點訪問
HTTP 403.9——禁止訪問：連線的使用者過多
HTTP 403.10——禁止訪問：配置無效
HTTP 403.11——禁止訪問：密碼更改
HTTP 403.12——禁止訪問：對映器拒絕訪問
HTTP 403.13——禁止訪問：客戶證照已被吊銷
HTTP 403.15——禁止訪問：客戶訪問許可過多
HTTP 403.16——禁止訪問：客戶證照不可信或者無效
HTTP 403.17——禁止訪問：客戶證照已經到期或者尚未生效

404——一個404錯誤表明可連線伺服器，但伺服器無法取得所請求的網頁，請求資源不存在。
405——使用者在Request-Line欄位定義的方法不予許
406——根據使用者傳送的Accept頭，請求資源不可訪問
407——類似401，使用者必須首先在代理伺服器上得到授權
408——客戶端沒有在使用者指定的時間內完成請求
409——對當前資源狀態，請求不能完成
410——伺服器上不再有此資源，且無進一步的參考地址
411——伺服器拒絕使用者定義的Content-Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大於伺服器允許的大小
414——請求的資源URL長於伺服器允許的長度
415——請求的資源不支援請求專案格式
416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有Range指示值，請求也不包含If-Rane請求頭欄位
417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求。

5**（服務端錯誤類）：伺服器不能正確執行一個正確的請求
HTTP 500——伺服器遇到錯誤，無法完成請求
HTTP 500.100——內部伺服器錯誤——ASP錯誤
HTTP 500.11——伺服器關閉
HTTP 500.12——應用程式重新啟動
HTTP 500.13——伺服器太忙
HTTP 500.14——應用程式無效
HTTP 500.15——不允許請求global.asa

Error 501——未實現

HTTP 502——閘道器錯誤
HTTP 503——由於超載或停機維護，伺服器目前無法使用，一段時間後可能恢復正常

  • 一個頁面從輸入URL到頁面載入顯示完成，這個過程發生了什麼？（流程越詳細越好）

從URL規範、HTTP協議、DNS、CDN、資料庫查詢到瀏覽器解析、CSS規則構建、layout、paint、onload/domready、JS執行、JS API繫結等

1、瀏覽器會開啟一個執行緒來處理這個請求，對URL分析判斷如果是HTTP協議就按照Web方式來處理；
2、呼叫瀏覽器核心中的對應方法，比如webview 中的loadUrl方法；
3、通過DNS解析獲取網址的IP地址，設定UA等資訊發出第二個GET請求；
4、記性HTTP協議會話，客戶端傳送報頭（請求報頭）；
5、進入到web伺服器上的Web Server，如Accept、Tomcat、Node.js等伺服器；
6、進入部署好的後端應用，如PHP、Java、JavaScript、python等，找到對應的請求處理；
7、處理結束反饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與伺服器最後修改時間對比，一致則返回304；
8、瀏覽器開始下載HTML文件（響應報頭，狀態碼200），同時是使用快取；
9、文件樹建立，根據標記請求所需要指定MIME型別的檔案（比如css、js），同時設定了cookie；
10、頁面開始渲染DOM，JS根據DOM API操作DOM，執行事件繫結等，頁面顯示完成。

瀏覽器把請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；
伺服器交給後臺處理完成後返回資料，瀏覽器接收檔案；
瀏覽器對載入到的資源進行語法解析，建立相應的內部資料結構；
載入解析好的資原始檔，渲染頁面顯示內容。

相關文章