前端面試常問哪些問題?
CSS
1、盒模型
2、flex
3、css單位
4、css選擇器
5、bfc 清除浮動
6、層疊上下文
7、常見頁面佈局
8、響應式佈局
9、css預處理,後處理
10、css3新特性
animation和transiton的相關屬性
animate和translate
11、display哪些取值
12、相鄰的兩個inline-block節點為什麼會出現間隔,該如何解決
13、meta viewport 移動端適配
14、CSS實現寬度自適應100%,寬高16:9的比例的矩形
15、rem佈局的優缺點
16、畫三角形
17、1像素邊框問題
HTML
1、語義化
2、新標籤新特性
3、input和textarea的區別
4、用一個div模擬textarea的實現
5、移動設備忽略將頁面中的數字識別為電話號碼的方法
JS
1、原型/原型鏈/構造函數/實例/繼承
2、有幾種方式可以實現繼承
3、用原型實現繼承有什麼缺點,怎麼解決
4、arguments
5、數據類型判斷
6、作用域鏈、閉包、作用域
7、Ajax的原生寫法
8、對象深拷貝、淺拷貝
9、圖片懶加載、預加載
10、實現頁面加載進度條
11、this關鍵字
12、函數式編程
13、手動實現parseInt
14、為什麼會有同源策略
15、怎麼判斷兩個對象是否相等
16、事件模型
事件委託、代理
如何讓事件先冒泡後捕獲
17、window的onload事件和domcontentloaded
18、for...in迭代和for...of有什麼區別
19、函數柯里化
20、call apply區別,原生實現bind
call,apply,bind 三者用法和區別:角度可為參數、綁定規則(顯示綁定和強綁定),運行效率、運行情況。
21、async/await
22、立即執行函數和使用場景
23、設計模式(要求說出如何實現,應用,優缺點)/單例模式實現
24、iframe的缺點有哪些
25、數組問題
數組去重
數組常用方法
查找數組重複項
扁平化數組
按數組中各項和特定值差值排序
26、BOM屬性對象方法
27、服務端渲染
28、垃圾回收機制
29、eventloop
進程和線程
任務隊列
30、如何快速讓字符串變成已千為精度的數字
ES6
1、聲明 let、const
2、解構賦值
3、聲明類與繼承:class、extend
4、Promise的使用與實現
5、generator(異步編程、yield、next()、await 、async)
6、箭頭函數this指向問題、拓展運算符
7、map和set有沒有用過,如何實現一個數組去重,map數據結構有什麼優點?
8、ES6怎麼編譯成ES5,css-loader原理,過程
9、ES6轉成ES5的常見例子
使用es5實現es6的class
瀏覽器
1、輸入url到展示頁面過程發生了什麼?
2、重繪與迴流
重繪(repaint): 當元素樣式的改變不影響佈局時,瀏覽器將使用重繪對元素進行更新,此時由於只需要UI層面的重新像素繪製,因此 損耗較少
迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時,瀏覽器會重新渲染頁面,稱為迴流。此時,瀏覽器需要重新經過計算,計算後還需要重新頁面佈局,因此是較重的操作。會觸發迴流的操作:
- 頁面初次渲染
- 瀏覽器窗口大小改變
- 元素尺寸、位置、內容發生改變
- 元素字體大小變化
- 添加或者刪除可見的 dom 元素
- 激活 CSS 偽類(例如:
- :hover)
- 查詢某些屬性或調用某些方法
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
迴流必定觸發重繪,重繪不一定觸發迴流。重繪的開銷較小,迴流的代價較高。
3、防抖與節流
4、cookies、session、sessionStorage、localStorage
5、瀏覽器內核
服務端與網絡
1、常見狀態碼
2、緩存
200 From cache和200 ok
400,401,403狀態碼分別代表什麼
瀏覽器緩存
3、cookie, session, token
4、前端持久化的方式、區別
5、DNS是怎麼解析的
6、cdn
7、計算機網絡的相關協議
8、http/https/http2.0
9、get post區別
10、ajax、 axios庫
11、tcp三次握手,四次揮手流程
12、跨域
13、前端安全XSS、CSRF
14、websocket
15、Http請求中的keep-alive有了解嗎
16、網絡分層
17、即時通信,除了Ajax和websocket
18、模塊化,commonJS,es6,cmd,amd
Vue
1、vue解決了什麼問題
2、MVVM的理解
3、如何實現一個自定義組件,不同組件之間如何通信的?
4、nextTick
5、生命週期
6、虛擬dom的原理
7、雙向綁定的原理?數據劫持?
8、組件通信
父->子
子->父
非父子組件
9、Proxy 相比於 defineProperty 的優勢
10、watch computed區別
11、virtual dom 原理實現
12、vue-router(hash, HTML5 新增的 pushState
單頁應用,如何實現其路由功能---路由原理
vue-router如何做用戶登錄權限等
你在項目中怎麼實現路由的嵌套
13、vuex的理解
前端性能優化
頁面DOM節點太多,會出現什麼問題?如何優化?
如何做性能監測
SEO和語義化
這個沒被問過
微信小程序
微信小程序和h5差異,如果有開發weex的經驗,可能會加上weex
git
一些基本命令
Webpack
1、打包原理
2、打包插件
3、webpack熱更新原理
4、優化構建速度
算法
1、排序算法
2、動態規劃,參見揹包問題
3、二叉樹
4、加油站問題(貪心算法)
5、二分法
6、二叉樹遍歷
7、單鏈表反轉
8、取1000個數字裡面的質數
9、找出數組中和為給定值的兩個元素,如:[1, 2, 3, 4, 5]中找出和為6的兩個元素。
10、線性順序存儲結構和鏈式存儲結構有什麼區別?以及優缺點
移動端
1、自適應
2、pwa
3、移動端手勢
附加題
1、無限滾動方案
2、如何處理兼容性問題
3、你遇到過最難的問題是什麼
4、ES6 class與ES5 function區別及聯繫
5、vue怎麼監聽數組
6、寫過webpack loader嗎
7、微信網頁版登錄機制思考
web學習路線(參考)
以下資源麵肥領取後臺 回覆 01 麵肥拿走,,,記得 轉發或評論 一下 就好,謝謝支持95後碼農
後臺 回覆 01 麵肥拿走,,,記得 轉發或評論 一下 就好,謝謝支持95後的碼農