2019初中級前端知識體系

展開查看

1、CSS

• 一、盒模型
• 二、flex
• 三、css單位
• 四、css選擇器
• 五、bfc 清除浮動
• 六、層疊上下文
• 七、常見頁面佈局
• 八、響應式佈局
• 九、css預處理，後處理
• 十、css3新特性
  • animation和transiton的相關屬性
  • animate和translate
• 十一、display哪些取值
• 十二、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決
• 1三、meta viewport 移動端適配
• 1四、CSS實現寬度自適應100%，寬高16:9的比例的矩形
  • 案例：連接
• 1五、rem佈局的優缺點
• 1六、畫三角形
• 1七、1像素邊框問題

2、HTML

• 一、語義化
• 二、新標籤新特性
• 三、input和textarea的區別
• 四、用一個div模擬textarea的實現
• 五、移動設備忽略將頁面中的數字識別爲電話號碼的方法

3、JS

• 一、原型/原型鏈/構造函數/實例/繼承
• 二、有幾種方式能夠實現繼承
• 三、用原型實現繼承有什麼缺點，怎麼解決
• 四、arguments
• 五、數據類型判斷
• 六、做用域鏈、閉包、做用域
• 七、Ajax的原生寫法
• 八、對象深拷貝、淺拷貝
• 九、圖片懶加載、預加載
• 十、實現頁面加載進度條
• 十一、this關鍵字
• 十二、函數式編程
• 1三、手動實現parseInt
• 1四、爲何會有同源策略
• 1五、怎麼判斷兩個對象是否相等
• 1六、事件模型
  • 事件委託、代理
  • 如何讓事件先冒泡後捕獲
• 1七、window的onload事件和domcontentloaded
• 1八、for...in迭代和for...of有什麼區別
• 1九、函數柯里化
• 20、call apply區別，原生實現bind
  • call，apply，bind三者用法和區別：角度可爲參數、綁定規則（顯示綁定和強綁定），運行效率、運行狀況。
• 2一、async/await
• 2二、當即執行函數和使用場景
• 2三、設計模式(要求說出如何實現,應用,優缺點)/單例模式實現
• 2四、iframe的缺點有哪些
• 2五、數組問題
  • 數組去重
  • 數組經常使用方法
  • 查找數組重複項
  • 扁平化數組
  • 按數組中各項和特定值差值排序
• 2六、BOM屬性對象方法
• 2七、服務端渲染
• 2八、垃圾回收機制
• 2九、eventloop
  • 進程和線程
  • 任務隊列
• 30、如何快速讓字符串變成已千爲精度的數字

4、ES6

• 一、聲明 let、const
• 二、解構賦值
• 三、聲明類與繼承：class、extend
• 四、Promise的使用與實現
• 五、generator（異步編程、yield、next()、await 、async）
• 六、箭頭函數this指向問題、拓展運算符
• 七、map和set有沒有用過，如何實現一個數組去重，map數據結構有什麼優勢？
• 八、ES6怎麼編譯成ES5,css-loader原理,過程
• 九、ES6轉成ES5的常見例子
  • 使用es5實現es6的class

5、瀏覽器

• 一、輸入url到展現頁面過程發生了什麼？

• 二、重繪與迴流

  • 重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以 損耗較少
  • 迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。此時，瀏覽器須要從新通過計算，計算後還須要從新頁面佈局，所以是較重的操

  會觸發迴流的操做:

  • 頁面初次渲染
  • 瀏覽器窗口大小改變
  • 元素尺寸、位置、內容發生改變
  • 元素字體大小變化
  • 添加或者刪除可見的 dom 元素
  • 激活 CSS 僞類（例如：:hover）
  • 查詢某些屬性或調用某些方法
  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

  迴流一定觸發重繪，重繪不必定觸發迴流。重繪的開銷較小，迴流的代價較高。

• 三、防抖與節流

• 四、cookies、session、sessionStorage、localStorage

• 五、瀏覽器內核

6、服務端與網絡

• 一、常見狀態碼
• 二、緩存
  • 200 From cache和200 ok
  • 400,401,403狀態碼分別表明什麼
  • 瀏覽器緩存
• 三、cookie, session, token
• 四、前端持久化的方式、區別
• 五、DNS是怎麼解析的
• 六、cdn
• 七、計算機網絡的相關協議
• 八、http/https/http2.0
• 九、get post區別
• 十、ajax、 axios庫
• 十一、tcp三次握手，四次揮手流程
• 十二、跨域
• 1三、前端安全XSS、CSRF
• 1四、websocket
• 1五、Http請求中的keep-alive有了解嗎
• 1六、網絡分層
• 1七、即時通訊，除了Ajax和websocket
• 1八、模塊化，commonJS，es6，cmd，amd

7、Vue

• 一、vue解決了什麼問題
• 二、MVVM的理解
• 三、如何實現一個自定義組件，不一樣組件之間如何通訊的？
• 四、nextTick
• 五、生命週期
• 六、虛擬dom的原理
• 七、雙向綁定的原理？數據劫持？
• 八、組件通訊
  • 父->子
  • 子->父 非父子組件
• 九、Proxy 相比於 defineProperty 的優點
• 十、watch computed區別
• 十一、virtual dom 原理實現
• 十二、vue-router(hash， HTML5 新增的 pushState
  • 單頁應用，如何實現其路由功能---路由原理
  • vue-router如何作用戶登陸權限等
  • 你在項目中怎麼實現路由的嵌套
• 1三、vuex的理解

8、前端性能優化

頁面DOM節點太多，會出現什麼問題？如何優化？ 如何作性能監測 SEO和語義化 這個沒被問過

9、微信小程序

微信小程序和h5差別，若是有開發weex的經驗，可能會加上weex

10、git

一些基本命令

11、打包工具webpack

• 一、打包原理
• 二、打包插件
• 三、webpack熱更新原理
• 四、優化構建速度

12、算法

• 一、排序算法
• 二、動態規劃，參見揹包問題
• 三、二叉樹
• 四、加油站問題(貪心算法)
• 五、二分法
• 六、二叉樹遍歷
• 七、單鏈表反轉
• 八、取1000個數字裏面的質數
• 九、找出數組中和爲給定值的兩個元素，如：[1, 2, 3, 4, 5]中找出和爲6的兩個元素。
• 十、線性順序存儲結構和鏈式存儲結構有什麼區別？以及優缺點

十3、移動端

• 一、自適應
• 二、pwa
• 三、移動端手勢

十4、附加題

• 一、無限滾動方案
• 二、如何處理兼容性問題
• 三、你遇到過最難的問題是什麼
• 四、ES6 class與ES5 function區別及聯繫
• 五、vue怎麼監聽數組
• 六、寫過webpack loader嗎
• 七、微信網頁版登陸機制思考

後記

若是你刷到這裏，你的心裏os是否是：前端知識點好多啊，我記不住啊！大兄弟，我和你同樣，我也記不住，常常學了就忘，沒事，繼續學就行了。。。 我也是一邊面試一邊增長的，因此可能有的知識點分類不合適，請包涵哈。 以前作這些知識點羅列的時候，也沒想發出來，只是單純的作點筆記。這些知識點有的來自於其餘前端小夥伴寫的面經，有的是我本身去面試的時候被問到的。

剛準備面試的時候，心裏慌的不行啊！可是後來發現，"多面面就行了"這句話簡直太正確了，越面越順，並且本身心情也會比較放鬆了。

爲何扯這麼多呢，其實就想告訴正在找工做的同窗們. 堅持！！！