HTML&CSS： 對Web標准的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應。
JavaScript： 數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其他： HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯
1.請你談談Cookie的弊端
cookie
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
Opera 會清理近期最少使用的Firefox會隨機清理 4096字節，為了兼容性，一般不能超過 IE 提供了一種存儲可以持久化用戶數據，叫做IE5.0就開始支持。每個數據最多128K，每個域名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，那么會一直存在。
優點：極高的擴展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
缺點：
1.`Cookie`數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
2.瀏覽器本地存儲
在較高版本的瀏覽器中，sessionStorage和HTML5中提供了globalStorage。
Web Storage包括了兩種存儲方式：localStorage。
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而 3.web storage和cookie的區別
cookie相似，區別是它是為了更大容量存儲設計的。Cookie都會被發送過去，這樣無形中浪費了帶寬，另外 除此之外，setItem,getItem,removeItem,clear等方法，不像setCookie，getCookie。
但是Cookie的作用是與服務器進行交互，作為Web Storage僅僅是為了在本地“存儲”數據而生
瀏覽器的支持除了UserData其實就是web storage。
sessionStorage都具有相同的操作方法，例如removeItem等
CSS 相關問題
display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，
就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
CSS中 link 和@import 的區別是？
A：(1) link屬於HTML標簽，而@import是CSS提供的; (2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;(3) import只在IE5以上才能識別，而link是HTML標簽，無兼容問題; (4) link方式的樣式的權重 高於@import的權重.
position的absolute與fixed共同點與不同點
A：共同點：
1.改變行內元素的呈現方式，display被置為block；2.讓元素脫離普通流，不占據空間；3.默認會覆蓋到非定位元素上
B不同點：
absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。
介紹一下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, text-indent;
* 不可繼承的樣式：border padding margin width height ;
* 優先級就近原則，同權重情況下樣式定義最近者為准;
* 載入樣式以最后載入的定位為准;
優先級為:
!important > id > class > tag
important 比 內聯優先級高,但內聯比 id 要高
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 單選框或復選框被選中。
列出display的值，說明他們的作用。position的值， relative和absolute分別是相對於誰進行定位的？
1.
block 象塊類型元素一樣顯示。
inline 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
2.
*absolute
生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位。
*fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
*relative
生成相對定位的元素，相對於其在普通流中的位置進行定位。
* static 默認值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。
* inherit 規定從父元素繼承 position 屬性的值。
CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢，多欄布局
border-image
為什么要初始化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; }
對BFC規范的理解？
BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin會發生折疊。
（W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行布局，以及與其他元素的關系和相互作用。）
解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以並發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了`http2`。
html部分
說說你對語義化的理解？
1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標准運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
你知道多少種Doctype文檔類型？
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標准）模式（也就是嚴格呈現模式）用於呈現遵循最新標准的網頁，而 Quirks
（包容）模式（也就是松散呈現模式或者兼容模式）用於呈現為傳統瀏覽器而設計的網頁。
HTML與XHTML——二者有什么區別
區別：
1.所有的標記都必須要有一個相應的結束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內容中使“--”
8.圖片必須有說明文字
常見兼容性問題？
* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.
* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
* 漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_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和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標准模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。
* ie6對png圖片格式支持不好(引用一段腳本處理)
解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
2.使用overflow。
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after偽對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；
浮動元素引起的問題和解決辦法？
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
2，使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動外部元素
4,設置`overflow`為`hidden`或者auto
IE 8以下版本的瀏覽器中的盒模型有什么不同
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
getElementById() //通過元素Id，唯一性
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
* HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
* 拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除
表單控件，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]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素
iframe的優缺點？
1.<iframe>優點：
解決加載緩慢的第三方內容如圖標和廣告等的加載問題
Security sandbox
並行加載腳本
2.<iframe>的缺點：
*iframe會阻塞主頁面的Onload事件；
*即時內容為空，加載也需要時間
*沒有語意
如何實現瀏覽器內多個標簽頁之間的通信?
調用localstorge、cookies等本地存儲方式
webSocket如何兼容低瀏覽器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR
線程與進程的區別
一個程序至少有一個進程,一個進程至少有一個線程.
線程的划分尺度小於進程，使得多線程程序的並發性高。
另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。
線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分可以同時執行。但操作系統並沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。
你如何對網站的文件和資源進行優化？
期待的解決方案包括：
文件合並
文件最小化/文件壓縮
使用 CDN 托管
緩存的使用（多個域名來提供緩存）
其他
請說出三種減少頁面加載時間的方法。
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left...)
4.網址后加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什么文件類型，或者是目錄。）
5.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。）
6.減少http請求（合並文件，合並圖片）。
你都使用哪些工具來測試代碼的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。
null和undefined的區別？
undefined是一個表示"無"的原始值，轉為數值時為 當聲明的變量還未被初始化時，變量的默認值為null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。
（1）變量被聲明了，但沒有賦值時，就等於undefined。 （2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。 （3）對象沒有賦值的屬性，該屬性的值為undefined。 （4）函數沒有返回值時，默認返回undefined。
（1） 作為函數的參數，表示該函數的參數不是對象。 （2） 作為對象原型鏈的終點。
new操作符具體干了什么呢?
1、創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用，並且最后隱式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
JSON 的了解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小
{'age':'12', 'name':'back'}
js延遲加載的方式有哪些？
defer和async、動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack）、按需異步載入js
如何解決跨域問題?
jsonp、 document.domain+iframe、window.name、window.postMessage、服務器上設置代理頁面
jsonp的原理是動態插入script標簽
documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
.call() 和 .apply() 的區別和作用？
作用：動態改變某個類的某個方法的運行環境。
哪些操作會造成內存泄漏？
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。
閉包、控制台日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
JavaScript中的作用域與變量聲明提升？
如何判斷當前腳本運行在瀏覽器還是node環境中？
通過判斷Global對象是否為window，如果不為window，當前腳本沒有運行在瀏覽器中
其他問題？
你遇到過比較難的技術問題是？你是如何解決的？
常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？
列舉IE 與其他瀏覽器不一樣的特性？
99%的網站都需要被重構是那本書上寫的？
* 網站重構：應用web標准進行設計（第2版）
什么叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。
WEB應用從服務器主動推送Data到客戶端有那些方式？
對Node的優點和缺點提出了自己的看法？
*（優點）因為Node是基於事件驅動和無阻塞的，所以非常適合處理並發請求，
因此構建在Node上的代理服務器相比其他技術實現（如Ruby）的服務器表現要好得多。
此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。
*（缺點）Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，
而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。
除了前端以外還了解什么其它技術么？你最最厲害的技能是什么？
你常用的開發工具是什么，為什么？
對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？
前端是最貼近用戶的程序員，比后端、數據庫、產品經理、運營、安全都近。
1、實現界面交互
2、提升用戶體驗
3、有了Node.js，前端可以實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
參與項目，快速高質量完成實現效果圖，精確到1px；
與團隊成員，UI設計，產品經理的溝通；
做好的頁面結構，頁面重構和用戶體驗；
處理hack，兼容、寫出優美的代碼格式；
針對服務器的優化、擁抱最新前端技術。
你在現在的團隊處於什么樣的角色，起到了什么明顯的作用？
你認為怎樣才是全端工程師（Full Stack developer）？
介紹一個你最得意的作品吧？
項目中遇到什么問題？如何解決？
你的優點是什么？缺點是什么？
如何管理前端團隊?
最近在學什么？能談談你未來3，5年給自己的規划嗎？
你有哪些性能優化的方法？
（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） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
http狀態碼有那些？分別代表是什么意思？
100-199 用於指定客戶端應相應的某些動作。
200-299 用於表示請求成功。
300-399 用於已經移動的文件並且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求無法被服務器理解。401 當前請求需要用戶驗證 403 服務器已經理解請求，但是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
分為4個步驟：
（1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。
（2）， 瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答並接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。
（3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值為200的HTTP響應狀態表示一個正確的響應。
（4），此時，Web服務器提供資源服務，客戶端開始下載資源。
請求返回后，便進入了我們關注的前端模塊
簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又可以根據DOM API操作DOM
平時如何管理你的項目？
先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；
標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；
頁面進行標注（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放 命名以該JS功能為准的英文翻譯。
圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理
說說最近最流行的一些東西吧？常去哪些網站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。
網站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等
javascript對象的幾種創建方式
1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式
javascript繼承的6種方法
1，原型鏈繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承
ajax過程
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
異步加載和延遲加載
1.異步加載的方案： 動態插入script標簽
2.通過ajax去獲取js代碼，然后通過eval執行
3.script標簽上添加defer或者async屬性
4.創建並插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。
前端安全問題？
（XSS，sql注入，CSRF）
CSRF：是跨站請求偽造，很明顯根據剛剛的解釋，他的核心也就是請求偽造，通過偽造身份提交POST和GET請求來進行跨域的攻擊。
**完成CSRF需要兩個步驟：**
1.登陸受信任的網站A，在本地生成COOKIE
2.在不登出A的情況下，或者本地COOKIE沒有過期的情況下，訪問危險網站B。
ie各版本和chrome可以並行下載多少個資源
IE6 兩個並發，iE7升級之后的6個並發，之后版本也是6個
Firefox，chrome也是6個
javascript里面的繼承怎么實現，如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承，避免對象共享可以參考經典的extend()函數，很多前端框架都有封裝的，就是用一個空函數當做中間變量
grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。
YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，采用Java開發。
使用方法：
//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css
Flash、Ajax各自的優缺點，在使用中如何取舍？
1、Flash ajax對比
Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操作DOM
請解釋一下 JavaScript 的同源策略。
概念:同源策略是客戶端腳本（尤其是Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。
這里的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個黑客程序，他利用Javascript讀取到你的表單中 什么是 "use strict"; ? 使用它的好處和壞處分別是什么？
Javascript在更嚴格的條件下運行。
設立"嚴格模式"的目的，主要有以下幾個：
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
注：經過測試 缺點：
現在網站的merge 后，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。
GET和POST的區別，何時使用POST？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
哪些地方會出現css阻塞，哪些地方會出現js阻塞？
js的阻塞特性：所有瀏覽器在下載JS下載、解析、執行完畢后才開始繼續JS，但是 由於瀏覽器為了防止出現DOM樹，需要重新構建 嵌入JS只會阻塞其后內容的顯示，2種方式都會阻塞其后資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。
CSS本來是可以並行下載的，在什么情況下會出現阻塞加載了(在測試觀察中，CSS都是阻塞加載）
當JS的時候，該JS放到 根本原因：因為瀏覽器會維持css和JS會阻塞后面的資源加載，所以就會出現上面 嵌入 1、放在底部，雖然放在底部照樣會阻塞所有呈現，但不會阻塞資源下載。 2、如果嵌入JS放在head中，請把嵌入JS放在CSS頭部。 3、使用defer（只支持IE） 4、不要在嵌入的JS中調用運行時間較長的函數，如果一定要用，可以用`setTimeout`來調用
Javascript無阻塞加載具體方式
將腳本放在底部。head中，用以保證在<script>標簽放在前。
成組腳本：由於每個<script>總數也可以改善性能。適用於內聯腳本和外部腳本。
前。
非阻塞腳本：等頁面完成加載后，再加載window.onload事件發出后開始下載代碼。
（1）fierfox3.5更高版本瀏覽器
（2）動態腳本元素：文檔對象模型（DOM）允許你使用js動態創建
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
此技術的重點在於：無論在何處啟動下載，文件額下載和運行都不會阻塞其他頁面處理過程。即使在head里（除了用於下載文件的http鏈接）。
閉包相關問題？
js事件處理程序問題？
eval是做什么的？
它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
寫一個通用的事件偵聽器函數?
// 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的適用場景？
高並發、聊天、實時消息推送
JavaScript原型，原型鏈 ? 有什么特點？
* 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。
* 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。
頁面重構怎么操作？
編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。
WEB應用從服務器主動推送Data到客戶端有那些方式？
html5 websoket
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
不可見的Iframe
<script>標簽的長時間連接(可跨域)
事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？
1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
3. ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;
ajax 是什么?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?
1. 通過異步模式，提升了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用
3. Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。
2. Ajax的最大的特點是什么。
Ajax可以實現動態不刷新（局部刷新）
readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=啟動 2=發送，3=接收，4=完成
ajax的缺點
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
5、不容易調試。
跨域： jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面
js對象的深度克隆
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //創建一個空的數組
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //創建一個空對象
for (var k in Obj) { //為這個對象添加新的屬性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
AMD和CMD 規范的區別？
網站重構的理解？
網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
對於傳統的網站來說重構通常是：
表格(table)布局改為DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規范的CSS、如對IE6有效的)
對於移動平台的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴格按規范編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
增強用戶體驗
通常來說對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
程序的性能優化(如數據讀寫)
采用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存
如何獲取UA？
<script>
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
</script>
js數組去重
以下是數組去重的三種方法：
Array.prototype.unique1 = function () {
var n = []; //一個新的臨時數組
for (var i = 0; i < this.length; i++) //遍歷當前數組
{
//如果當前數組的第i已經保存進了臨時數組，那么跳過，
//否則把當前項push到臨時數組里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n為hash表，r為臨時數組
for(var i = 0; i < this.length; i++) //遍歷當前數組
{
if (!n[this[i]]) //如果hash表中沒有當前項
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把當前數組的當前項push到臨時數組里面
}
}
return r;
}
Array.prototype.unique3 = function()
{
var n = [this[0]]; //結果數組
for(var i = 1; i < this.length; i++) //從第二項開始遍歷
{
//如果當前數組的第i項在當前數組中第一次出現的位置不是i，
//那么表示第i項是重復的，忽略掉。否則存入結果數組
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}
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 服務器端暫時無法處理請求（可能是過載或維護）。
cache-control
網頁的緩存是由HTTP消息頭中的private、no-cache、max-age、must-revalidate等，默認為 max-age的效果。但是如果同時存在，則被max-age覆蓋。
Expires = "Expires" ":" HTTP-date
例如
Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）
如果把它設置為 max-age都可以用來指定文檔的過期時間，但是二者有一些細微差別
1.Expires在HTTP/1.0中已經定義，Cache-Control:max-age在HTTP/1.1中才有定義，為了向下兼容，僅使用max-age不夠；
2.Expires指定一個絕對的過期時間(GMT格式),這么做會導致至少2個問題：1)客戶端和服務器時間不同步導致Expires的配置出現問題。 2）很容易在配置后忘記具體的過期時間，導致過期來臨出現浪涌現象；
3.max-age 指定的是從文檔被訪問后的存活時間，這個時間是個相對值(比如:3600s),相對的是文檔第一次被請求時服務器記錄的Request_time(請求時間)
4.Expires指定的時間可以是相對文件的最后訪問時間(Atime)或者修改時間(MTime),而max-age相對對的是文檔的請求時間(Atime)
如果值為no-cache,那么每次都會訪問服務器。如果值為max-age,則在過期之前不會重復訪問服務器。
js操作獲取和設置cookie
//創建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';
}
document.cookie = cookieText;
}
//獲取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
————————————————
版權聲明：本文為CSDN博主「人狠話多」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/keyandi/article/details/89227175