前端面試知識點

時間 2019-11-08

原文原文鏈接

HTMLjavascript

1.Doctype做用？標準模式與兼容模式各有什麼區別css

（1）<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
（2）標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。
</html>

2.HTML5 爲何只須要寫 <!doctype html>？html

HTML5 不基於 SGML(標準通用標記語言)，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3.行內元素有哪些？塊級元素有哪些？空(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>

4.頁面導入樣式時，使用link和@import有什麼區別？html5

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

5.介紹一下你對瀏覽器內核的理解？java

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

6.常見的瀏覽器內核有哪些？node

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

http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.htmljquery

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？git

* 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聲明\新增的結構元素\功能元素

8.簡述一下你對HTML語義化的理解？程序員

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

9.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

https://segmentfault.com/a/1190000000732617

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了
下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：
1、頁面頭部像下面同樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
3、在離線狀態時，操做window.applicationCache進行需求實現。

10.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且
進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，
若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

11.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

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

有期時間：
    localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
    sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
    cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：
將登錄信息等重要信息存放爲SESSION
其餘信息若是須要保留，能夠放在COOKIE中

12.iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

13.Label的做用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for="male">Male</label>
 <input type="radio" name="sex" id="male" />

14.HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

15.如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
也能夠調用localstorge、cookies等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，http://blog.csdn.net/nx8823520/article/details/30478859
咱們經過監聽事件，控制它的值來進行頁面信息通訊；

16.webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR

17.頁面可見性（Page Visibility API）能夠有哪些用途？

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；
1.節省服務器資源，Ajax 輪詢這類服務器資源佔用經常會被忽略，關閉這種請求能夠節省資源。
2.節省內存消耗。
3.節省帶寬消耗。http://www.jb51.net/html5/160924.html

18.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

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

19.網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試

20.title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<b>是展現強調內容。

i內容展現爲斜體，em表示強調的文本；

Physical Style Elements -- 天然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。
</b></strong>

CSS

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

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

2.CSS選擇符有哪些？哪些屬性能夠繼承？

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標籤選擇器（div, h1, p）
    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 ;

3.CSS優先級算法如何計算？

*   優先級就近原則，同權重狀況下樣式定義最近者爲準;
*   載入樣式以最後載入的定位爲準;

優先級爲:
   !important >  id > class > tag
    important 比 內聯優先級高

4.CSS3新增僞類有那些？

 舉例：
    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 </p><p> 元素。
    p:last-of-type  選擇屬於其父元素的最後 </p><p> 元素的每一個 </p><p> 元素。
    p:only-of-type  選擇屬於其父元素惟一的 </p><p> 元素的每一個 </p><p> 元素。
    p:only-child        選擇屬於其父元素的惟一子元素的每一個 </p><p> 元素。
    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 </p><p> 元素。

    :after          在元素以前添加內容,也能夠用來作清除浮動。
    :before         在元素以後添加內容
    :enabled        
    :disabled       控制表單控件的禁用狀態。
    :checked        單選框或複選框被選中。

5.如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

給div設置一個寬度，而後添加margin:0 auto屬性
div{
    width:200px;
    margin:0 auto;
 }

居中一個浮動元素

<div class="box">

<p>我是浮動的</p>
<p>我也是居中的</p>
</div>

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}



讓絕對定位的div居中
  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

6.display有哪些值？說明他們的做用。

block         象塊類型元素同樣顯示。
  inline          缺省值。象行內元素類型同樣顯示。
  inline-block  象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item     象塊類型元素同樣顯示，並添加樣式列表標記。
  table         此元素會做爲塊級表格來顯示
  inherit       規定應該從父元素繼承 display 屬性的值

7.position的值relative和absolute定位原點是？

absolute
    生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
  fixed （老IE不支持）
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。
  relative
    生成相對定位的元素，相對於其正常位置進行定位。
  static
    默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
  inherit
    規定從父元素繼承 position 屬性的值。

static(靜態) 沒有特別的設定，遵循基本的定位規定，不能經過z-index進行層次分級。
    relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過z-index進行層次分級。
    absolute(絕對定位) 脫離文檔流，經過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，absolute元素將以body座標原點進行定位，能夠經過z-index進行層次分級。
    fixed（固定定位） 這裏所固定的參照對像是可視窗口而並不是是body或是父級元素。可經過z-index進行層次分級。

http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

8.CSS3有哪些新特性？

 新增各類CSS選擇器    （: not(.input)：全部 class 不是「input」的節點）
  圓角           （border-radius:8px）
  多列布局        （multi-column layout）
  陰影和反射      （Shadow\Reflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  線性漸變      （gradient）
  旋轉          （transform）
  增長了旋轉,縮放,定位,傾斜,動畫，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

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

把上、左、右三條邊隱藏掉（顏色設爲 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

10.常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用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和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
          background-color:#f1ee18;/*全部識別*/
          .background-color:#00deff\9; /*IE六、七、8識別*/
          +background-color:#a200ff;/*IE六、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/
      }


*  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
   Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。


*  Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
   可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

11.li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

12.absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：
一、若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
二、不然,則由這個祖先元素的 padding box 構成。
若是都找不到，則爲 initial containing block。

補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位爲absolute/relative的元素
3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

　　http://www.caopeng.net/2011/02/what-is-the-css-containing-block-containing-block/

13.對BFC規範(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。）
 一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
 不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

http://www.cnblogs.com/vitruvi/p/4303891.html

14.css定義的權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}

若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

15.請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式

浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到 塊級框的佈局而只會影響內聯框（一般是文本）的排列，
文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣
，可是隻能左右浮動。 
正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，
使其包含框表現出正常的高度。 
1）添加額外標籤 <div style="clear:both;"></div>  2）父元素設置display:table  3）使用:after 僞元素  .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; }

16.png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

GIF格式支持背景透明,GIF格式支持動畫,GIF格式支持無損壓縮
Png是徹底支持alpha透明的無損數據
JPG圖片使用更有效的有損壓縮算法
GIF 的適用範圍是：小圖標、平鋪背景等色彩比較少的小型圖片
ebp格式：Google開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，
JPEG/JFIF是最廣泛在萬維網（World Wide Web）上被用來儲存和傳輸照片的格式

17.display:inline-block 何時會顯示間隙

在編輯器裏寫代碼的時候，同級別的標籤不寫在同一行以保持代碼的整齊可讀性，即inline-block佈局的元素在編輯器裏不在同一行，即存在換行符，所以這就是著名的inline-block「換行符/空格間隙問題」
移除空格、使用margin負值、使用font-size:0、

18.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

19.font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？

italic    瀏覽器會顯示一個斜體的字體樣式。
oblique    瀏覽器會顯示一個傾斜的字體樣式。

20.讓頁面裏的字體變清晰，變細用CSS怎麼作

-webkit-font-smoothing: antialiased;

21.怎麼讓Chrome支持小於12px 的文字

-webkit-transform:scale(0.8)

22.設置元素浮動後，該元素的display值是多少

自動變成display:block

23.你對line-height是如何理解的

行高」顧名思意指一行文字的高度。具體來講是指兩行文字間基線之間的距離.vertical-align中有top,middle,baseline,bottom與之是由關聯的
若是一個標籤沒有定義height屬性(包括百分比高度)，那麼其最終表現的高度必定是由line-height起做用
把line-height值設置爲height同樣大小的值能夠實現單行文字的垂直居中

line-height代替了height，其緣由在於：IE6，IE7下，相似inline-block屬性的元素裏若是有block屬性的元素，若是該block haslayout，則該標籤會衝破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用line-height代替height。

24.如何修改chrome記住密碼後自動填充表單的黃色背景

input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ;
border : 1px solid #CCC !important ;
}

25.::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用。

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
對於CSS2以前已有的僞元素，好比:before，單冒號和雙冒號的寫法::before做用是同樣的。
提醒，若是你的網站只須要兼容webkit、firefox、opera等瀏覽器，建議對於僞元素採用雙冒號的寫法，若是不得不兼容IE瀏覽器，仍是用CSS2的單冒號寫法比較安全

「僞元素」，顧名思義。它建立了一個虛假的元素，並插入到目標元素內容以前或以後

26.什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

響應式網站設計(Responsive Web design)的理念是：集中建立頁面的圖片排版大小，能夠智能地根據用戶行爲以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的佈局。

基本原理: 媒體查詢 @media

兼容IE可使用JS輔助一下來解決

27.全屏滾動的原理是什麼？用到了CSS的那些屬性？

全屏滾動的原理
1.js動態獲取屏幕的高度。
獲取屏幕的高度，設置每一屏幕的高度。
2.監聽mousewheel事件。
監聽mousewheel事件，並判斷滾輪的方向，向上或向下滾動一屏。

28.元素豎向的百分比設定是相對於容器的高度嗎

height屬性取值百分比，是現對於容器高度的
對於margin-top、margin-bottom、padding-top、padding-bottom這些豎直方向的內外邊距屬性的百分比取值，
參考的實際上是容器的寬度而不是高低。

29.margin和padding分別適合什麼場景使用

◆什麼時候應當使用margin
須要在border外側添加空白時。
空白處不須要背景（色）時。
上下相連的兩個盒子之間的空白，須要相互抵消時。如15px+20px的margin，將獲得20px的空白。
◆什麼時候應當時用padding
須要在border內測添加空白時。
空白處須要背景（色）時。
上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px+20px的padding，將獲得35px的空白。
◆瀏覽器兼容性問題
在IE5.x、IE6中，爲float的盒子指定margin時，左側margin可能會變成兩倍的寬度。經過改用padding或指定盒子爲display:inline能夠解決。

30.在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

網頁設計中爲啥少用奇數字體？
1、UI設計師的緣由
多數設計師用的設計軟件（如：ps）大多數都是偶數，因此前端工程師通常都是用偶數字體
2、瀏覽器的緣由
其一是爲了遷就ie6，萬惡的ie6會把定義爲13px的字渲染成14px，你能夠寫個頁面試試
還有一個緣由是，偶數寬的漢字，好比12px寬的漢字，去掉1像素的間距，填充了像素的實際寬是11px，這樣漢字的中豎線左右是平分的，以「中」這個字爲例，在12像素時，豎線在中間，左右各5像素，顯得均衡。
其二像谷歌一些比較流行的瀏覽器通常會有個默認的最小字體，並且對奇數字體渲染的不太好看
 
3、實際應用
偶數字號相對更容易和 web 設計的其餘部分構成比例關係。好比：當我用了 14 px 的正文字號，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另外一些地方用 14 × 1.5 = 21 px 的標題字號。
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每一個字佔的空間大了 1 px，但點陣沒變），因而略顯稀疏

31.瀏覽器是怎樣解析CSS選擇器的

瀏覽器是從右往左匹配css選擇器的
若是你從選擇器的最右邊開始匹配，有很大的可能不匹配，而後結束。若是匹配就須要作一些更多的工做，但只與選擇器的深度成比例，通常不會太多。

JavaScript

1.介紹js的基本數據類型。

 Undefined、Null、Boolean、Number、String

2.介紹js有哪些內置對象？

Object 是 JavaScript 中全部對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其餘對象：Function、Arguments、Math、Date、RegExp、Error

3.說幾條寫JavaScript的基本規範？

使用規範有意義的變量名
不要使用全局函數。
Switch語句必須帶有default分支

4.JavaScript原型，原型鏈 ?

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，
若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，
因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。
關係：instance.constructor.prototype = instance.__proto__

更多見http://www.cnblogs.com/myzy/p/6083141.html，http://www.cnblogs.com/wangfupeng1988/p/3979533.html

5.JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

棧：原始數據類型（Undefined，Null，Boolean，Number、String） 
堆：引用數據類型（對象、數組和函數）

兩種類型的區別是：存儲位置不一樣；
原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中得到實體

6.Javascript如何實現繼承

1、構造繼承
2、原型繼承
3、實例繼承
4、拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性
  }

7.javascript建立對象的幾種方式？

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用。

1、對象字面量的方式   

    person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2、用function來模擬無參的構造函數

    function Person(){}
    var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class
    person.name="Mark";
    person.age="25";
    person.work=function(){
    alert(person.name+" hello...");
    }
    person.work();

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

    function Pet(name,age,hobby){
       this.name=name;//this做用域：當前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象
    maidou.eat();//調用eat方法

4、用工廠方式來建立（內置對象）

     var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

5、用原型方式來建立

    function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

5、用混合方式來建立

    function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我如今賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

8.Javascript做用鏈域?

全局函數沒法查看局部函數的內部細節，但局部函數能夠查看其上層的函數細節，直至全局細節。
當須要從局部函數查找某一屬性或方法時，若是當前做用域沒有找到，就會上溯到上層做用域查找，
直至全局函數，這種組織形式就是做用域鏈。

9.eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。
由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')')

10.什麼是window對象? 什麼是document對象?

[window對象]  它是一個頂層對象，即瀏覽器的窗口。
Dom，翻譯過來就是「文檔對象模型」。這種模型是爲了方便HTML和XML文檔而設計的。Dom這個術語反映3個意思，一是「文檔」，也就是說它的表現形式爲一份文檔（廢話^_^）就是網頁（能夠比較COM（組件對象模型）裏的組件）；二是「對象」，也就是說，其內部是由一個個可操控的對象構成的；三是「模型」，DOM是一個樹形結構，一個能夠用腳本靈活操做的模型。咱們知道，打開任何一個網頁，瀏覽器會首先建立一個窗口，這個窗口就是一個window對象，也是js運行所依附的全局環境對象和全局做用域對象。爲了加載網頁文檔，當前窗口將爲要打開的網頁建立一個document對象，而後將網頁加載到這個document中。
window對象是客戶端javascript最高層對象之一，只要打開瀏覽器窗口，無論該窗口中是否有打開的網頁，當遇到BODY、FRAMESET或FRAME元素時，都會自動創建window對象的實例。另外，該對象的實例也可由window.open()方法建立。因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成： document.write()。　 在窗口中觖發本窗口對象的任何方法和屬性時能夠省去窗口的實例名稱。例如給當前的myWin窗口設置status屬性時，能夠只用status而不用myWin.status。可是，在事件處理中調用location屬性、close()方法或open()方法時必須使用實例名稱。 
Document 對象表明整個HTML 文檔，可用來訪問頁面中的全部元素。
Document 對象是window和frames對象的一個屬性,是顯示於窗口或框架內的一個文檔，可經過 window.document 屬性來訪問。

11.null，undefined 的區別？

null        表示一個對象被定義了，值爲「空值」；
undefined   表示不存在這個值。
typeof undefined
    //"undefined"
    undefined :是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined； 
    例如變量被聲明瞭，但沒有賦值時，就等於undefined

typeof null
    //"object"
    null : 是一個對象(空對象, 沒有任何屬性和方法)；
    例如做爲函數的參數，表示該函數的參數不是對象；
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。

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

 1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。
 2. 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
 3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

詳細說明見：http://www.cnblogs.com/myzy/p/5226985.html

13.什麼是閉包（closure），爲何要用它？

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。
閉包的特性：
1.函數內再嵌套函數
2.內部函數能夠引用外層的參數和變量
3.參數和變量不會被垃圾回收機制回收
//li節點的onclick事件都能正確的彈出當前被點擊的li索引
 <ul>
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<script type="text/javascript">
    var nodes = document.getElementsByTagName("li");
    for(i = 0;i<nodes.length;i+= 1){
        nodes[i].onclick = function(){
            console.log(i+1);//不用閉包的話，值每次都是4
        }(i);
    }
</script>

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在
使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源
由於say667()的內部函數的執行須要依賴say667()中的變量
這是對閉包做用的很是直白的描述

  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() {
        alert(num);
    }
    num++;
    return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//執行結果應該彈出的667

14.javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,

使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲。
默認支持的糟糕特性都會被禁用，好比不能用with，也不能在乎外的狀況下給全局變量賦值;
全局變量的顯示聲明,函數必須聲明在頂層，不容許在非函數代碼塊內聲明函數,arguments.callee也不容許使用；
消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行爲和非嚴格模式的也不相同;

提升編譯器效率，增長運行速度；
爲將來新版本的Javascript標準化作鋪墊。

15.JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
如：{"age":"12", "name":"back"}

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);

16.js延遲加載的方式有哪些？

1：也叫Script DOM Element
2: async="true"
3:defer
async屬性：Html5新屬性。腳本將在下載後儘快執行，做用同defer，可是不能保證腳本按順序執行。他們將在onload事件以前完成。
4.onload時的異步加載.
5.按需異步載入js

17.Ajax 是什麼? 如何建立一個Ajax？

ajax的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。
所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取異步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新

代碼見：http://www.cnblogs.com/myzy/p/5257619.html

18.如何解決跨域問題?

1、document.domain+iframe的設置 解決主域相同而二級域名不一樣的狀況
2.解決主域相同而二級域名不一樣的狀況
4.window.name實現的跨域數據傳輸
3，使用HTML5 postMessage
5，包含一個Access- Control-Allow-Origin的HTTP響應頭
6.JSONP

http://www.cnblogs.com/myzy/p/5230326.html

19.頁面編碼和被請求的資源編碼若是不一致如何處理？

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>

20.模塊化開發怎麼作？

  var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    　　})();
當即執行函數,不暴露私有成員

21.AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

Asynchronous Module Definition，異步模塊定義，全部的模塊將被異步加載，模塊加載不影響後面語句運行。全部依賴某些模塊的語句均放置在回調函數中。

 區別：

    1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.
    2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴能夠就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})

https://segmentfault.com/a/1190000000733959

22.documen.write和 innerHTML的區別

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

23.DOM操做——怎樣添加、移除、移動、複製、建立和查找節點?

（1）建立新節點
  createDocumentFragment()    //建立一個DOM片斷
  createElement()   //建立一個具體的元素
  createTextNode()   //建立一個文本節點
（2）添加、移除、替換、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
  getElementsByTagName()    //經過標籤名稱
  getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
  getElementById()    //經過元素Id，惟一性

24..call() 和 .apply() 的區別？

這兩個方法基本上是一個意思，區別在於 call 的第二個參數能夠是任意類型，而apply的第二個參數必須是數組，也能夠是arguments

25.那些操做會形成內存泄漏？

意外的全局變量,被遺忘的定時器或者回調,沒有清理的DOM元素引用,閉包引發的內存泄漏

26.針對 jQuery 的優化方法？

*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。
 好比：var str=$("a").attr("href");

27.WEB應用從服務器主動推送Data到客戶端有那些方式？

html5提供的Websocket
不可見的iframe
WebSocket經過Flash
XHR長時間鏈接
XHR Multipart Streaming
<script>標籤的長時間鏈接(可跨域)

28.對Node的優勢和缺點提出了本身的見解？

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
  所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
  此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
  所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
  並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

29.你有用過哪些前端性能優化的方法？

 （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。
  對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

30.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 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。
    ]

  完整版
  1**(信息類)：表示接收到請求而且繼續處理
    100——客戶必須繼續發出請求
    101——客戶要求服務器根據請求轉換HTTP協議版本

  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錯誤代表可鏈接服務器，但服務器沒法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
    405——用戶在Request-Line字段定義的方法不容許
    406——根據用戶發送的Accept拖，請求資源不可訪問
    407——相似401，用戶必須首先在代理服務器上獲得受權
    408——客戶端沒有在用戶指定的餓時間內完成請求
    409——對當前資源狀態，請求不能完成
    410——服務器上再也不有此資源且無進一步的參考地址
    411——服務器拒絕用戶定義的Content-Length屬性請求
    412——一個或多個請求頭字段在當前請求中錯誤
    413——請求的資源大於服務器容許的大小
    414——請求的資源URL長於服務器容許的長度
    415——請求資源不支持請求項目格式
    416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
    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：因爲超載或停機維護，服務器目前沒法使用，一段時間後可能恢復正常

31.一個頁面從輸入 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，如 Apache、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，向服務器發起請求；
    服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
    瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
    載入解析到的資源文件，渲染頁面，完成。

32.

JavaScript中的做用域與變量聲明提高？
如何編寫高性能的Javascript？
那些操做會形成內存泄漏？
JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
jQuery.fn的init方法返回的this指的是什麼對象？爲何要返回this？
jquery中如何將數組轉化爲json字符串，而後再轉化回來？
jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
jquery.extend 與 jquery.fn.extend的區別？
jQuery 的隊列是如何實現的？隊列能夠用在哪些地方？
談一下Jquery中的bind(),live(),delegate(),on()的區別？
JQuery一個對象能夠同時綁定多個事件，這是如何實現的？
是否知道自定義事件。jQuery裏的fire函數是什麼意思，何時用？
jQuery 是經過哪一個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
針對 jQuery性能的優化方法？
query 中如何將數組轉化爲json字符串，而後再轉化回來？
Zepto的點透問題如何解決？
jQueryUI如何自定義組件?
需求：實現一個頁面操做不會整頁刷新的網站，而且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
如何判斷當前腳本運行在瀏覽器仍是node環境中？（阿里）
jQuery 的 slideUp動畫，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?
把 Script 標籤放在頁面的最底部的body封閉以前和封閉以後有什麼區別？瀏覽器會如何解析它們？
- 移動端的點擊事件的有延遲，時間是多久，爲何會有？怎麼解決這個延時？（click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是否是要雙擊操做。）
- 知道各類JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)麼? 能講出他們各自的優勢和缺點麼?Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

JQuery一個對象能夠同時綁定多個事件，這是如何實現的？
Node.js的適用場景？
(若是會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?
解釋一下 Backbone 的 MVC 實現方式？
什麼是「前端路由」?何時適合使用「前端路由」? 「前端路由」有哪些優勢和缺點?
知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼?
如何測試前端代碼麼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?
簡述一下 Handlebars 的基本用法？
簡述一下 Handlerbars 的對模板的基本處理流程，如何編譯的？如何緩存的？
用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？
知道什麼是SEO而且怎麼優化麼? 知道各類meta data的含義麼?

requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何緩存的？）

前端學習網站推薦




1. 極客標籤： http://www.gbtags.com/ 2. 碼農週刊： http://weekly.manong.io/issues/ 3. 前端週刊： http://www.feweekly.com/issues 4. 慕課網： http://www.imooc.com/ 5. div.io： http://div.io 6. Hacker News： https://news.ycombinator.com/news 7. InfoQ： http://www.infoq.com/ 8. w3cplus： http://www.w3cplus.com/ 9. Stack Overflow： http://stackoverflow.com/ 10.w3school： http://www.w3school.com.cn/ 11.mozilla： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript