前端開發面試知識點大綱--摘自jackyWHJ

時間 2019-11-16

原文原文鏈接

前端開發面試知識點大綱：
HTML&CSS：
對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應
JavaScript：
數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其餘：
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點：
此條由王子墨發表在前端隨筆
一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
二、DOM操做  ——如何添加、移除、移動、複製、建立和查找節點等。
三、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。
四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型
七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
九、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。
十、JSON  —— 做用、用途、設計結構。

備註：
根據本身須要選擇性閱讀，面試題是對理論知識的總結，讓本身學會應該如何表達。
資料答案不夠正確和全面，歡迎補充答案、題目；最好是如今網上沒有的。
HTML
•Doctype 做用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，
   用什麼文檔類型規範來解析這個文檔。
（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。javascript

http://www.w3help.org/zh-cn/casestudies/002

•行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，
  好比div默認display屬性值爲「block」，成爲「塊級」元素；
  span默認display屬性值爲「inline」，是「行內」元素。
（2）行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：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標籤，而@import是CSS提供的;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;
（4）link方式的樣式的權重高於@import的權重.

•瀏覽器的內核分別是什麼?
* IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

•常見兼容性問題？

•html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas
  用於媒介回放的 video 和 audio 元素
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除
  語意化更好的內容元素，好比 article、footer、header、nav、section 、aside
  表單控件，calendar、date、time、email、url、search
  新的技術webworker, websockt, Geolocation

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

支持HTML5新標籤：
* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

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

•HTML5的離線儲存？
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage  數據在瀏覽器關閉後自動刪除。

•(寫)描述一段語義的html代碼吧。
（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）
就是基於語義化設計原則）
< div id="header">
< h1>標題< /h1>
< h2>專一Web前端技術< /h2>
< /div>

•iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制(6-8目前)，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

•請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

CSS
•介紹一下CSS的盒子模型？
（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border).

•CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？
* 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 ;

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

* 載入樣式以最後載入的定位爲準;

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

CSS3新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked       單選框或複選框被選中。

•如何居中div？如何居中一個浮動元素？
•給div設置一個寬度，而後添加margin:0 auto屬性

div{
width:200px;
margin:0 auto;
}

•居中一個浮動元素
肯定容器的寬高寬500 高 300 的層
設置層的外邊距

.div {
Width:500px ; height:300px;//高度能夠不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
//方便看效果
left:50%;
top:50%;
}

•CSS3有哪些新特性？
  CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器  多背景 rgba

•一個滿屏品字佈局如何設計?

•常常遇到的CSS的兼容性有哪些？緣由，解決方法是什麼？

1. 就是ie6雙倍邊距的問題，在使用了float的狀況下，無論是向左仍是向右都會出現雙倍，最簡單的解決方法就是用display:inline;加到css裏面去。

2. 文字自己的大小不兼容。一樣是font-size:14px的宋體文字，在不一樣瀏覽器下佔的空間是不同的，ie下實際佔高16px，下留白3px，ff下實際佔高17px，上留白1px，下留白3px，opera下就更不同了。解決方案：給文字設定 line-height 。確保全部文字都有默認的 line-height 值。這點很重要，在高度上咱們不能容忍1px 的差別。

3. ff下容器高度限定，即容器定義了height以後，容器邊框的外形就肯定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。因此不要輕易給容器定義height。

4. 還討論內容撐破容器問題，橫向上的。若是float 容器未定義寬度，ff下內容會盡量撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器須要定義width。

5. 浮動的清除，ff下不清除浮動是不行的。

6. mirrormargin bug，當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現相似問題，都是ie6下的特產，該類bug 出現的狀況較爲複雜，遠不僅這一種出現條件，還沒系統整理。解決方案：外層元素設定border 或設定float。

7. 吞吃現象，限於篇幅，我就不展開了。仍是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門爲解決ie6 bug而生的。

8. 註釋也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案，ie6的這個bug 下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「<!–[if !IE]> picRotate start <![endif]–>」方法寫註釋。

9. <li/>里加 float <div/>，這是一個典型的，棘手的兼容問題，但願引發你們正視，給li 不一樣的屬性會有不一樣的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不着頭腦，因爲問題的複雜性，將另起一文專門討論該問題。在《ul使用心得》一文裏有相關成果，卻沒給出問題解決的過程。

10. img下的留白。解決方案：給img設定 display:block。

11. 失去line-height。<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。解決方案：讓img 和文字都 float起來。

12. 連接的hover狀態。a:hover img{width:300px} 咱們想讓鼠標hover時，連接裏包含的圖片寬度變化，惋惜在ie6下無效，ie七、ff下有效。

13. 非連接的hover狀態。div:hover{} 這樣的樣式ie6是不認的，在ie七、ff下才有效果。

14. ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie七、ff不支持。

15. ie6下嚴重的bug，float元素如沒定義寬度，內部若有div定義了height或zoom:1，這個div就會佔滿一整行，即便你給了寬度。float元素若是做爲佈局用或複雜的容器，都要給個寬度的。

16. ie6下的bug，絕對定位的div下包含相對定位的div，若是給內層相對定位的div高度height具體值，內層相對層將具備100%的width值，外層絕對層將被撐大。解決方案給內層相對層float屬性。

17. ie6下的bug，<head></head>內有<base target=」_blank」/>的狀況下，position:relative層下的float層內文字沒法選中。

18. 終於來了個ff的缺點。width:100%這個東西在ie裏用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結束，如此，只能給中間的全部浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。

•爲何要初始化CSS樣式。
- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

•absolute的containing block計算方式跟正常流有什麼不一樣？

http://www.w3help.org/zh-cn/kb/008/

•列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？
  1.
  block 象塊類型元素同樣顯示。
  none 缺省值。象行內元素類型同樣顯示。
  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
table	此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table	此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group	此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group	此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group	此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row	此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group	此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column	此元素會做爲一個單元格列顯示（相似 <col>）
table-cell	此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption	此元素會做爲一個表格標題顯示（相似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。php 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。css
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。html 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。前端
relative	生成相對定位的元素，相對於其正常位置進行定位。html5 所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。java
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

什麼是文檔流？jquery

將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流。git

只有三種狀況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。程序員

使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個，不然left/right/top/bottom屬性會使用它們的默認值 auto ，這將致使對象聽從正常的HTML佈局規則，在前一個對象以後當即被呈遞，簡單講就是都變成relative，會佔用文檔空間，這點很是重要，不少人使用absolute定位後發現沒有脫離文檔流就是這個緣由。

•position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
position控制元素是否在文檔流中，static和relative都存在於文檔流，fixed直接脫離文檔流鎖定在以整個文檔爲offsetParent的位置，而absolute也是直接脫離文檔流鎖定在最近的一個有position屬性的parent的位置上。
display控制佈局方式，block以block方式佈局，inline以inline方式佈局，inline-block以inline-block方式佈局，而全部的佈局方式的前提是元素在文檔流當中，因此若是position設置爲脫離文檔流，display就隻影響子元素的佈局了。display:none直接讓元素脫離文檔流同樣的佈局方式。
margin collapse也是在文檔流時纔會有效。
overflow指的是當超出佈局邊界時的顯示效果，跟怎麼佈局不要緊。
float也是直接脫離文檔流了。

margin collapse在position跟display、overflow、float下是怎麼展示的？'display'、'position' 和 'float' 的相互關係。

兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊

浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其餘元素的 margin 摺疊

建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊

元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

http://blog.csdn.net/chen_zw/article/details/8741365

http://www.cnblogs.com/joe235/archive/2011/03/03/1970006.html

http://www.w3help.org/zh-cn/kb/006/

•對BFC規範的理解？
（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。）

什麼是BFC(Block Formatting Context)，簡單講，它是提供了一個獨立佈局的環境，每一個BFC都遵照同一套佈局規則。例如，在同一個BFC內，盒子會一個挨着一個的排，相鄰盒子的間距是由margin決定且垂直方向的margin會重疊。而float和clear float也只對同一個BFC內的元素有效。

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣）。

•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{
}

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

•解釋下浮動和它的工做原理？清除浮動的技巧
浮動元素脫離文檔流，不佔據文檔空間。  浮動"從流程中被移除出來", 可是與絕對位置的元素（層次）不一樣，浮動是在他們前面的最後一個塊元素以後直接被顯示出來（就像塊盒同樣）。若是該浮動是在一個「行塊」中，該浮動的上邊界被放置在行塊頂部的水平上。當除此之外，浮動與絕對元素類似，原先的塊盒會徹底忽略浮動和AP元素。那些靜態的塊盒知識保持一個接一個地」跟隨「，就好像沒有浮動不在那裏同樣。
1.使用空標籤清除浮動。
   這種方法是在全部浮動標籤後面添加一個空標籤定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。  #layout:after{display:block;clear:both;content:」";visibility:hidden;height:0;}

咱們將現有已知的清楚浮動元素方法羅列下：

採用一個HTML標籤，以及css的clear屬性，來手工清理浮動；
採用僞類:after，動態創建一個塊元素，設定 clear 屬性，清理以前的浮動元素；
採用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)設定使父容器包含浮動元素；
採用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素；
使用 TABLE 以及 TD 標籤做爲浮動元素容器；
採用 float:left/float:right 方式將父元素一樣浮動，就能夠包含浮動內容；
在 IE 6/7 的標準文檔模式中設置「width/height/zoom」等樣式來自動清理浮動。

•用過媒體查詢，針對移動端的佈局嗎？

•使用 CSS 預處理器嗎？喜歡那個？

Sass、LESS和Stylus

JavaScript
•JavaScript原型，原型鏈 ? 有什麼特色？

構造函數，原型對象，實例的關係是：JavaScript中，每一個函數都有一個prototype屬性，這是一個指針，指向了這個函數的原型對象。這個對象包含這個函數建立的實例的共享屬性和方法。也就是說原型對象中的屬性和方法是全部實例共享。而這個原型對象有一個constructor屬性，指向了該構造函數。每一個經過該構造函數建立的對象都包含一個指向原型對象的內部指針__proto__。原型鏈做爲實現繼承的主要方法，其基本思想是：讓原型對象等於另外一個類型的實例，這樣原型對象將包含一個指向另外一個原型的指針，相應的，另外一個原型中也包含着一個指向另外一個構造函數的指針，假如另外一個原型又是另外一個類型的實例，如此層層遞進，就構成了實例與原型的鏈條，這個鏈條就稱之爲 原型鏈.

•eval是作什麼的？
它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

•null，undefined 的區別？

null

這是一個對象，可是爲空。由於是對象，因此 typeof null 返回 'object' 。

null 是 JavaScript 保留關鍵字。

null 參與數值運算時其值會自動轉換爲 0 ，所以，下列表達式計算後會獲得正確的數值：

　　　　表達式：123 + null　　　　結果值：123

　　　　表達式：123 * null　　　　結果值：0

undefined

　　undefined是全局對象（window）的一個特殊屬性，其值是未定義的。但 typeof undefined 返回 'undefined' 。

雖然undefined是有特殊含義的，但它確實是一個屬性，並且是全局對象（window）的屬性。請看下面的代碼：

    alert('undefined' in window);   //輸出：true
     var anObj = {};
     alert('undefined' in anObj);    //輸出：false

從中能夠看出，undefined是window對象的一個屬性，但卻不是anObj對象的一個屬性。

•寫一個通用的事件偵聽器函數。

// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
// 頁面加載完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式來綁定事件
// 參數：操做的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、須要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行爲
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};

•Node.js的適用場景？
高併發、聊天、實時消息推送

•介紹js的基本數據類型。
number,string,boolean,object,undefined

•Javascript如何實現繼承？
經過原型和構造器

•["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix) 但 map 傳了 3 個 (element, index, array)

•如何建立一個對象? （畫出此對象的內存圖）

function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() { alert(this.name) }
}

•談談This對象的理解。
this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。做爲方法調用，那麼this就是指這個對象

•事件是？IE與火狐的事件機制有什麼區別？如何阻止冒泡？
1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。
2. 事件處理機制：IE是事件冒泡、火狐是事件捕獲；
3. ev.stopPropagation();

•什麼是閉包（closure），爲何要用它？
執行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

所謂「閉包」，就是在構造函數體內定義另外的函數做爲目標對象的方法函數，而這個對象的方法函數反過來引用外層函數體中的臨時變量。這使得只要目標對象在生存期內始終能保持其方法，就能間接保持原構造函數體當時用到的臨時變量值。儘管最開始的構造函數調用已經結束，臨時變量的名稱也都消失了，但在目標對象的方法內卻始終能引用到該變量的值，並且該值只能通這種方法來訪問。即便再次調用相同的構造函數，但只會生成新對象和方法，新的臨時變量只是對應新的值，和上次那次調用的是各自獨立的。

•"use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？
使用"use strict"指令的目的是說明（腳本或函數中）後續的代碼將會解析爲嚴格代碼(strict code)。若是頂層（不存在任何函數內的）代碼使用了"use strict"指令，那麼它們就是嚴格代碼。若是在函數體內定義，則函數總體使用的是嚴格代碼。嚴格代碼和非嚴格代碼之間的區別以下：
1）在嚴格模式中禁止使用with語句;
2）在嚴格模式中，全部變量都要先聲明，若是給一個未聲明的變量、函數、函數參數，catch從句參數或全局對象的屬性賦值，將會throw一個引用錯誤（在非嚴格模式下，這種隱式聲明的全局變量的方法是給全局對象添加一個新屬性）
3）在嚴格模式中，調用的函數（不是方法）中的一個this值是undefined。（在非嚴格模式下，調用函數中的this值老是全局對象）。能夠利用這種特性來判斷js實現是否支持嚴格模式。
4）一樣，在嚴格模式中，當經過call()或apply()來調用函數時，其中的this值就是經過call()或apply()傳入的第一個參數（在非嚴格模式下，null和undefined值被全局對象和轉換爲對象的非對象值所代替）
5）在嚴格模式下，給只讀屬性賦值和給不可擴展的對象建立新成員都將拋出一個類型錯誤異常（在非嚴格模式下，這些操做只是簡單的操做失敗，不會拋錯）
6）在嚴格模式下，傳入eval_r()的代碼不能在調用程序所在的上下文中聲明變量或定義函數，而在非嚴格模式中是能夠這樣的。相反，變量和函數定義是在eval_r()建立的新做用域中，這個做用域在eval_r()返回時就棄用了。

嚴格模式的一大目標是讓你能更快更方便的調試.strict模式會讓你面臨因爲第三方代碼沒有爲嚴格模式作好準備而引起的問題。在嚴格模式中，標識符eval和arguments看成關鍵字，它們的值是不能更改的。嚴格模式中限制了對調用棧的檢測能力，在嚴格模式的函數中，arguments.caller和arguments.callee都會拋出一個類型錯誤異常。

•如何判斷一個對象是否屬於某個類？
  使用instanceof （待完善）
if(a instanceof Person){
   alert('yes');
}

•new操做符具體幹了什麼呢?
   一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
   二、屬性和方法被加入到 this 引用的對象中。
   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

•Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
hasOwnProperty

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

•js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需異步載入js

•ajax 是什麼?

•同步和異步的區別?

•如何解決跨域問題?
jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面
JSONP的最基本的原理是：動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。 建立一個回調函數，而後在遠程服務上調用這個函數而且將 JSON 數據形式做爲參數傳遞，完成回調。也就是將你本身在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調。

•模塊化怎麼作？
當即執行函數,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

•AMD（Modules/Asynchronous-Definition）、CMD（Common 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()
...
})
雖然 AMD 也支持 CMD 的寫法，同時還支持將 require 做爲依賴項傳遞，但 RequireJS 的做者默認是最喜歡上面的寫法，也是官方文檔裏默認的模塊定義寫法。

3. AMD 的 API 默認是 一個當多個用，CMD 的 API 嚴格區分，推崇 職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都 簡單純粹。

•異步加載的方式有哪些？
  (1) defer，只支持IE
  (2) async：
  (3) 建立script，插入到DOM中，加載完畢後callBack

http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html

•documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML能夠重繪頁面的一部分

•.call() 和 .apply() 的區別？
例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);
注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

•Jquery與jQuery UI 有啥區別？
*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

•JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

 1 var jQuery = function() {

 3     // 返回選擇器實例

 4     return new jQuery.prototype.init();

 5 };

 6 jQuery.prototype = {

 8     // 選擇器構造函數

 9     init: function() {

11     },

13     // 原型方法

14     toArray: function() {

16     },

17     get: function() {

19     }

20 };

22 // 共享原型

23 jQuery.prototype.init.prototype = jQuery.prototype;

$(xx)或Jquery(xx)獲得不是真正的jQuery函數生成的對象，而是jQuery.fn.init函數生成的對象。也是就是jQuery的對象繼承的是jQuery.fn.init的原型。 jQuery.fn = jQuery.prototype={..}。咱們基本上不用new jQuery(xx)，而是直接jQuery(xx),先生成jQuery函數的對象，把原型中的繼承下來，返回的也是jQuery.fn.init函數生成的對象。

•jquery 中如何將數組轉化爲json字符串，而後再轉化回來？
jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}

而後調用：

$("").stringifyArray(array)

•針對 jQuery 的優化方法？
*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。
*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。
好比：var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

•JavaScript中的做用域與變量聲明提高？
「一個變量的做用域表示這個變量存在的上下文。它指定了你能夠訪問哪些變量以及你是否有權限訪問某個變量。」變量做用域分爲局部做用域和全局做用域。

javascript沒有塊級做用域（被花括號包圍的）；當是，javascript有擁有函數級別的做用域，也就是說，在一個函數內定義的變量只能在函數內部訪問或者這個函數內部的函數訪問（閉包除外）。

•如何編寫高性能的Javascript？

•那些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

•JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

•對Node的優勢和缺點提出了本身的見解？
*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

其餘問題

你遇到過比較難的技術問題是？你是如何解決的？
常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？
頁面重構怎麼操做？
列舉IE 與其餘瀏覽器不同的特性？
99%的網站都須要被重構是那本書上寫的？
什麼叫優雅降級和漸進加強？
WEB應用從服務器主動推送Data到客戶端有那些方式？
你有哪些性能優化的方法？
（看雅虎14條性能優化原則）。（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佈局慢。
http狀態碼有那些？分別表明是什麼意思？
100-199 用於指定客戶端應相應的某些動做。 200-299 用於表示請求成功。 300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。500-599 用於支持服務器錯誤。 503 – 服務不可用
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）
查找瀏覽器緩存 DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求進行HTTP協議會話客戶端發送報頭(請求報頭) 服務器回饋報頭(響應報頭) html文檔開始下載文檔樹創建，根據標記請求所需指定MIME類型的文件文件顯示 [ 瀏覽器這邊作的工做大體分爲如下幾步：加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等） }
除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？
你經常使用的開發工具是什麼，爲何？
對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。一、實現界面交互二、提高用戶體驗三、有了Node.js，前端能夠實現服務端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，參與項目，快速高質量完成實現效果圖，精確到1px；與團隊成員，UI設計，產品經理的溝通；作好的頁面結構，頁面重構和用戶體驗；處理hack，兼容、寫出優美的代碼格式；針對服務器的優化、擁抱最新前端技術。
加班的見解？
加班就像借錢，原則應當是------救急不救窮
平時如何管理你的項目？
先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；頁面進行標註（例如頁面模塊開始和結束）； CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css） JS 分文件夾存放命民以該JS 功能爲準英文翻譯；圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理
如何設計突發大規模併發架構？
說說最近最流行的一些東西吧？常去哪些網站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js
移動端（Android IOS）怎麼作好用戶體驗?
清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標籤及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、
你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？
你認爲怎樣纔是全端工程師（Full Stack developer）？
介紹一個你最得意的做品吧？
你的優勢是什麼？缺點是什麼？
如何管理前端團隊?
最近在學什麼？能談談你將來3，5年給本身的規劃嗎？
想問公司的問題？問公司問題：目前關注哪些最新的Web前端技術（將來的發展方向）？前端團隊如何工做的（實現一個產品的流程）？公司的薪資結構是什麼樣子的？