今天去面了阿里巴巴廣州UC總部的前端工程師職位,感覺這份筆試題還是出的挺有意思的,考完趁熱反思一下自己做題過程的一些問題,稍作總結
如我一開始想的,筆試的題目果然沒有考所謂的計算機網絡,數據邏輯那些要太多去背的東西,下面列出的題目不按順序,想到哪寫到哪~有想法的歡迎在評論區指正
第一題
假設存在a數組,假定數組內的元素均為Number,a如果長度為0,則添加1,否則按先進先出原則去掉一個元素,考慮性能與代碼長度(字符<30滿分),盡量用最優的代碼實現。
代碼邏輯很簡單
return a.length>0?a.splice(0,1):a.push(1)
寫到這里想到了一個很偏的性能優化,下標方式添加數組在chrome上比用push快43%,不過這里只有一個元素,無所謂啦~
第二題
一道比較有關閉包的題目,本來以為自己是對的...栽坑了(后面不記得有沒有參數)
var func = (function(a){ this.a = a; return function(a){ a+=this.a; return a; } })(function(a,b){ return a; }(1,2)); func(4)
我開始的思路判斷兩個閉包是對的,后面想太多以為里面的第二個閉包function(x,y){return x+y}(2,3)應該會拋出一個錯誤然后被接收,然后數字加上一個不為數字的值等於NaN...天真了,拋開這點這只是一個簡單的閉包,答案應該是5,可以復制到控制台上看一下輸出
第三題
在一個body中插入十個<ul><li>第1項</li></ul>,考慮效率和性能
這里我本來想用DocumentFragment的方式來創建元素然后插入,不過想起之前看過的一篇文章提到在現代瀏覽器上已經對重流和重繪做出了延遲,性能已經不能有什么優化了,直接插入html更加高效。
var str='<ul>',$body; for(var i = 1;i<=10;i++){ str+='<li>第'+i+'項</li>' } str+='</ul>' $body=typeof document.querySelectorAll=='function'?document.querySelectorAll('body')[0]:document.getElementsByTagName('body')[0]; $body.innerHtml+=str;
第四題
創建一個長度為100的數組array,值等於其下標
so easy,不用push還是考慮下標性能更好
for(var i = 0;i<100;i++) array[i]=i
第五題
對上數組亂序排序
寫得時候我用了兩個random來操作,現在想想一個就夠了
var i ,j,temp; for(i =0;i<100;i++){ j=Math.floor(Math.random()*100); temp=array[i]; array[i]=array[j]; array[j]=temp; }
第六題
優雅的方式對前十個數組元素相加
優雅...想了想,可以用柯里化函數來做...測了一下又發現自己寫錯了,心疼(┬_┬)
function sum(x){ function add(y){ x+=y return add } add.toString=add.valueOf=function(){ return x } return add } for(var i =0;i<10;i++) sum=sum(array[i]) console.log(sum)
第七題
列出你知道的繼承父類的方式,以及平時你喜歡用的方式,有什么優點?
考察了面向對象編程的一些東西,筆試的時候我只想到了三種,列了兩種,提了自己比較喜歡的一種
分別為拷貝繼承(寫得時候記成寄生模式...)和直接繼承prototype,還有其他幾種,感興趣的可以自己查一下,還有通過空對象繼承,我寫了個extend的方法
function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; }
最后提了一下TypeScript和ES6里面的Class
第八題
根據雅虎前端優化法則,對html,css,js,圖片資源應該做出怎么樣的處理
寫得時候想不起雅虎定律,只記得剛學前端的時候看了下,后來的后來就不記得了...所以這題我隨便扯了一些自己平時在部署前端上線前對資源做的處理,大體就是對資源文件的合並壓縮混淆以及加載策略的選擇,減少HTTP請求數量,spring圖,內聯圖片轉base64,gzip壓縮,優化圖片,對不同設備提供不同大小質量圖片,提到了很多,不過少了一些服務端配置的東西
第九題
上面的流程能不能自動化?
我提到了webpack,systemjs等模塊加載器來打包應用,或者使用像gulp,grunt,fls等前端自動化構建工具來配置自動化構建架構,不過還是少說了一點服務端的東西。
第十題
正則匹配 *.9game.cn,如在內容內容 http://www.9game.cn/home/page 內容內容 替換為 內容內容 <a>http://www.9game.cn/home/page</a> 內容內容
回來之后仔細想了想,寫了下面三種



第十一題
如果上面的代碼對性能要求很高,如何讓其發布的時候錯誤率盡可能低,對代碼質量做出有效性指標
我提到了引入PDD測試驅動,提高測試的覆蓋率,還有多分支開發,避免在主分支上產生問題,出現問題也能及時回滾
第十二題
網頁開發出現問題的時候你如何定位問題,中你常用的調試工具或者其他輔助工具
我開發的時候用的是chrome控制台調試定位問題,調試IE兼容性時用的是Edge新提供的調試工具,輔助工具如jshint代碼質量保證以及開發Angular,React時還會用到對應的調試插件,還有就是在代碼中打log。
第十三題
偏偏在本地測試頁面完全正常,偏偏(出題人之幽默)上線網頁的時候出現異常,如何來解決
我看到這個題目馬上想起自己之前部署頁面遇到的很多奇葩問題,有感而發寫了自己認為比較合理的排查問題的順序。
首先先查看一下服務器是否能正常啟動,接口能否正常訪問,靜態資源是否正常加載,如果沒有問題,這個時候我們可以看看控制台有什么比較隱蔽的報錯沒有(其實也沒所謂隱蔽,通常來說在檢驗前面步驟的時候也會看到),根據錯誤來定位一下具體是什么問題,例如像我之前遇到的嚴格模式不能重復定義變量的問題~
如果控制台一片潔白,沒有什么報錯,資源也正常加載,這個時候你可能進入了某些奇怪的坑中了,面對這種疑難雜症,我一般采取試試google一下用到東西的關鍵詞以及遇到的問題,或者請教一下前輩。
第十四題
解決回調地獄的方式,一句話概括一下優勢
我提到了promise.then鏈式調用的方式,還有封裝回調函數來精簡回調的邏輯,最后也說了一下ES6中的yeild語句,用同步的語法寫異步。
第十五題
總共十五道題~還有一題忘記了
整理完發現自己在幾道有明確答案的題目上都錯了,基礎還是不夠扎實,岌岌可危...求后續,我回去哭了(┬_┬)
