Q.了解前后端分離嗎（當時真不了解阻肩，但他細心地給我解釋了一下，還建議我去看淘寶ued團隊的文章）
Q.用什么版本控制工具 (git, svn等)
**Q.用什么來管理各種依賴 **
Q.那你說說閉包
閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù)
創(chuàng)建閉包的方式：
在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)
閉包的作用：
1.讓這些函數(shù)的值始終保存在內(nèi)存中
1.http2懂多少（真懂不了很多运授，因為沒有怎么實踐過烤惊，我直接說了自己的理解）
HTTP 2.0與HTTP 1.1區(qū)別
1、什么是HTTP 2.0
HTTP/2（超文本傳輸協(xié)議第2版吁朦，最初命名為HTTP 2.0）柒室，是HTTP協(xié)議的的第二個主要版本，使用于萬維網(wǎng)逗宜。HTTP/2是HTTP協(xié)議自1999年HTTP 1.1發(fā)布后的首個更新雄右，主要基于SPDY協(xié)議（是Google開發(fā)的基于TCP的應用層協(xié)議，用以最小化網(wǎng)絡延遲纺讲，提升網(wǎng)絡速度擂仍，優(yōu)化用戶的網(wǎng)絡使用體驗）。
2熬甚、與HTTP 1.1相比逢渔，主要區(qū)別包括
- HTTP/2采用二進制格式而非文本格式
- HTTP/2是完全多路復用的，而非有序并阻塞的——只需一個連接即可實現(xiàn)并行
- 使用報頭壓縮乡括，HTTP/2降低了開銷
- HTTP/2讓服務器可以將響應主動“推送”到客戶端緩存中
3肃廓、HTTP/2為什么是二進制？
比起像HTTP/1.x這樣的文本協(xié)議诲泌，二進制協(xié)議解析起來更高效盲赊、“線上”更緊湊，更重要的是錯誤更少档礁。
4角钩、為什么 HTTP/2 需要多路傳輸?
HTTP/1.x 有個問題叫線端阻塞(head-of-line blocking), 它是指一個連接(connection)一次只提交一個請求的效率比較高, 多了就會變慢吝沫。 HTTP/1.1 試過用流水線(pipelining)來解決這個問題, 但是效果并不理想(數(shù)據(jù)量較大或者速度較慢的響應, 會阻礙排在他后面的請求). 此外, 由于網(wǎng)絡媒介(intermediary )和服務器不能很好的支持流水線, 導致部署起來困難重重呻澜。而多路傳輸(Multiplexing)能很好的解決這些問題, 因為它能同時處理多個消息的請求和響應; 甚至可以在傳輸過程中將一個消息跟另外一個摻雜在一起递礼。所以客戶端只需要一個連接就能加載一個頁面。
5羹幸、消息頭為什么需要壓縮?
假定一個頁面有80個資源需要加載（這個數(shù)量對于今天的Web而言還是挺保守的）, 而每一次請求都有1400字節(jié)的消息頭（著同樣也并不少見脊髓，因為Cookie和引用等東西的存在）, 至少要7到8個來回去“在線”獲得這些消息頭。這還不包括響應時間——那只是從客戶端那里獲取到它們所花的時間而已栅受。這全都由于TCP的慢啟動機制将硝，它會基于對已知有多少個包，來確定還要來回去獲取哪些包 – 這很明顯的限制了最初的幾個來回可以發(fā)送的數(shù)據(jù)包的數(shù)量屏镊。相比之下依疼，即使是頭部輕微的壓縮也可以是讓那些請求只需一個來回就能搞定——有時候甚至一個包就可以了。這種開銷是可以被節(jié)省下來的而芥，特別是當你考慮移動客戶端應用的時候律罢，即使是良好條件下，一般也會看到幾百毫秒的來回延遲棍丐。
6误辑、服務器推送的好處是什么？
當瀏覽器請求一個網(wǎng)頁時歌逢，服務器將會發(fā)回HTML巾钉，在服務器開始發(fā)送JavaScript、圖片和CSS前秘案，服務器需要等待瀏覽器解析HTML和發(fā)送所有內(nèi)嵌資源的請求砰苍。服務器推送服務通過“推送”那些它認為客戶端將會需要的內(nèi)容到客戶端的緩存中，以此來避免往返的延遲踏烙。
Q.說說BFC（當時因為聽錯了所以不知道他在問什么师骗，他直接就下一個問題了）
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
http://www.html-js.com/article/1866
**Q:閉包你說說 **
Q:實現(xiàn)一個閉包的例子（實現(xiàn)了一個定時函數(shù)傳值的）
閉包：
for(var i = 0; i < 10; i++ ){
(function(x){
setTimeout(function(){
console.log(x)
},x*1000)
})(i)
}
或者用全局變量實現(xiàn)
Q.實現(xiàn)一個querySelectorAll的功能，函數(shù)長這樣querySelect(el, className)
（這個問題是真的很能考驗人的各方面能力讨惩，對dom的理解辟癌，大家可以嘗試實現(xiàn)一下，不懂看下面荐捻。當初面試官跟我說你可以隨便百度的黍少，沒關系，我不問api的細節(jié)处面，我看你思路厂置。聽到這句話之后我的膝蓋是下地的，在下果真圖樣魂角。最后還是沒有實現(xiàn)出來昵济，面試官細心地敲了給我看，面試官真心屌）
function querySelect(el,className){
var children = el.children;
var result = [];
if(el.classList.contains(className)){
result.push(el);
}
for(var i; i<children.length; i++){
var child = children[i];
var arr = querySelect(child,className);
result.push.apply(result, arr);
}
return result;
}
Q.實現(xiàn)一個快排
#include <iostream>
using namespace std;
void Qsort(int a[], int low, int high)
{
if(low >= high)
{
return;
}
int first = low;
int last = high;
int key = a[first];/*用字表的第一個記錄作為樞軸*/
while(first < last)
{
while(first < last && a[last] >= key)
{
--last;
}
a[first] = a[last];/*將比第一個小的移到低端*/
while(first < last && a[first] <= key)
{
++first;
}
a[last] = a[first];
/*將比第一個大的移到高端*/
}
a[first] = key;/*樞軸記錄到位*/
Qsort(a, low, first-1);
Qsort(a, first+1, high);
}
int main()
{
int a[] = {57, 68, 59, 52, 72, 28, 96, 33, 24};
Qsort(a, 0, sizeof(a) / sizeof(a[0]) - 1);/*這里原文第三個參數(shù)要減1否則內(nèi)存越界*/
for(int i = 0; i < sizeof(a) / sizeof(a[0]); i++)
{
cout << a[i] << "";
}
return 0;
}/*參考數(shù)據(jù)結構p274(清華大學出版社，嚴蔚敏)*/
Q.數(shù)組去重
思路：
1.創(chuàng)建一個新的數(shù)組存放結果
2.創(chuàng)建一個空對象
3.for循環(huán)時访忿，每次取出一個元素與對象進行對比瞧栗，如果這個元素不重復，則把它存放到結果數(shù)組中海铆，同時把這個元素的內(nèi)容作為對象的一個屬性迹恐，并賦值為1，存入到第2步建立的對象中卧斟。
說明：至于如何對比殴边，就是每次從原數(shù)組中取出一個元素，然后到對象中去訪問這個屬性，如果能訪問到值，則說明重復合呐。
Array.prototype.unique3 = function(){
var res = []; // 創(chuàng)建一個新的數(shù)組存放結果
var json = {}; // 創(chuàng)建一個空對象
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){ // json不為空的時候
res.push(this[i]); // 把元素依次放入到res中
json[this[i]] = 1; //?
}
}
return res; // 返回res
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3()); // 調(diào)用unique3函數(shù)
Q.position的幾種值
display 的值的作用：
1.block 象塊類型元素一樣顯示。
2.inline 缺省值能耻。象行內(nèi)元素類型一樣顯示。
3.inline-block 象行內(nèi)元素一樣顯示亡驰，但其內(nèi)容象塊類型元素一樣顯示晓猛。
4.list-item 象塊類型元素一樣顯示，并添加樣式列表標記凡辱。
position 的值的定位區(qū)別：
1.absolute 生成絕對定位的元素戒职，相對于 static 定位以外的第一個祖先元素進行定位。
2.fixed 生成絕對定位的元素透乾，相對于瀏覽器窗口進行定位（老IE不支持）洪燥。
3.relative 生成相對定位的元素，相對于其在普通流中的位置進行定位乳乌。
4.static 默認值捧韵。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）汉操。
5.inherit 規(guī)定從父元素繼承 position 屬性的值再来。
Q.css選擇器優(yōu)先級
優(yōu)先級
(1)、同類型磷瘤，同級別的樣式后者先于前者
(2))芒篷、ID > 類樣式 > 標簽 > *
(3)、內(nèi)聯(lián)>ID選擇器>偽類>屬性選擇器>類選擇器>標簽選擇器>通用選擇器(*)>繼承的樣式
(4)采缚、具體 > 泛化的针炉，特殊性即css優(yōu)先級
(5)、近的 > 遠的 (內(nèi)嵌樣式 > 內(nèi)部樣式表 > 外聯(lián)樣式表)
??內(nèi)嵌樣式：內(nèi)嵌在元素中扳抽，<span style="color:red">span</span>
??內(nèi)部樣式表：在頁面中的樣式篡帕，寫在<style></style>中的樣式
外聯(lián)樣式表：單獨存在一個css文件中殖侵，通過link引入或import導入的樣式
(6)、!important 權重最高镰烧，比 inline style 還要高
計算特殊性值
important > 內(nèi)嵌 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權重愉耙、特殊性計算法：
CSS樣式選擇器分為4個等級，a拌滋、b、c猜谚、d
(1)败砂、如果樣式是行內(nèi)樣式（通過Style=“”定義），那么a=1魏铅，1,0,0,0
(2)昌犹、b為ID選擇器的總數(shù) 0,1,0,0
(3)、c為屬性選擇器览芳，偽類選擇器和class類選擇器的數(shù)量斜姥。0,0,1,0
(4)、d為標簽沧竟、偽元素選擇器的數(shù)量 0,0,0,1
(5)铸敏、!important 權重最高，比 inline style 還要高
比如結果為：1093比1100悟泵，按位比較杈笔，從左到右，只要一位高于則立即勝出糕非，否則繼續(xù)比較蒙具。
**Q.偽類的用法 **
加冒號
**Q.閉包的實現(xiàn)舉例 **
**Q.浮動&清除浮動 **
(1)、父級div定義 height
原理：父級div手動定義height朽肥，就解決了父級div無法自動獲取到高度的問題禁筏。
優(yōu)點：簡單、代碼少衡招、容易掌握
缺點：只適合高度固定的布局篱昔，要給出精確的高度，如果高度和父級div不一樣時始腾，會產(chǎn)生問題
建議：不推薦使用旱爆，只建議高度固定的布局時使用
(2)、結尾處加空div標簽 clear:both
原理：添加一個空div窘茁，利用css提高的clear:both清除浮動怀伦，讓父級div能自動獲取到高度
優(yōu)點：簡單、代碼少山林、瀏覽器支持好房待、不容易出現(xiàn)怪問題
缺點：不少初學者不理解原理邢羔；如果頁面浮動布局多，就要增加很多空div桑孩，讓人感覺很不好
建議：不推薦使用拜鹤，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after流椒，原理和方法2有點類似敏簿，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用宣虾，如：騰迅惯裕，網(wǎng)易，新浪等等）
缺點：代碼多绣硝、不少初學者不理解原理蜻势，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用鹉胖，建議定義公共類握玛，以減少CSS代碼。
(4)甫菠、父級div定義 overflow:hidden
原理：必須定義width或zoom:1挠铲，同時不能定義height，使用overflow:hidden時寂诱，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單市殷、代碼少、瀏覽器支持好
缺點：不能和position配合使用刹衫，因為超出的尺寸的會被隱藏醋寝。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)带迟、父級div定義 overflow:auto
原理：必須定義width或zoom:1音羞，同時不能定義height，使用overflow:auto時仓犬，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單嗅绰、代碼少、瀏覽器支持好
缺點：內(nèi)部寬高超過父級div時搀继，會出現(xiàn)滾動條窘面。
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧叽躯。
**Q.jsonp是啥 **
工作原理：
很簡單财边，就是利用<script>標簽沒有跨域限制的“漏洞”（歷史遺跡啊）來達到與第三方通訊的目的点骑。當需要通訊時酣难，本站腳本創(chuàng)建一個<script>元素谍夭，地址指向第三方的API網(wǎng)址，形如： <script src="http://www.example.net/api?param1=1¶m2=2"></script> 并提供一個回調(diào)函數(shù)來接收數(shù)據(jù)（函數(shù)名可約定憨募，或通過地址參數(shù)傳遞）紧索。 第三方產(chǎn)生的響應為json數(shù)據(jù)的包裝（故稱之為jsonp，即json padding）菜谣，形如： callback({"name":"hax","gender":"Male"}) 這樣瀏覽器會調(diào)用callback函數(shù)珠漂，并傳遞解析后json對象作為參數(shù)。本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)尾膊。 補充：“歷史遺跡”的意思就是媳危，如果在今天重新設計的話，也許就不會允許這樣簡單的跨域了嘿眯停，比如可能像XHR一樣按照CORS規(guī)范要求服務器發(fā)送特定的http頭。
**Q.跨域是啥 **
跨域是指 不同域名之間相互訪問
例如 我的電腦上有2個服務器 192.168.0.11 192.168.0.12 如果第一個服務器上的頁面要訪問第二個服務器 就叫做跨域 或者http://www.baidu.com要訪問http://www.xxx.com 也是不同域名 也是跨域
**Q.跨域的方法 **
https://segmentfault.com/a/1190000003642057
**Q.gulp怎么用卿泽，用過啥 **
Q.require的讀取順序
Q.圖片輪播（雖然很多面試題都有這個莺债，但是我自己真的沒有實現(xiàn)過，說了一個opacity與setTimeout的組合運用签夭，最后沒有實現(xiàn)到面試官要求的效果齐邦，但是他說還行）
Q.sass的偽類怎么嵌套
**Q.怎么用jsonp **
Q.發(fā)送jsonp時候的那個消息頭長什么樣子？
（這個我直接跟他說沒看過不知道）
Q.一個文本框第租，需要兩個控件對里面的值進行控制措拇，一個是＋1一個是－1，要求每點擊一次就有個提示框冒出來慎宾。 而且文本框是可修改的丐吓，每次修改也會冒出提示框。
（這個我回答的很模糊趟据，我說應該有個監(jiān)聽的事件的券犁，但是我忘了是啥了，面試官說也行）
**Q.html5的新功能了解多少 **
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）
3. 音頻汹碱、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)粘衬，瀏覽器關閉后數(shù)據(jù)不丟失；
7. sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
8. 表單控件咳促，calendar稚新、date、time跪腹、email褂删、url、search
9. 新的技術webworker, websocket, Geolocation
參考資料：http://www.jb51.net/html5/45220.html
Q.說說離線存儲
在較高版本的瀏覽器中冲茸，js提供了
sessionStorage和globalStorage笤妙。
在HTML5中提供了localStorage來取代globalStorage冒掌。
html5中的Web Storage包括了兩種存儲方式：
sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)蹲盘，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀股毫。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲召衔。
localStorage用于持久化的本地存儲铃诬，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的苍凛。
Q.它們與cookie的區(qū)別
Web Storage的概念和cookie相似趣席，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的醇蝴，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去宣肚，這樣無形中浪費了帶寬，另外cookie還需要指定作用域悠栓，不可以跨域調(diào)用霉涨。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法惭适，不像cookie需要前端開發(fā)者自己封裝setCookie笙瑟，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互癞志，作為HTTP規(guī)范的一部分而存在 往枷，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生
瀏覽器的支持除了IE７及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務器里運行)凄杯，值得一提的是IE總是辦好事错洁，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案戒突。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage墓臭。
localStorage和sessionStorage都具有相同的操作方法，例如setItem妖谴、getItem和removeItem等
Q.this的理解
**Q.怎么傳入this **
Q.apply和call的區(qū)別
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)
call方法:
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義：調(diào)用一個對象的一個方法窿锉，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調(diào)用一個方法膝舅。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象嗡载。
如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj仍稀。
apply方法：
語法：apply([thisObj[,argArray]])
定義：應用某一對象的一個方法洼滚，用另一個對象替換當前對象。
說明：
如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象技潘，那么將導致一個 TypeError遥巴。
如果沒有提供 argArray 和 thisObj 任何一個參數(shù)千康，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數(shù)铲掐。
**Q.前端優(yōu)化 **
（1）拾弃、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮摆霉、圖片大小控制合適豪椿；網(wǎng)頁Gzip，CDN托管携栋，data緩存 搭盾，圖片服務器。
（2）婉支、前端模板 JS+數(shù)據(jù)鸯隅，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果向挖，每次操作本地變量蝌以，不用請求，減少請求次數(shù)
（3）户誓、用innerHTML代替DOM操作饼灿，減少DOM操作次數(shù)幕侠，優(yōu)化javascript性能帝美。
（4）、當需要設置的樣式很多時設置className而不是直接操作style晤硕。
（5）悼潭、少用全局變量、緩存DOM節(jié)點查找的結果舞箍。減少IO讀取操作舰褪。
（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)疏橄。
（7）占拍、圖片預加載，將樣式表放在頂部捎迫，將腳本放在底部 加上時間戳晃酒。
回答二：
(1)、減少HTTP請求次數(shù)
(2)窄绒、使用CDN
(3)贝次、避免空的src和href
(4)、為文件頭指定Expires
(5)彰导、使用gzip壓縮內(nèi)容
(6)蛔翅、把CSS放到頂部
(7)敲茄、把JS放到底部
(8)、避 免使用CSS表達式
(9)山析、將CSS和JS放到外部文件中
(10)堰燎、避免跳轉
(11)、可緩存的AJAX
(12)盖腿、使用GET來完成AJAX請求
**Q.為什么要跨域 **
**Q.怎么學習的 **
**Q.具體運用是什么 **
**Q.display幾種值 **
Q.兼容性你懂多少
1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景
解決方案：做成PNG8爽待，也可以引用一段腳本處理.
2. 瀏覽器默認的margin和padding不同
解決方案：加一個全局的 *{margin:0;padding:0;} 來統(tǒng)一。
3. IE6雙邊距bug：在IE6下翩腐，如果對元素設置了浮動鸟款，同時又設置了margin-left或margin-right，margin值會加倍茂卦。
#box{ float:left; width:10px; margin:0 0 0 10px;}
這種情況之下IE會產(chǎn)生20px的距離
解決方案：在float的標簽樣式控制中加入 _display:inline; 將其轉化為行內(nèi)屬性何什。( _ 這個符號只有ie6會識別)
4. 漸進識別的方式，從總體中逐漸排除局部等龙。
首先处渣，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來蛛砰。
接著罐栈，再次使用 "+" 將IE8和IE7、IE6分離開來泥畅，這樣IE8已經(jīng)獨立識別荠诬。
.bb{
background-color:#f1ee18; /*所有識別*/
.background-color:#00deff\9; /*IE6、7位仁、8識別*/
+background-color:#a200ff; /*IE6柑贞、7識別*/
_background-color:#1e0bd1; /*IE6識別*/
}
5.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性聂抢，也可以使用 getAttribute() 獲取自定義屬性钧嘶；Firefox下,只能使用getAttribute()獲取自定義屬性
解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性
6. IE下，event對象有 x琳疏、y 屬性有决，但是沒有 pageX、pageY屬性; Firefox下空盼，event對象有 pageX书幕、pageY 屬性，但是沒有 x我注、y 屬性
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)按咒。
7. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決
8. 超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了
解決方法：改變CSS屬性的排列順序 L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
9. 怪異模式問題：漏寫 DTD 聲明，F(xiàn)irefox 仍然會按照標準模式來解析網(wǎng)頁励七，但在 IE 中會觸發(fā)怪異模式智袭。
為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫 DTD 聲明的好習慣÷犹В現(xiàn)在可以使用html5 推薦的寫法：<!DOCTYPE html>
10. 上下margin重合問題：ie和ff都存在吼野，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合两波。
解決方法：養(yǎng)成良好的代碼編寫習慣瞳步，同時采用margin-top或者同時采用margin-bottom。
11. ie6對png圖片格式支持不好
解決方案：引用一段腳本處理
**Q.html語義化 **
什么是 HTML 語義化腰奋？
圍繞著幾個主要的標簽单起，像標題（ H1~H6 ）、列表（ li ）劣坊、強調(diào)（ strong em ）等等 嘀倒，根據(jù)內(nèi)容的結構化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析局冰。
語義化的好處：
- 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結構
- 有利于SEO：和搜索引擎建立良好溝通测蘑，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
- 方便其他設備解析（如屏幕閱讀器康二、盲人閱讀器碳胳、移動設備）以意義的方式來渲染網(wǎng)頁；
- 便于團隊開發(fā)和維護沫勿，語義化更具可讀性挨约，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準藕帜，可以減少差異化烫罩。
**Q.h5新標簽 **
Html5新增了 27 個元素惜傲，廢棄了 16 個元素洽故，根據(jù)現(xiàn)有的標準規(guī)范，把 HTML5 的元素按優(yōu)先級定義為結構性屬性盗誊、級塊性元素时甚、行內(nèi)語義性元素和交互性元素 4 大類。
結構性元素主要負責web上下文結構的定義
section：在 web 頁面應用中哈踱，該元素也可以用于區(qū)域的章節(jié)描述荒适。
header：頁面主體上的頭部， header 元素往往在一對 body 元素中开镣。
footer：頁面的底部（頁腳）刀诬，通常會標出網(wǎng)站的相關信息。
nav：專門用于菜單導航邪财、鏈接導航的元素陕壹，是 navigator 的縮寫质欲。
article：用于表現(xiàn)一篇文章的主體內(nèi)容，一般為文字集中顯示的區(qū)域糠馆。
級塊性元素主要完成web頁面區(qū)域的劃分嘶伟，確保內(nèi)容的有效分割。
aside：用于表達注記又碌、貼士九昧、側欄、摘要毕匀、插入的引用等作為補充主體的內(nèi)容铸鹰。
figure：是對多個元素進行組合并展示的元素，通常與 ficaption 聯(lián)合使用皂岔。
code：表示一段代碼塊掉奄。
dialog：用于表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素凤薛， dt 用于表示說話者姓建，而 dd 用來表示說話內(nèi)容。
行內(nèi)語義性元素主要完成web頁面具體內(nèi)容的引用和描述缤苫，是豐富內(nèi)容展示的基礎速兔。
meter：表示特定范圍內(nèi)的數(shù)值，可用于工資活玲、數(shù)量涣狗、百分比等。
time：表示時間值舒憾。
progress：用來表示進度條镀钓，可通過對其 max 、 min 镀迂、 step 等屬性進行控制丁溅，完成對進度的表示和監(jiān)事。
video：視頻元素探遵，用于支持和實現(xiàn)視頻文件的直接播放窟赏，支持緩沖預載和多種視頻媒體格式。
audio：音頻元素箱季，用于支持和實現(xiàn)音頻文件的直接播放涯穷，支持緩沖預載和多種音頻媒體格式。
交互性元素主要用于功能性的內(nèi)容表達藏雏，會有一定的內(nèi)容和數(shù)據(jù)的關聯(lián)拷况，是各種事件的基礎。
details：用來表示一段具體的內(nèi)容，但是內(nèi)容默認可能不顯示赚瘦，通過某種手段（如單擊）與 legend 交互才會顯示出來最疆。
datagrid：用來控制客戶端數(shù)據(jù)與顯示，可以由動態(tài)腳本及時更新蚤告。
menu：主要用于交互菜單（曾被廢棄又被重新啟用的元素）努酸。
command：用來處理命令按鈕。
Q.es6
**Q.promise **
http://www.reibang.com/p/063f7e490e9a
**Q.promise解決了你什么問題 **
Q.跨域的方法
Q.jsonp怎么用
**Q.gulp的插件用過啥 **
**Q.webpack **
**Q.為什么要打包 **
(我說了http請求那點事)
**Q.介紹一下react **
**Q.組件化是啥 **
**Q.flex **
Q.css中用什么進行屏幕的判定
**Q.css中實現(xiàn)陰影的有什么 **
box-shadow: 10px 10px 5px #888888;
Q.點擊a標簽發(fā)生了啥
1.應用層：客戶端瀏覽器通過DNS解析到www.baidu.com的IP地址220.181.27.48杜恰，通過這個IP地址找到客戶端到服務器的路徑获诈。客戶端瀏覽器發(fā)起一個HTTP會話到220.161.27.48心褐，然后通過TCP進行封裝數(shù)據(jù)包舔涎，輸入到網(wǎng)絡層。
2逗爹、傳輸層:在客戶端的傳輸層亡嫌，把HTTP會話請求分成報文段，添加源和目的端口掘而，如服務器使用80端口監(jiān)聽客戶端的請求挟冠，客戶端由系統(tǒng)隨機選擇一個端口如5000，與服務器進行交換袍睡，服務器把相應的請求返回給客戶端的5000端口知染。然后使用IP層的IP地址查找目的端。
3斑胜、客戶端的網(wǎng)絡層不用關心應用層或者傳輸層的東西控淡，主要做的是通過查找路由表確定如何到達服務器，期間可能經(jīng)過多個路由器止潘，這些都是由路由器來完成的工作掺炭，通過查找路由表決定通過那個路徑到達服務器,其中用到路由選擇協(xié)議
Q.http2您說說
Q.聊聊AngularJS
（說了我的理解，但不怎么了解）
**Q.聊聊模塊化吧 **
**Q.sass你怎么用 **
**Q.介紹一下webpack **
Q.實現(xiàn)sum(2,3);sum(2,3,4);sum(2,3,4,5);
(我用了比較原始的方法凭戴，if來判斷)
Q.那如果sum里面的參數(shù)不確定呢
（提取arguments的長度涧狮，用for循環(huán)）
**Q.你知道偽數(shù)組嗎？ **
這里把符合以下條件的對象稱為偽數(shù)組：
1簇宽，具有l(wèi)ength屬性
2勋篓，按索引方式存儲數(shù)據(jù)
3吧享，不具有數(shù)組的push,pop等方法
如
1魏割，function內(nèi)的arguments 。
2钢颂，通過document.forms钞它，F(xiàn)orm.elements，Select.options，document.getElementsByName() 遭垛，document.getElementsByTagName() 尼桶，childNodes/children 等方式獲取的集合（HTMLCollection，NodeList）等锯仪。
3泵督，特殊寫法的對象 ，如
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
Q.那你重新設計一下這個函數(shù)庶喜，讓它直接擁有數(shù)組的方法吧
（var arg = Array.prototype.call(arguments)）
它們不具有數(shù)組的一些方法如push, pop, shift, join等匾灶。有時候需要將這些偽數(shù)組轉成真正的數(shù)組馁启，這樣可以使用push, pop等方法。以下是工具函數(shù)makeArray
function makeArray(obj){
var rs=[],len=obj.length;
try{
rs = [].slice.call(obj,0);
}catch(e){//for IE
for(var i=0;j=obj[i++];){
rs.push(j);
}
}
return rs;
}
以下分別測試以上三種偽數(shù)組：
//定義一個函數(shù)fun,內(nèi)部使用makeArray將其arguments轉換成數(shù)組
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//調(diào)用
fun(3,5);
//假設頁面上有多個段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js對象（如jquery對象）
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
Q. 事件類型芍秆、綁定方式惯疙；
1、表單事件：
submit事件妖啥、reset事件霉颠、click事件、change事件荆虱、
focus事件（不冒泡） （IE和ES5支持冒泡的focusin）
blur事件（不冒泡） （IE和ES5支持冒泡的focusout）
input事件（ES5 textinput提供更方便的獲取輸入文字的方案）
2蒿偎、Window事件
load事件朽们、DOMContentLoaded事件、readyStatechage事件
unload事件诉位、beforeunload事件骑脱、resize事件、scroll事件
3苍糠、鼠標事件
click事件叁丧、dbclick事件、mouseover事件（冒泡）岳瞭、
mouseout事件（冒泡）歹袁、mousedown事件、mouseup事件
contextmenu事件寝优、mouseenter事件（不冒泡）条舔、mouseleave事件（不冒泡）
mousewheel事件（FF DOMMouseScroll事件、DOM3 wheel事件）
4乏矾、鍵盤事件
keydown事件孟抗、keyup事件、keypress事件
Q. js中的對象钻心，對象的繼承凄硼；
Q. 跨域了解多少（講了CORS、JSONP捷沸、postMessage啥的）摊沉；
Q. 瀏覽器內(nèi)核有哪些；
1痒给、Trident內(nèi)核：IE
2说墨、Webkit內(nèi)核：chrome、safari
3苍柏、Gecko內(nèi)核： FireFox
4尼斧、Presto內(nèi)核：Opera
Q. 瀏覽器中從輸入url到顯示頁面都發(fā)生了什么（經(jīng)典題）；
①輸入地址
②瀏覽器查找域名的 IP 地址(這一步包括 DNS 具體的查找過程试吁，包括：瀏覽器緩存->系統(tǒng)緩存->路由器緩存...)
③瀏覽器向 web 服務器發(fā)送一個 HTTP 請求
④服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）
⑤瀏覽器跟蹤重定向地址
⑥服務器處理請求
⑦服務器返回一個 HTTP 響應
⑧瀏覽器顯示 HTML
⑨瀏覽器發(fā)送請求獲取嵌入在 HTML 中的資源（如圖片棺棵、音頻、視頻熄捍、CSS烛恤、JS等等）
⑩瀏覽器發(fā)送異步請求
Q. 瀏覽器的渲染方式；
Q. http協(xié)議余耽；
Q. 自我介紹缚柏，挑一個項目介紹
Q. js對象；
Q. 一個對象的實例宾添，如何統(tǒng)計被幾次調(diào)用過船惨，分別具體被哪些函數(shù)調(diào)用過思灰，可以有哪些方法谒麦；
Q. 實現(xiàn)私有變量（這里當時還沒看到相關部分，只能想到用屬性的setter钮呀、getter來做扛邑。怜浅。。??面試官各種啟發(fā)呀蔬崩。恶座。）；
Q. css垂直水平居中有哪些方法沥阳；
Q. css清除浮動的原理跨琳，clear:both和clear:left的區(qū)別；
Q. 加載性能優(yōu)化的方法桐罕；
Q. http緩存控制脉让；
Q. 瀏覽器如何匹配某個選擇器；
Q. websocket相關功炮，輪詢溅潜，polling；
Q. ws和wss的區(qū)別薪伏；
Q. 兩列布局滚澜；
三面：
三面的大哥很隨性，問了一個算法題嫁怀，然后就是各種聊職業(yè)規(guī)劃设捐，聊亂七八糟啥的了～他說喜歡數(shù)學好的，數(shù)學好肯定發(fā)展?jié)摿锰潦纾瑢W得快～（表示心里膝蓋一軟挡育。。朴爬。??）他還問我為啥想來新美大即寒，我說blabla說了一堆然后說而且感覺新美大的人都很nice啊～他就問你都見過誰呀？我說面試的時候見到的面試官啊工作人員啥的～然后他馬上說哈哈哎我來看下前面是誰面的你～2333333略萌啊～
算法題不難召噩，一個n＊n的棋盤母赵，一個棋子只能走日字形，問最多能走多少步具滴，時間復雜度多少凹嘲。我是用dfs解決的，但是時間復雜度分析的好像有點問題构韵，然后他提示說找f(n)和f(n-1)的關系周蹭，就徹底把我弄懵了??趋艘。
HR面：
HR姐姐穿的和我某件襯衫一毛一樣，一進門我差點笑出來??凶朗。隨后就是聊項目中的職責瓷胧，為什么選擇新美大之類的hr都會問的問題，聊的還是很開心的棚愤，就不多說啦～
網(wǎng)易
網(wǎng)易內(nèi)推掛了搓萧，很幸運能進校招面試，網(wǎng)易面試官總體感覺炒雞嚴肅宛畦。瘸洛。??嚇死寶寶了。次和。反肋。
一面：
- 盒子模型；
- border的設置踏施，border的上下左右具體范圍石蔗；
- css垂直水平居中的方法，flex布局的具體實現(xiàn)读规；
- 兩列布局的方式抓督；
- 項目中做的一個導航條點擊平滑滾動到對應位置的效果，介紹它的實現(xiàn)方式束亏；
- 閉包铃在，塊級作用域；
- https的原理碍遍，加密方式定铜，怎么加密的（這個真不太會了。怕敬。揣炕。暈）；
二面： - 上來就寫個Animal類东跪，有個Cat類繼承它畸陡，要求新建一個Cat的實例，可以調(diào)用catch方法輸出自己的名字“大白的貓”虽填；
- js基本數(shù)據(jù)類型丁恭，[]===[]嗎；
- 寫個方法判斷一個變量的類型斋日；
- 事件類型牲览，事件綁定方式；
- 跨域恶守，在不支持json格式的瀏覽器中第献，寫方法能夠將json字符串與對象互相轉換贡必；
- session和cookie的區(qū)別；
HR面：
沒什么特別的庸毫，問了個最近刷微博有沒有什么熱點事件仔拟，講一下你的看法。
百度
百度一般都比較偏重算法岔绸，這時候渣渣ACMer的優(yōu)勢就體現(xiàn)了一下下理逊，不但筆試編程題基本沒問題橡伞，而且前端面試官問的算法題基本也能應付??盒揉。
一面： - 簡歷上寫了react，于是給了個場景兑徘，A刚盈、B、C三個大組件挂脑，點擊A中的每個小組件Ci藕漱，能在B中顯示一個form，在form的input中寫入文字崭闲，可以實時顯示在C中肋联，點擊form里的button，可以改變Ci的顏色刁俭；
- 用過LESS橄仍，具體用到了什么功能；
- 響應式布局牍戚；
- es6中字符串模版怎么用侮繁；
- 用bfs實現(xiàn)前序遍歷；
- 三列布局如孝；
- 盒子模型宪哩；
二面： - 項目介紹；
- 做一些js題（考察this第晰，作用域锁孟，變量聲明，引用類型）茁瘦；
三面： - 感覺自己優(yōu)勢在哪里品抽；
- 前端框架了解哪些，vue和react對比腹躁；
- 對自己有何職業(yè)規(guī)劃桑包；
- 感覺自己需要如何提高；
- 算法題纺非，給千萬量級的珠子哑了，共上百種顏色赘方，圍成一個圈，求連續(xù)的包含所有顏色的最短子串的長度弱左，并分析時間復雜度窄陡；
- 介紹MVVM模式；
- grunt用過哪些功能拆火；
- 介紹某個項目跳夭；
- 如果要你設計一個組件，你會如何設計（這個不確定是不是百度問的了）们镜；
騰訊
我心心念念的騰訊啊～也太玄幻了币叹。。模狭。??
一面： - 哪方面學的比較好颈抚，哪方面比較薄弱（我直接坦白說算法數(shù)據(jù)結構等計算機基礎可能相對更好點，但是js不太深入嚼鹉，于是后面他就懂了贩汉，全問的算法??）；
- 實現(xiàn)洗牌算法锚赤；
- 實現(xiàn)一個列表中每個li里有一個input和button匹舞，點擊button刪除對應的li節(jié)點；
- 最短路算法（dijkstra）线脚，有負環(huán)怎么辦（spfa）赐稽；
然后面試官就跟我說算法還不錯，后面面試的話多準備準備js原生方法之類的??酒贬。受寵若驚又憨。。锭吨。蠢莺。
