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);
}
腸子都綠了爸熳臁!!F兼摇N谖簟!
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ù)加油吧
?