知識點複習脈絡

時間 2019-11-10

標籤知識複習脈絡简体版

原文原文鏈接

css

一、盒模型css
二、flexhtml
三、css單位前端

%百分比 in 英寸 cm釐米 mm毫米   em（1em 等於當前的字體尺寸。2em 等於當前字體尺寸的兩倍。



例如，若是某元素以 12pt 顯示，那麼 2em 是24pt。在 CSS 中，em 是很是有用的單位，由於它能夠自動適應用戶所使用的字體。）

px像素（1.px：絕對單位，頁面按精確像素展現） .em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px）

，整個頁面內1em不是一個固定的值

3.rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

4.vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。

5.vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。

6.vmin：vw和vh中較小的那個。

7.vmax：vw和vh中較大的那個。

.pc:pica，大約6pt，1/6寸

.ex：取當前做用效果的字體的x的高度，在沒法肯定x高度的狀況下以0.5em計算(IE11及如下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加麼有前綴)

ch:以節點所使用字體中的「0」字符爲基準，找不到時爲0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

四、css選擇器 http://www.w3school.com.cn/cssref/css_selectors.aspvue
五、bfc 清除浮動android
六、層疊上下文webpack
七、常見頁面佈局ios
八、響應式佈局css3
九、css預處理，後處理git
十、css3新特性es6

animation和transiton的相關屬性
animate和translate

十一、display哪些取值
十二、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決
1三、meta viewport 移動端適配
1四、CSS實現寬度自適應100%，寬高16:9的比例的矩形
1五、rem佈局的優缺點
1六、畫三角形
1七、1像素邊框問題

html

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

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、如何快速讓字符串變成已千爲精度的數字

ES6

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

使用es5實現es6的class

瀏覽器

一、輸入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
五、瀏覽器內核

服務端與網絡

一、常見狀態碼
二、緩存

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

Vue

一、vue解決了什麼問題
二、MVVM的理解
三、如何實現一個自定義組件，不一樣組件之間如何通訊的？
四、nextTick
五、生命週期
六、虛擬dom的原理
七、雙向綁定的原理？數據劫持？
八、組件通訊

父->子
子->父
非父子組件

九、Proxy 相比於 defineProperty 的優點
十、watch computed區別
十一、virtual dom 原理實現
十二、vue-router(hash， HTML5 新增的 pushState

單頁應用，如何實現其路由功能---路由原理
vue-router如何作用戶登陸權限等
你在項目中怎麼實現路由的嵌套

1三、vuex的理解

前端性能優化

頁面DOM節點太多，會出現什麼問題？如何優化？
如何作性能監測

SEO和語義化

這個沒被問過

微信小程序

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

git

一些基本命令

打包工具webpack

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

算法

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

移動端

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

css
- 一、盒模型
- 二、flex
- 三、css單位
- 四、css選擇器
- 五、bfc 清除浮動
- 六、層疊上下文
- 七、常見頁面佈局
- 八、響應式佈局
- 九、css預處理，後處理
- 十、css3新特性
- 十一、display哪些取值
- 十二、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決
- 1三、meta viewport 移動端適配
- 1四、CSS實現寬度自適應100%，寬高16:9的比例的矩形
- 1五、rem佈局的優缺點
- 1六、畫三角形
- 1七、1像素邊框問題
html
- 一、語義化
- 二、新標籤新特性
- 三、input和textarea的區別
- 四、用一個div模擬textarea的實現
- 五、移動設備忽略將頁面中的數字識別爲電話號碼的方法
JS
- 一、原型/原型鏈/構造函數/實例/繼承
- 二、有幾種方式能夠實現繼承
- 三、用原型實現繼承有什麼缺點，怎麼解決
- 四、arguments
- 五、數據類型判斷
- 六、做用域鏈、閉包、做用域
- 七、Ajax的原生寫法
- 八、對象深拷貝、淺拷貝
- 九、圖片懶加載、預加載
- 十、實現頁面加載進度條
- 十一、this關鍵字
- 十二、函數式編程
- 1三、手動實現parseInt
- 1四、爲何會有同源策略
- 1五、怎麼判斷兩個對象是否相等
- 1六、事件模型
- 1七、window的onload事件和domcontentloaded
- 1八、for...in迭代和for...of有什麼區別
- 1九、函數柯里化
- 20、call apply區別，原生實現bind
- 2一、async/await
- 2二、當即執行函數和使用場景
- 2三、設計模式(要求說出如何實現,應用,優缺點)/單例模式實現
- 2四、iframe的缺點有哪些
- 2五、數組問題
- 2六、BOM屬性對象方法
- 2七、服務端渲染
- 2八、垃圾回收機制
- 2九、eventloop
- 30、如何快速讓字符串變成已千爲精度的數字
ES6
- 一、聲明 let、const
- 二、解構賦值
- 三、聲明類與繼承：class、extend
- 四、Promise的使用與實現
- 五、generator（異步編程、yield、next()、await 、async）
- 六、箭頭函數this指向問題、拓展運算符
- 七、map和set有沒有用過，如何實現一個數組去重，map數據結構有什麼優勢？
- 八、ES6怎麼編譯成ES5,css-loader原理,過程
- 九、ES6轉成ES5的常見例子
瀏覽器
- 一、輸入url到展現頁面過程發生了什麼？
- 二、重繪與迴流
- 三、防抖與節流
- 四、cookies、session、sessionStorage、localStorage
- 五、瀏覽器內核
服務端與網絡
- 一、常見狀態碼
- 二、緩存
- 三、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
Vue
- 一、vue解決了什麼問題
- 二、MVVM的理解
- 三、如何實現一個自定義組件，不一樣組件之間如何通訊的？
- 四、nextTick
- 五、生命週期
- 六、虛擬dom的原理
- 七、雙向綁定的原理？數據劫持？
- 八、組件通訊
- 九、Proxy 相比於 defineProperty 的優點
- 十、watch computed區別
- 十一、virtual dom 原理實現
- 十二、vue-router(hash， HTML5 新增的 pushState
- 1三、vuex的理解
前端性能優化
- 頁面DOM節點太多，會出現什麼問題？如何優化？
- 如何作性能監測
SEO和語義化

這個沒被問過

微信小程序

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

git

一些基本命令

打包工具webpack
- 一、打包原理
- 二、打包插件
- 三、webpack熱更新原理
- 四、優化構建速度
算法
- 一、排序算法
- 二、動態規劃，參見揹包問題
- 三、二叉樹
- 四、加油站問題(貪心算法)
- 五、二分法
- 六、二叉樹遍歷
- 七、單鏈表反轉
- 八、取1000個數字裏面的質數
- 九、找出數組中和爲給定值的兩個元素，如：[1, 2, 3, 4, 5]中找出和爲6的兩個元素。
- 十、線性順序存儲結構和鏈式存儲結構有什麼區別？以及優缺點
移動端
- 一、自適應
- 二、pwa
- 三、移動端手勢
附加題