jisuanke面經(jīng)
CSS
手寫一個布局
用float寫出來了借帘。
那用flex怎么實現(xiàn)锡溯？
不會（囧）
BootStrap用過嗎？有什么特點龄坪？用BootStrap寫一個三列的div砌庄。你知道BootStrap的網(wǎng)格布局是怎么實現(xiàn)的嗎羹唠？
答：響應(yīng)式，組件化娄昆。col-md-3佩微。使用百分比
為什么有的網(wǎng)站一到移動端就不自適應(yīng)了？就是尺寸什么的都不對（不知道怎么表達）……
答：沒加那個標簽
用過less或者sass嗎萌焰？
看過less的文檔哺眯，沒真正用過
你覺得這類CSS預(yù)處理語言有什么特點？
支持變量和函數(shù)式書寫樣式（嵌套）
input（type）的默認值（就是那種灰色的字）怎么實現(xiàn)扒俯，如果用腳本呢奶卓？
用placeholder那個屬性
大概想了一下一疯，思路是onload的時候給一個初始值，然后onfocus清空夺姑，onblur的時候檢測一下文本值墩邀，如果是空的，那么再賦值初始值盏浙，如果不是空的那么不用改動
JS
怎樣理解閉包眉睹？
老生常談，不羅嗦了……
前端性能優(yōu)化废膘？
一方面竹海，自動化處理工具、插件丐黄；另一方面斋配，代碼規(guī)范
知道循環(huán)事件嗎 loopEvents？
不知道（囧）灌闺，
很重要
艰争，不知道的小伙伴快去看一下
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
看不懂就看這個視頻（2014JSConf上的一個小哥，深入淺出）
http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
說一下bower, yeoman, grunt, webpack的區(qū)別菩鲜？
bower是包管理工具，yeoman算是一個工具箱吧惦积，幫助快速構(gòu)建項目搭建“地基”接校，grunt/gulp的話算是標準意義上的自動化工具，提供的插件挺多狮崩，功能blahblah……webpack/browserify的話就是幫你分析靜態(tài)資源之間的依賴關(guān)系然后進行整合蛛勉。
介紹一下ES6的新特性？你用什么來寫ES6睦柴？
箭頭函數(shù)诽凌、塊級作用域、模塊依賴import/export坦敌、Promise對象……
Babel侣诵。
IE和其他瀏覽器的監(jiān)聽事件的方法有什么不同？那怎么在腳本中判斷用哪種方法呢狱窘？
IE用的是attachEvent()杜顺，其他用的是addEventListener()
當時想的是用window的navigator對象獲取瀏覽器的版本信息，但是其實只用一條簡單的兼容測試就好了（好蠢蘸炸，這都忘了）：
if(this.attachEvent)
以下代碼會輸出什么躬络？
var foo = function () {
for (var i = 0; i < 10000; i++) {}
console.log(1)
}
var bar = function () {
console.log(2)
}
setTimeout(foo, 0)
setTimeout(bar, 0)
//1， 2
答成2搭儒，1了穷当，因為不知道Eventloop所以沒答上來提茁，其實foo和bar是在一個queue里的，只能順序執(zhí)行馁菜，其他的命令默認是在stack里
以下代碼有何不同茴扁？
var a = b = 2;
// ———————————
var a = 2;
var b = 2;
一開始回答沒區(qū)別，后來面試官提示b的作用域火邓，答案是第一種寫法的b有全局作用域
可以看一下stackoverflow上這個問題丹弱，挺有意思的：
http://stackoverflow.com/questions/27329444/why-a-is-undefined-while-b-is-3-in-var-a-b-3/27329477
如何實現(xiàn)一個每次被調(diào)用時會返回被調(diào)用次數(shù)的函數(shù)？
// foo() // return 1
// foo() // return 2
function foo () {
var count = 0;
return function () {
return ++count;
};
}
var bar = foo();
bar(); //1
bar(); //2
考察用閉包保存count的值铲咨。
foo的函數(shù)我寫出來了 但是使用的時候一定要先賦值給一個變量bar躲胳，否則會每次都刷新count，這樣是不對的：
//Wrong!
foo()();//1
foo()();//1
寫一個times函數(shù)纤勒，使調(diào)用 (n).times( func ) 時可以循環(huán)執(zhí)行該函數(shù) n 次坯苹？（寫法固定，必須這么寫）
想到了用this摇天，但是沒想出來怎么取得前面n的值粹湃，而且這個還牽扯到基本類型原型綁定函數(shù)，看來自己還是NAIVE
function times (fn) {
var count = this.valueOf();
//也可以這么寫
//var count = parseInt(this);
for (var i = 0; i < count; i++) {
fn();
};
}
Number.prototype.times = times; //綁定
如何實現(xiàn)類和繼承泉坐？
不詳細說了为鳄，反正就是組合繼承那一套，先在子類的構(gòu)造函數(shù)里用apply調(diào)用父類的構(gòu)造函數(shù)然后再把父類的實例復(fù)制給子類的原型腕让。
```
function Parent () {
//constructor
}
function Child () {
//constructor
Parent.apply(this);
}
Child.prototype = new Parent();
```
那怎么在子類中實現(xiàn)重載孤钦？（先調(diào)用父類的方法然后調(diào)用自己的新方法）
我是這么想的：
//子類里（Child）
function Child(){
this.foo = function () {
Parent.foo.apply(this);
//自己的新方法
...
}
}
好像不對？
數(shù)據(jù)結(jié)構(gòu)/算法：
1.介紹一下你知道的數(shù)據(jù)結(jié)構(gòu)纯丸。線性表偏形、鏈表、隊列觉鼻、棧俊扭、圖、樹blahblah
2.鏈表比線性表有什么好處坠陈？插入和刪除元素只需要改動兩個指針
3.怎么在JS中模擬隊列和棧萨惑？棧：push pop 隊列：shift unshift
4.反轉(zhuǎn)字符串
```
function reverseStr (str) {
var strArr = str.split(“”);
var newArr = [];
for (var i = strArr.length - 1; i >= 0; i—) {
newArr.push(strArr[i]);
}
var newStr = newArr.join(“”);
return newStr;
}
```
這個主要考察字符串操作，之前在CodeWar做過一個類似的仇矾，所以很快就寫出來了咒钟。
5.斐波那契數(shù)列
悔得我腸子都綠了，光記得用遞歸若未，然后具體竟然忘了怎么寫……
function fibonacci (n) {
if(n === 1 || n === 2) {
return 1;
}
return fibonacci(n-1) + fibonacci(n-2);
}
腸子都綠了爸熳臁！！Ｆ兼摇Ｎ谖簟！
React相關(guān)的：
1.介紹一下React
大體提了一下核心概念壤追，V的一個框架磕道，VirtualDOM，props,state…
2.知道什么是單項數(shù)據(jù)流嗎行冰？
一開始聽錯了溺蕉，還以為是雙向綁定什么之類的。
后來答出來了悼做，就是React里props的單向傳遞
3.你說到了Virtual DOM疯特，那你知道Virtual DOM有什么好處嗎？
性能優(yōu)化（具體到有利于后端進行頁面渲染沒答出來肛走，這個真不知道）
其他
HTTP協(xié)議的request包含什么內(nèi)容漓雅？
請求行，RequestHeader和body
HTTP的狀態(tài)碼有哪些朽色？304知道嗎邻吞？
只知道404和5XX，304不知道（有緩存葫男，內(nèi)容暫未修改）
1XX 提示信息 - 表示請求已被成功接收抱冷，繼續(xù)處理
2XX 成功 - 表示請求已被成功接收，理解梢褐，接受
3XX 重定向 - 要完成請求必須進行更進一步的處理
4XX 客戶端錯誤 - 請求有語法錯誤或請求無法實現(xiàn)
5XX 服務(wù)器端錯誤 - 服務(wù)器未能實現(xiàn)合法的請求
HTTP方法有哪些旺遮？有什么區(qū)別？
GET利职，POST趣效，PUT瘦癌，DELETE
區(qū)別:GET：查詢猪贪；POST：改動、更新讯私；PUT：增加热押；DELETE:刪除
https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
什么是語義化？你說到了有利于SEO優(yōu)化斤寇，你做過這方面的優(yōu)化嗎桶癣？
機器理解的html標簽，有利于SEO優(yōu)化娘锁。
沒做過（囧）
事后查了一下：
title：只強調(diào)重點即可牙寞，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，每個頁面title要有所不同间雀。
description：把網(wǎng)頁內(nèi)容高度概括到這里悔详，長度要合理，不可過分堆砌關(guān)鍵詞惹挟，每個頁面description要有所不同
重要內(nèi)容不要用JS輸出茄螃。爬蟲不會讀取JS里的內(nèi)容，所以重要內(nèi)容必須放在HTML里连锯。
盡少使用iframe框架归苍。搜索引擎不會抓取到iframe里的內(nèi)容，重要內(nèi)容不要放在框架中运怖。
為圖片加上alt屬性拼弃。
http://uxc.#/archives/984.html
那你知不知道你谷歌結(jié)果的標題為什么是這個？
不知道驳规，回來看了一下其實就是里的內(nèi)容
接觸過函數(shù)式編程嗎肴敛？建議你去學(xué)一下
大體了解，沒自學(xué)過…@.@
怎樣判斷兩個矩形是否存在重合部分（考慮旋轉(zhuǎn)）
這個問題當時沒答出來吗购，可能是因為時間比較緊而且有點緊張医男。
其實兩個矩形存在重合部分的充要條件就是“其中一個矩形的有至少一個頂點在另外一個矩形內(nèi)”
剩下的問題就是怎么判斷一個點是不是在矩形內(nèi)了，考慮到有旋轉(zhuǎn)所有牽扯到坐標系轉(zhuǎn)換的問題捻勉，用三角函數(shù)就OK了镀梭。
總結(jié)
面試官是從知乎上認識的一個前端的前輩，敬仰已久踱启，聊了一個半小時报账，對我的評價是還需要加強基礎(chǔ)和算法……哎，一直覺得自己基礎(chǔ)還行埠偿，然后今天啪啪打臉了……回來之后拿出了那本塵封已久的《權(quán)威指南》透罢，繼續(xù)加油吧
?
