面試題
- 1.box-sizing屬性有幾個值，分別代表什麼？
- content-box ：在寬度和高度之外繪製元素的內邊距和邊框
- border-box：爲元素設定的寬度和高度決定了元素的邊框盒
- inherit：規定應從父元素box-sizing屬性的值
2.舉例說明幾個css可以繼承與不可以繼承的屬性？
- 可繼承
- 1.文本屬性
- 2.盒子模型的屬性（寬高，邊框，邊距）
- 3.背景屬性（background系列）
- 4.定位屬性（float、clear、position等）
- 5.生成內容屬性（content、counter-reset、counter-increament
- 6.輪廓樣式屬性（outline系列）
- 7.頁面樣式屬性（size）
- 不可繼承
- 字體系列屬性
- 文本系列屬性
- 元素可見性
- 表格佈局屬性
- 列表佈局屬性
- 生成內容屬性
3.position的值，relative和absolute分別是相對於誰定位的？
- async:true異步
ajax發送請求後，在等待server端返回的這個過程中，後臺會繼續執行ajax塊後面的腳本，知道server返回正確的結果纔會去執行success，也就是說這時執行的是兩個線程（ajax塊發出請求後是一個線程，ajax塊後面的腳本是一個線程）
$.ajax({
type:'POST',
url:"",
dataType:"",
success:function(result){
f1();
f2();
}
failure:function(result){
alert('Failed')
}
})
function2()
//ajax發出請求後，將停留在function1，等server端的返回，但同時（在這個等待的過程中）前臺會去執行function（）- async:false同步
ajax塊發出請求後，會等待在function1的地方，知道function1執行完成纔會執行function2
- 7.舉例寫幾個jQuery關於dom階段的操作命令（https://www.processon.com/mindmap/58caa8c0e4b0d15a7562475d）
- 1.text()設置貨返回元素的文本內容
- 2.html()設置或返回元素內容包括HTML標籤
- 3.val（）設置貨返回表單字段的值
- 4.attr（）獲取屬性值
- 5.append（）末尾插入
- 6.appendTo（）元素位置轉移
- 7.prepend（）開頭插入
- 8.after（）在選擇元素之後插入
- 9.before（）在選擇元素之前插入
- 8.簡述本地存儲
- 實現用戶瀏覽器對數據的本地存儲
- HTML5之前，應用程序數據只能存儲在cookie中，包括每個服務器請求。本地存儲更爲安全，可在不影響網站性能的前提下將大量數據存儲與本地
- 本地存儲經由起源地（origin）（經由域和協議），所有頁面，從起源地能夠存儲和訪問相同的數據
9.說明瀏覽器的渲染過程（https://zhuanlan.zhihu.com/p/29418126）
- 關鍵渲染路徑（Critical Reandering Path）是指與當前用戶操作有關的內容。
- 瀏覽器渲染頁面的過程
- 1.DNS查詢
- 2.TCP連接
- 3.HTTP請求即響應
- 4.服務器響應
- 5.客戶端渲染（渲染書構建，佈局及繪製）
- （1）處理HTML標記並構建DOM樹
- （2）處理css標記並構建CSSOM樹
- （3）將DOM與CSSOM合併成一個渲染樹
- （4）根據渲染樹來佈局，以計算每個節點的幾何信息
- （5）將各個節點繪製到屏幕上
10.常見的瀏覽器兼容問題有哪些？
- 11.IE與Mozilla的事件機制有什麼區別？
- 12.ES5和ES6中的繼承有什麼區別，怎麼實現的？
- es5（原型鏈繼承–》逐級查找）
- 13.舉例說幾個sass與less的區別
- 14.簡單說明你對typescript的瞭解
- 15.簡述webpack的原理與作用
- 16.angular、react、vue常用的功能有哪些
- 17.代碼託管工具，日常用到的命令
- 18.常用的PC端與移動端第三方UI框架有哪些
- 19.通過前端技術如何實現網頁加載速度？
- 20.如何控制文件是否需要HTML緩存，簡述HTML緩存的原理
- 21.關於網站安全性，前端開發有哪些需要考慮的問題
- 22.要統計每個http請求從服務器返回的時間，簡單描述實現思路
面試官問題
- 1.怎麼和後臺數據交互，怎麼處理從後臺來的數據
- 2.原生和jQuery操作dom的方法
- 3.瀏覽器渲染頁面
- 4.HTML、css、js的加載順序
- 5.原生方面的瀏覽器兼容（IE8及以上不同版本）
- 6.if註釋是兼容IE幾？哪方面的?
- 7.上拉加載下拉刷新一會使用插件還是自己寫？
- 8.react的生命週期有幾個？
9.在循環裏使用定時器需要注意什麼？
一定要保存當前的i的值再做處理，否則，你拿到的i的值會是for循環裏最大的那個
js代碼由上自下讀取，讀取到i滿足if語句的時候並不是停止了，還會繼續做循環判斷，而此時if語句裏面是個延時器，黨延時器時間結束要調用aa函數的時候，for循環已經結束，而此時的i變爲10
解決方法
var j = null; for (var i = 0; i < 10; i++) { if(i == 5){ j = i; setTimeout(aa,2000); function aa(){ console.log( "i="+j); } } }10.es6的新特性，es6的promise，怎麼在promise中讓之後的代碼不執行(主動阻塞）
- 新特性
- 默認參數（可以將默認值直接放在函數簽名中）
- 模板表達式（var name=
Your name is ${first} ${last}） - 多行字符串
- 拆包表達式(var {house,mouse}=$(“body”).data() 在數組中也能用 )
- 改進的對象表達式
- 箭頭函數
- Promise
- 塊級作用域let和const
- 類
- 模塊化
拋出錯誤後停止promise
//思路：發生無法繼續的錯誤後，直接返回一個始終不resolve也不reject的Promise，即這個Promise永遠處於pending狀態，那麼後面的Promise鏈就會一直等着既不執行了 Promise.stop=function(){ return new Promise(function(){}) } doSth() .then(value=>{ if(sthBigErrotOccured()){ return Promise.stop() } //normal logic }) .catch(reson=>{ //will never get called //normal logic }) .then() .catch(res=>{ //will nerver get called //normal logic }) .then() .catch(res=>{ //wil nerver get called //normal logic }) //優點： 幾乎不用改變現有代碼；兼容性好；不管使用哪個Promise庫，甚至不同的Promise之間相互調用，都支持 //缺點： 會造成內存泄漏
- 新特性
- 11.說說你瞭解的面向對象？繼承有幾種方式
- 12.面向對象中的this指針問題
- 13.bind,apply,call的區別
- call 參數與方法中的對應
- apply 第二個參數是數組，與方法中的對應
- bind返回的仍然是個函數，可以在調用的時候再進行傳參
- 14.CSS3的動畫，實行動畫的方式，transform中的scale有什麼方法能讓它放大不變回去
- 15.redux，不用redux的話自己定義的本地數據存放在那？store裏的數據是公用的嗎？組件之間如何進行數據交互如何傳值的？
- 16.jQuery的動畫
- 17.react的組價通信有幾種方式？react怎麼
- 18.es6是怎麼進行編譯的
- 19.webpack需要配置什麼
- 20.es6相對於es5新增了哪些東西？
- 21.react會用到class（類）嗎？class的繼承是通過什麼繼承的？super需要傳什麼參數嗎？
- 22.常見的網站攻擊，XSS攻擊的原理是什麼？
- 23.js怎麼進行邏輯處理
- 24.git創建分支有幾種方式？常用的git命令。
- 25.遞歸和定時器哪個處理邏輯更方便