前端硬核面試專題之 HTML 24 問

時間 2019-11-05

標籤前端硬核面試專題 html 欄目快樂工作简体版

原文原文鏈接

1. 前言

本文講解前端面試的 HTML 的內容。javascript

複習前端面試的知識，是爲了鞏固前端的基礎知識，最重要的仍是平時的積累！

注意：文章的題與題之間用下劃線分隔開，答案僅供參考。css

筆者技術博客首發地址 GitHub，歡迎關注。html

2. HTML

爲何利用多個域名來存儲網站資源會更有效？前端

確保用戶在不一樣地區能用最快的速度打開網站，其中某個域名崩潰用戶也能經過其餘域名訪問網站。html5

window 經常使用屬性與方法有哪些？java

window 對象的經常使用屬性git

window.self 返回當前窗口的引用
window.parent 返回當前窗體的父窗體對象
window.top 返回當前窗體最頂層的父窗體的引用
window.outerwidth 返回當前窗口的外部寬
window.outerheight 返回當前窗口的外部高
window.innerwidth 返回當前窗口的可顯示區域寬
window.innerheight 返回當前窗口的可顯示區域高

提示：經過直接在 Chrome 控制檯中輸入 console.log(window) 能夠查看到其全部的被當前瀏覽器支持的屬性及值。github

window 對象的經常使用方法web

window.prompt() 彈出一個輸入提示框，若用戶點擊了「取消」則返回 null
window.alert() 彈出一個警告框
window.confirm() 彈出一個確認框
window.close() 關閉當前瀏覽器窗口。有些瀏覽器對此方法有限制。
window.open(uri, [name], [features]) 打開一個瀏覽器窗口，顯示指定的網頁。name 屬性值能夠是「_blank」、「_self」、「_parent」、「_top」、任意指定的一個窗口名。
window.blur( ) 指定當前窗口失去焦點
window.focus( ) 指定當前窗口得到焦點
window.showModalDialog(uri, [dataFromParent]) 打開一個「模態窗口」（打開的子窗口只要不關閉，其父窗口即沒法得到焦點；且父子窗口間能夠傳遞數據）

document 經常使用屬性與方法有哪些？面試

document 常見的屬性

body 提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
cookie 設置或返回與當前文檔有關的全部 cookie。
domain 返回當前文檔的域名。
lastModified 返回文檔被最後修改的日期和時間。
referrer 返回載入當前文檔的文檔的 URL。
title 返回當前文檔的標題。
URL 返回當前文檔的 URL。

document常見的方法

write()：動態向頁面寫入內容
createElement(Tag)：建立一個 HTML 標籤對象
getElementById(ID)：得到指定 id 的對象
getElementsByName(Name)：得到以前 Name 的對象
body.appendChild(oTag)：向 HTML 中插入元素對象

簡述一下 src 與 href 的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；
在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將 js 腳本放在底部而不是頭部。

寫一個 div + css 佈局，左邊圖片，右邊文字，文字環繞圖片，外面容器固定寬度，文字不固定。

直接就一個 img，它 float：left，加文字加 p 標籤就行了。

html 中 title 屬性和 alt 屬性的區別？

<img src="#" alt="alt 信息" />

當圖片不輸出信息的時候，會顯示 alt 信息，鼠標放上去沒有信息。
當圖片正常讀取，不會出現 alt 信息。

title

<img src="#" alt="alt 信息" title="title 信息" />

當圖片不輸出信息的時候，會顯示 alt 信息，鼠標放上去會出現 title 信息。
當圖片正常輸出的時候，不會出現 alt 信息，鼠標放上去會出現 title 信息。---

講述你對 reflow 和 repaint 的理解。

repaint 就是重繪，reflow 就是迴流。

嚴重性：在性能優先的前提下，性能消耗 reflow 大於 repaint。

體現：repaint 是某個 DOM 元素進行重繪；reflow 是整個頁面進行重排，也就是頁面全部 DOM 元素渲染。

如何觸發： style 變更形成 repaint 和 reflow。

不涉及任何 DOM 元素的排版問題的變更爲 repaint，例如元素的 color/text-align/text-decoration 等等屬性的變更。
除上面所提到的 DOM 元素 style 的修改基本爲 reflow。例如元素的任何涉及長、寬、行高、邊框、display 等 style 的修改。

常見觸發場景

觸發 repaint：

color 的修改，如 color=#ddd；
text-align 的修改，如 text-align=center；
a:hover 也會形成重繪。
:hover 引發的顏色等不致使頁面迴流的 style 變更。

觸發 reflow：

width/height/border/margin/padding 的修改，如 width=778px；
動畫，:hover 等僞類引發的元素表現改動，display=none 等形成頁面迴流；
appendChild 等 DOM 元素操做；
font 類 style 的修改；
background 的修改，注意着字面上可能覺得是重繪，可是瀏覽器確實迴流了，通過瀏覽器廠家的優化，部分 background 的修改只觸發 repaint，固然 IE 不用考慮；
scroll 頁面，這個不可避免；
resize 頁面，桌面版本的進行瀏覽器大小的縮放，移動端的話，還沒玩過能拖動程序，resize 程序窗口大小的多窗口操做系統。
讀取元素的屬性（這個沒法理解，可是技術達人是這麼說的，那就把它當作定理吧）：讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

如何避免：

儘量在 DOM 末梢經過改變 class 來修改元素的 style 屬性：儘量的減小受影響的 DOM 元素。
避免設置多項內聯樣式：使用經常使用的 class 的方式進行設置樣式，以免設置樣式時訪問 DOM 的低效率。
設置動畫元素 position 屬性爲 fixed 或者 absolute：因爲當前元素從 DOM 流中獨立出來，所以受影響的只有當前元素，元素 repaint。
犧牲平滑度知足性能：動畫精度太強，會形成更屢次的 repaint/reflow，犧牲精度，能知足性能的損耗，獲取性能和平滑度的平衡。
避免使用 table 進行佈局：table 的每一個元素的大小以及內容的改動，都會致使整個 table 進行從新計算，形成大幅度的 repaint 或者 reflow。改用 div 則能夠進行鍼對性的 repaint 和避免沒必要要的 reflow。
避免在 CSS 中使用運算式：學習 CSS 的時候就知道，這個應該避免，不該該加深到這一層再去了解，由於這個的後果確實很是嚴重，一旦存在動畫性的 repaint/reflow，那麼每一幀動畫都會進行計算，性能消耗不容小覷。

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

<!DOCTYPE> 聲明位於位於 HTML 文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE 不存在或格式不正確會致使文檔以兼容模式呈現。
標準模式的排版和 JS 運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

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

HTML5 不基於 SGML(標準通用標記語言（如下簡稱「通用標言」)，所以不須要對 DTD 進行引用，可是須要 doctype 來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
而 HTML4.01 基於 SGML，因此須要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。

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

CSS 規範規定，每一個元素都有 display 屬性，肯定該元素的類型，每一個元素都有默認的 display 值。
如 div 的 display 默認值爲「block」，則爲「塊級」元素；
span 默認 display 屬性值爲「inline」，是「行內」元素。

行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
常見的空元素： img input link meta br hr ，不爲人知的是：area base col command embed keygen param source track wbr

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]-->

簡述一下你對 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通常用來包含別的頁面，例如咱們能夠在咱們本身的網站頁面加載別人網站的內容，爲了更好的效果，可能須要使 iframe 透明效果；

iframe 會阻塞主頁面的 onload 事件；
搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO 搜索引擎優化（Search Engine Optimization）
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 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

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

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

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
應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時，首選使用天然樣式標籤。

談談之前端的角度出發，作好 SEO ，須要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁

你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web cra何進行工做，搜索引擎如何對搜索結果進行排序等等。

Meta 標籤優化

主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比 Au 者），Category（目錄），Language（編碼語種）等。

如何選取關鍵詞並在網頁中放置關鍵詞

搜索就得用關鍵詞。關鍵詞分析和選擇是 SEO 最重要的工做之一。首先要給網站肯定主關鍵詞（通常在 5 個上後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎

雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有 Google，Yahoo，Bing 等有百度，搜狗，有道等。
不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。
還要了解各搜索門戶和搜索的關係，好比 AOL 網頁搜索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術。

Open Directory 自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

按點擊付費的搜索引擎

搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有 Overture 固然也包括 Google 的廣告項目 Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

搜索引擎登陸

網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比 Yahoo 要 299 美圓），可是好消少到目前爲止）最大的搜索引擎 Google 目前仍是免費，並且它主宰着 60％以上的搜索市場。