前端面試題四

時間 2019-11-11

標籤端面試題简体版

原文原文鏈接

面試有幾點需注意：javascript

面試題目：根據你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增長。css
題目類型：理論知識、算法、項目細節、技術視野、開放性題、工做案例。html
細節追問：能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種知識關聯是長時期的學習，臨時抱佛腳絕對是記不住的。前端
回答問題再棒，面試官（多是你面試職位的直接領導），會考慮我要不要這我的作個人同事？因此態度很重要、除了能作事，還要會作人。（感受更像是相親( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）html5
資深的前端開發能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的是：你這我的具備能夠依靠的才能（靠譜）。java

前端開發知識點：web

HTML&CSS：

對Web標準的理解、瀏覽器內核差別、兼容性、hack面試

CSS基本功：佈局、盒子模型、選擇器優先級算法

HTML五、CSS三、Flexboxcanvas

JavaScript：
數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、

DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 六、Nodejs

其餘：

移動端、響應式、自動化構建、HTTP、離線存儲、

WEB安全、優化、重構

團隊協做、可維護、易用性、SEO、UED、架構

職業生涯、快速學習能力

做爲一名前端工程師，不管工做年頭長短都應該掌握的知識點：

一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

二、DOM操做 —— 如何添加、移除、移動、複製、建立和查找節點等。

三、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

八、浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

九、HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。

十、JSON —— 做用、用途、設計結構。

備註：

根據本身須要選擇性閱讀，面試題是對理論知識的總結，讓本身學會應該如何表達。

資料答案不夠正確和全面，歡迎Star和提交issues。

格式不斷修改更新中。

HTML面試題集合

Doctype做用？標準模式與兼容模式各有什麼區別?

（1）<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

（2）標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

HTML5 爲何只須要寫 <!DOCTYPE HTML>？

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素：
    <br> <hr> <img> <input> <link> <meta>
    不爲人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

頁面導入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。                  [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。                   [ Chrome的：Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
  繪畫 canvas;
  用於媒介回放的 video 和 audio 元素;
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
  sessionStorage 的數據在瀏覽器關閉後自動刪除;
  語意化更好的內容元素，好比 article、footer、header、nav、section;
  表單控件，calendar、date、time、email、url、search;
  新的技術webworker, websocket, Geolocation;

  移除的元素：
  純表現的元素：basefont，big，center，font, s，strike，tt，u;
  對可用性產生負面影響的元素：frame，frameset，noframes；

* 支持HTML5新標籤：
  IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
  瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
  固然也能夠直接使用成熟的框架、好比html5shim;
     <!--[if lt IE 9]>
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
     <![endif]-->

* 如何區分HTML5：DOCTYPE聲明\新增的結構元素\功能元素

簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。


如何使用：
一、頁面頭部像下面同樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
三、在離線狀態時，操做window.applicationCache進行需求實現。

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：
 cookie數據大小不能超過4k。
 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：
localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

Label的做用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="Name">Number:</label>
<input type=「text「name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
也能夠調用localstorge、cookies等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
咱們經過監聽事件，控制它的值來進行頁面信息通訊；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR

頁面可見性（Page Visibility API）能夠有哪些用途？

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

如何在頁面上實現一個圓形的可點擊區域？

一、map+area或者svg
二、border-radius
三、純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。
```
<div style="height:1px;overflow:hidden;background:red"></div>
```

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。

i內容展現爲斜體，em表示強調的文本；

Physical Style Elements -- 天然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。