前端面經知識點總結1

時間 2019-11-10

標籤端面知識總結简体版

原文原文鏈接

HTML

對 DIV， Table 佈局的理解
語義化的HTML理解
對HTML5的理解
對doctype的理解
…

其餘都很簡單，我主要說說對doctype的理解，以前熟悉個大概，可是本身感受沒有表達清楚。css

<!DOCTYPE>處於<html>標籤以前，此標籤可告知瀏覽器文檔使用哪一種HTML或XHTML規範。
該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML版本（假如文檔中的標記不遵循doctype聲明所指定的DTD，這個文檔除了不能經過代碼校驗以外，還有可能沒法在瀏覽器中正確顯示。）html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

解析：在上面的聲明中，聲明瞭文檔的根元素是 html，它在公共標識符被定義爲 「-//W3C//DTD XHTML 1.0 Strict//EN」 的 DTD 中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的 DTD。若是找不到，瀏覽器將使用公共標識符後面的 URL 做爲尋找 DTD 的位置。前端

：表示組織名稱未註冊。Internet 工程任務組(IETF)和萬維網協會(W3C)並不是註冊的 ISO 組織。+爲默認,表示組織名稱已註冊。
DTD ：指定公開文本類，即所引用的對象類型。默認爲DTD（document type definition）。
HTML：指定公開文本描述，即對所引用的公開文本的惟一描述性名稱。後面可附帶版本號。默認爲HTML。
URL：指定所引用對象的位置。
Strict：排除全部 W3C 專家但願逐步淘汰的表明性屬性和元素。

三種HTML文檔類型面試

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset正則表達式

Strict：算法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

若是須要乾淨的標記，免於表現層的混亂，用HTML Strict DTD類型。前端工程化

Transitional：瀏覽器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

Transitional DTD 可包含 W3C 所指望移入樣式表的呈現屬性和元素. 若是用戶使用了不支持層疊樣式表（CSS）的瀏覽器以致於你不得不使用 HTML 的呈現特性時，用 Transitional DTD 類型數據結構

Frameset：閉包

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset DTD 等同於 Transitional DTD

三種 XML 文檔類型：

Strict
Transitional
Frameset
XHTML 1就是HTML 4.01的XML化，是一種不向前兼容的格式。
最新的 HTML5的doctype 不須要對DTD引用。

CSS

盒子模型的理解
box-sizing的理解
positon的理解
如何清除浮動
選擇器的權重
實現上下做用居中的幾種方法
css的解析順序，link 引入與import引入的區別
…

我主要說一下最後一個問題。

css的解析順序是從右往左的，這點很是重要，能夠主導你寫出快速選擇的高效的css選擇器。
link引入的按照順序同步加載的而@import引入的css須要等待頁面加載完成纔會加載，是異步的。

JS

js問的問題比較多，我只能回憶一些部份內容

閉包的理解，及運用的一些問題
原型鏈理解
事件冒泡理解
函數聲明，變量提高一些問題
正則表達式的運用
實現深拷貝的功能。有不少方法，最簡單的是Object.create()。其餘方法參見以前的博客
用原生js實現Jquery的鏈式操做。最簡單的方式在每一個方法裏return this，其餘的可參照Jquery，underscore的實現方法。
Cookie， SessionStorage， Localstorage區別及運用
多種方法實現繼承。（紅寶書裏有詳細說明，最經典的實現方式是原型，而後還有組合繼承，寄生式繼承，寄生組合式繼承）
輪詢，長鏈接，實時通信的理解

其餘

SEO瞭解嗎
img 的 alt 跟 title區別（alt是當圖片不存在時的替代文字,爬蟲讀的屬性;title是對圖片的描述與進一步說明，也就是鼠標移動上去顯示的文字）
-HTTP 的頭部瞭解（我只能說出大概，有時間買唄HTTP的書籍好好研究研究）
前端如何優化（雅虎36條軍規）
一些狀態碼瞭解
XSS，CSRF瞭解嗎，如何防範
對前端工程化的瞭解
對當前流行的MVVM框架原理了解嗎
算法數據結構熟悉嗎