3年多前端菜雞的面試及知識梳理（一）

參考

博客

• 1、中高級前端面試題（萬字長文）
• 2、大前端吊打面試官系列

資料

• 1、HTML 5 教程
• 2、CSS3 教程
• 3、JavaScript 教程

收費小冊
前端面試之道
注：某大佬這本收費小冊干貨很多，有些參考其中的問題，就不列答案了，

寫在前面的話

因為一些特殊原因在家待了很久，博客和github都很久沒有更新了，
這段時間，代碼寫的比較少，但是看了不少書，
因為博主不是科班出身，在家的幾個月把科班的一些書籍都學習了一遍，比如《資料結構》，《計算機組成》，《計算機網路》，《作業系統》，下次有機會，可以把看一些書籍和前端的一些結合來講，
現在主要是待業在家，準備出去找作業，因為疫情原因，先對當前的知識做個整理，
這些整理，只針對于自身的一些問題，
也有自己覺得一些重要，以及一些感悟的地方，

針對自己的查漏補缺

一、html部分

常見行內元素標簽：a、br、code、em、img、input...
常見塊級元素標簽：div、p、dl、dt、form、h1~h6...

新特性

• 用于繪畫的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 對本地離線存盤的更好的支持
• 新的特殊內容元素，比如 article、footer、header、nav、section
• 新的表單控制元件，比如 calendar、date、time、email、url、search

知識欠缺點

• HTML 5 拖放
• HTML 5 Canvas
• TML5 行內 SVG
• HTML 5 應用程式快取
• HTML 5 Web Workers
• HTML 5 服務器發送事件

自己認為重要的一些部分

• HTML5 Input 型別
• HTML5 表單元素
• HTML5 表單屬性

1、HTML5 表單屬性，這個感覺很重要

新的 form 屬性：

- autocomplete
- novalidate

新的 form 屬性：

- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required

HTML 事件屬性（重要）
想了想，這部分還單獨列出來好了，因為在日常開發中，使用到的概率也比較高

Form 事件（重要）

此外還有

• Keyboard 事件
• Mouse 事件（這塊也用的比較多，篇幅原因就不展開列舉了，可以自行查看些html5的教程）
• Media 事件

還有一個比較重要的部分就是video/audio的事件的屬性使用了
HTML 5 視頻/音頻參考手冊，
使用原生寫的時候，做類似的h5活動頁，就很有必要參考這塊了，

小結：

隨著幾大框架的使用，html5中很多屬性的直接應用會變的越來越少，被各種封裝，之前公司做的活動頁
也大都是用vue或者react框架下去制作，然后掛在一個路由下面，
可能在傳統公司的使用還是很多，像一些互聯網公司面試，問這方面的面試題都很少了，
撐死了就隨便問些新特性啊，行塊元素啊，媒體，快取之類的，

二、css部分

1、盒模型（這個面試10次會問到8次）

box-sizing: content-box(默認)----指的是標準模型（本身內容寬高度+邊框和內邊距）

box-sizing: border-sizing-----指的是IE模型（本身內容的寬高度）

2、flex布局（記得有次面試平安的時候，問的很細，也比較重要）

具體參考Flex布局教程：語法篇

3、css選擇器
因為比較基礎，好像問的比較少了，最早的時候還是會問些后代選擇器和子選擇器之類的，

4、display的值（這個經常問！！！）

5、清浮動（*）

6、posiiton的值：（和display一樣，也經常問，這樣基礎的應該都要掌握）

7、CSS3新特性

• 過渡
• 影片
• 形狀轉換
• 選擇器
• 陰影
• 文字陰影: text-shadow: 2px 2px 2px #000;(水平陰影，垂直陰影，模糊距離，陰影顏色)
• 盒子陰影: box-shadow: 10px 10px 5px #999
• 邊框
• 背景
• 文字
• 漸變
• 彈性布局、柵格布局、多列布局
• 媒體查詢

8、Sass、Less、Stylus區別
感覺這個問題的即使回答不完全，好像也不是很重要，只要用過其中一種預處理預言，面試官都覺不會在這個問題上糾結太久

9、字體
之所以單獨列出來，是因為我們很多圖示都開始采用字體的形式，例如阿里字體，

注：自身欠缺的知識點

• 影片（太多的業務代碼，導致對影片效果的要求不斷的降低）
• 陰影
• 漸變
• 背景（背景用的好的話，真的會有妙用，可惜自身掌握的也不太好，）

小結：

css一直都重要，特別是布局排版，還有一些兼容部分，
不管哪次面試，css都是必不可少的環節
熟練掌味訓本的css，在日常的開發會少很多坑
比如還有什么1像素的問題之類的，都是要在不斷的采坑中，慢慢成長的，
隨著css3特性的不斷強大，能夠代替js做不少影片，好好使用，也會有不錯的效果，
面試之前，應該也要好好把整個css部分，再過一遍

三、js部分

1、js基本資料型別（面試問的概率超高，應該算是基礎吧）

undefined、number、string、null、boolean+object ES6新增Symbol

2、var、let、const 三者的區別什么？

var 存在變數提升，而 let、const 則不會，
var 的全域宣告的變數會掛載到 window 上，而其他兩者不會，
let 和 const 的作用基本一致，后者宣告的變數不能再次賦值

注：有面試官會問你const的宣告物件常量，能不能更改物件中的值，建議自己去實作下，，，

2、原生ajax（以前問的很多，現在框架增多，很多都是請求庫，這個反而問的不怎么多了）

如何創建Ajax
XMLHttpRequest物件的作業流程
==========兼容性寫法===========
var xmlHttp = null;
if(window.XMLHttpRequset) {
    // IE7+,Firefox,Chrome,Safari,Opera
    xmlHttp = new XMLHttpRequset();
}
else {
    // IE5,IE6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
兼容性處理
事件的觸發條件
xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        responseText、responseXML
    }
}
事件的觸發順序
======================注意=================
如果是POST請求則需要添加頭
xmlHttp.setRequestHeader("Content-type": "application/x-www-form-urlencoded")

3、深拷貝，淺拷貝（很常見）

4、Promise的理解和實作（如果現場要求手寫一個promise比較難，我也只能說說思路，這點也比較欠缺誒）

5、繞不開的閉包問題（問的概率一半一半）

6、原型鏈

7、map, filter, reduce的作用和區別

8、微任務和宏任務（有次面試網易的時候，有問到，這塊要掌握好了，對Event Loop的了解會有很大的識訓）

小結：

js這部分向來都是問的最多的這塊，隨著es6的普及，很多次面試都會問es6的東西了，當然es5本身也是
需要掌握的更加扎實，
而且后續的使用vue，react等框架，也離不開js的支撐，所以js是務必最需要重視的一塊

下一篇博文的地址：3年多前端菜雞的面試及知識梳理（二）

總結

對html部分和css的部分掌握的還算良好，js卻很長時間，因為業務代碼的關系，后期一直沒有得到良好
的發展，也沒有形成自己的知識體系，
因為篇幅有限，這期就先寫這么多，后續的話，應該是更新
工程化，HTTP，vue，react，幾個框架，
再往后，也有可能對小程式呀，app之類的，對自身的情況做個總結，

標籤：HTML5

上一篇：WebSocket以及socketIO的使用

下一篇：Vue.js 從原始碼理解v-for和v-if的優先級的高低