最近在準(zhǔn)備前端面試玩讳，面經(jīng)結(jié)合了周圍同學(xué)的面經(jīng)涩蜘，不斷更新嚼贡，喜歡的麻煩點(diǎn)贊關(guān)注哦給我更新的動(dòng)力~
doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分同诫？他們有何意義粤策？
doctype作用：
doctype是申明文檔類型，告訴瀏覽器以什么文檔類型規(guī)范來(lái)解析這個(gè)文檔误窖。
嚴(yán)格模式與混雜模式：
1.嚴(yán)格模式的排版和JS運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)執(zhí)行的叮盘。
2.混雜模式中，頁(yè)面以寬松的霹俺、向后兼容的方式顯示熊户。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
3.doctype不存在或不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)吭服。
他們有何意義：
嚴(yán)格模式與混雜模式存在的意義與其來(lái)源密切相關(guān)嚷堡，如果說(shuō)只存在嚴(yán)格模式，那么許多舊網(wǎng)站必然受到影響艇棕，如果只存在混雜模式蝌戒，那么會(huì)回到當(dāng)時(shí)瀏覽器大戰(zhàn)時(shí)的混亂，每個(gè)瀏覽器都有自己的解析模式沼琉。
說(shuō)說(shuō)你對(duì)語(yǔ)義化的理解北苟？
- 用正確的標(biāo)簽做正確的事。
- 讓頁(yè)面內(nèi)容結(jié)構(gòu)化打瘪，便于瀏覽器友鼻、搜索引擎解析。
- 在去掉或丟失樣式的時(shí)候能讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)闺骚。
- 搜索引擎的爬蟲(chóng)依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重彩扔，有利于SEO。
- 語(yǔ)義化更具可讀性僻爽，可以減少差異性虫碉。
如何提供包含多種語(yǔ)言內(nèi)容的頁(yè)面？
當(dāng)客戶端向服務(wù)器發(fā)送 HTTP 請(qǐng)求時(shí)胸梆，通常會(huì)發(fā)送有關(guān)語(yǔ)言首選項(xiàng)的信息敦捧，比如使用Accept-Language請(qǐng)求頭。如果替換語(yǔ)言存在碰镜，服務(wù)器可以利用該信息返回與之相匹配的 HTML 文檔兢卵。返回的 HTML 文檔還應(yīng)在<html>標(biāo)簽中聲明lang屬性，比如<html lang="en">...</html>
在后臺(tái)中绪颖，HTML 將包含i18n占位符和待以替換的內(nèi)容秽荤，這些按照不同語(yǔ)言，以 YML 或 JSON 格式存儲(chǔ)。然后王滤，服務(wù)器將動(dòng)態(tài)生成指定語(yǔ)言內(nèi)容的 HTML 頁(yè)面。整個(gè)過(guò)程通常需要借助后臺(tái)框架實(shí)現(xiàn)滓鸠。
在設(shè)計(jì)開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)雁乡，需要留心哪些事情？
- 在 HTML 中使用lang屬性糜俗。
- 引導(dǎo)用戶切換到自己的母語(yǔ)——讓用戶能夠輕松地切換到自己的國(guó)家或語(yǔ)言踱稍，而不用麻煩。
- 在圖片中展示文本會(huì)阻礙網(wǎng)站規(guī)模增長(zhǎng)——把文本放在圖片中展示悠抹，仍然是一種非常流行的方式珠月。這樣做可以在所有終端上，都能顯示出美觀的非系統(tǒng)字體楔敌。然而啤挎，為了翻譯圖片中的文本，需要為每種語(yǔ)言單獨(dú)創(chuàng)建對(duì)應(yīng)的圖片卵凑，這種做法很容易在圖片數(shù)量不斷增長(zhǎng)的過(guò)程中失控庆聘。
- 限制詞語(yǔ)或句子的長(zhǎng)度——網(wǎng)頁(yè)內(nèi)容在使用其他語(yǔ)言表述時(shí)，文字長(zhǎng)度會(huì)發(fā)生變化勺卢。設(shè)計(jì)時(shí)伙判，需要警惕文字長(zhǎng)度溢出布局的問(wèn)題，最好不要使用受文字長(zhǎng)度影響較大的設(shè)計(jì)黑忱。比如標(biāo)題宴抚、標(biāo)簽、按鈕的設(shè)計(jì)甫煞，往往很受文字長(zhǎng)度影響菇曲，這些設(shè)計(jì)中的文字與正文或評(píng)論部分不同，一般不可以自由換行抚吠。
- 注意顏色的使用——顏色在不同的語(yǔ)言和文化中羊娃，意義和感受是不同的。設(shè)計(jì)時(shí)應(yīng)該使用恰當(dāng)?shù)念伾?/li>
- 日期和貨幣的格式化——日期在不同的國(guó)家和地區(qū)埃跷，會(huì)以不同的方式顯示蕊玷。比如美國(guó)的日期格式是“May 31, 2012”，而在歐洲部分地區(qū)弥雹，日期格式是“31 May 2012”垃帅。
- 不要使用連接的翻譯字符串——不要做類似這樣的事情，比如“今天的日期是”+具體日期剪勿。這樣做可能會(huì)打亂其他語(yǔ)言的語(yǔ)序贸诚。替代方案是，為每種語(yǔ)言編寫帶變量替換的模版字符串。請(qǐng)看下面兩個(gè)分別用英語(yǔ)和中文表示的句子：I will travel on {% date %}和{% date %} 我會(huì)出發(fā)酱固⌒的睿可以看到，語(yǔ)言的語(yǔ)法規(guī)則不同运悲，變量的位置是不同的龄减。
- 注意語(yǔ)言閱讀的方向——在英語(yǔ)中，文字是從左向右閱讀的班眯；而在傳統(tǒng)日語(yǔ)中希停，文字是從右向左閱讀的。
什么是data-屬性署隘？
- data屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)宠能。
- data-賦予我們?cè)谒衕tml元素中嵌入自定義data屬性的能力。
- 存儲(chǔ)的（自定義）數(shù)據(jù)能被頁(yè)面的JavaScript中利用磁餐，以創(chuàng)建更好的用戶體驗(yàn)（不進(jìn)行ajax調(diào)用或服務(wù)器端數(shù)據(jù)庫(kù)查詢）违崇。
data- 主要包括兩個(gè)部分：
- 屬性名不應(yīng)該包含任何大寫字母，并且在前綴“data-”之后必須有至少一個(gè)字符诊霹。
- 屬性值可以是任意字符串亦歉。
現(xiàn)在不建議使用data-屬性：
在 JavaScript 框架變得流行之前，前端開(kāi)發(fā)者經(jīng)常使用data-屬性畅哑，把額外數(shù)據(jù)存儲(chǔ)在 DOM 自身中肴楷。當(dāng)時(shí)沒(méi)有其他 Hack 手段（比如使用非標(biāo)準(zhǔn)屬性或 DOM 上額外屬性）。這樣做是為了將自定義數(shù)據(jù)存儲(chǔ)到頁(yè)面或應(yīng)用中荠呐，對(duì)此沒(méi)有其他更適當(dāng)?shù)膶傩曰蛟亍?br> 而現(xiàn)在赛蔫，不鼓勵(lì)使用data-屬性。原因之一是泥张，用戶可以通過(guò)在瀏覽器中利用檢查元素呵恢，輕松地修改屬性值，借此修改數(shù)據(jù)媚创。數(shù)據(jù)模型最好存儲(chǔ)在 JavaScript 本身中渗钉，并利用框架提供的數(shù)據(jù)綁定，使之與 DOM 保持更新钞钙。
如果把HTML5看成一個(gè)開(kāi)放平臺(tái)鳄橘，那它的構(gòu)建模塊有哪些？
nav芒炼、header瘫怜、section、footer本刽。
將 HTML5 看作成開(kāi)放的網(wǎng)絡(luò)平臺(tái)鲸湃，什么是 HTML5 的基本構(gòu)件（building block）赠涮？
語(yǔ)義 - 提供更準(zhǔn)確地描述內(nèi)容。
連接 - 提供新的方式與服務(wù)器通信暗挑。
離線和存儲(chǔ) - 允許網(wǎng)頁(yè)在本地存儲(chǔ)數(shù)據(jù)并有效地離線運(yùn)行笋除。（即使在離線的情況下，用戶也可以正常使用App炸裆，把需要離線存儲(chǔ)在本地的文件列在一個(gè)manifest配置文件）
多媒體 - 在 Open Web 中垃它，視頻和音頻被視為一等公民（first-class citizens）。
2D/3D 圖形和特效 - 提供更多種演示選項(xiàng)晒衩。
性能和集成 - 提供更快的訪問(wèn)速度和性能更好的計(jì)算機(jī)硬件。
（1）web Workers：當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)墙歪，頁(yè)面的狀態(tài)是不可響應(yīng)的听系，直到腳本已完成。
web worker 是運(yùn)行在后臺(tái)的JavaScript虹菲，獨(dú)立于其他腳本靠胜，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊毕源、選取內(nèi)容等等浪漠，而此時(shí) web worker 在后臺(tái)運(yùn)行。
（2）History API：
通過(guò)back()霎褐，forward()和go()方法在用戶的歷史記錄中前進(jìn)與后退window.history.back(); //后退
（3）添加和修改歷史記錄條目
設(shè)備訪問(wèn) - 允許使用各種輸入址愿、輸出設(shè)備。（使用camera API冻璃、觸摸事件响谓、地理位置定位、當(dāng)前定位省艳、檢測(cè)設(shè)備方向）
外觀 - 可以開(kāi)發(fā)豐富的主題娘纷。
請(qǐng)描述cookie、sessionStorage和localStorage的區(qū)別跋炕。
請(qǐng)描述<script>赖晶、<script async>和<script defer>的區(qū)別。
<script>： HTML 解析中斷辐烂，腳本被提取并立即執(zhí)行遏插。執(zhí)行結(jié)束后，HTML 解析繼續(xù)纠修。
<script async>和<script defer>：
- defer和async在網(wǎng)絡(luò)讀壬獭（下載）是一樣的，都是異步的（不需要等待）分瘾。
- defer是在文檔解析后執(zhí)行腳本胎围；async是在文檔解析時(shí)同時(shí)執(zhí)行腳本吁系。
- defer能夠快速先呈現(xiàn)文檔。
- 如果有多個(gè)含defer的腳本白魂，腳本的執(zhí)行順序?qū)凑赵?document 中出現(xiàn)的位置为迈，從上到下順序執(zhí)行。
- 當(dāng)腳本與頁(yè)面上其他腳本獨(dú)立時(shí)随橘，可以使用async还栓，比如用作頁(yè)面統(tǒng)計(jì)分析。
注意：沒(méi)有src屬性的腳本敬锐，async和defer屬性會(huì)被忽略背传。
為什么最好把CSS的<link>標(biāo)簽放在<head></head>之間？為什么最好把JS的<script>標(biāo)簽恰好放在</body>之前台夺，有例外情況嗎径玖？
1、把<link>標(biāo)簽放在<head></head>之間：
把<link>標(biāo)簽放在<head></head>之間是規(guī)范要求的內(nèi)容颤介。此外梳星，這種做法可以讓頁(yè)面逐步呈現(xiàn)，提高了用戶體驗(yàn)滚朵。
將樣式表放在文檔底部附近冤灾，會(huì)使許多瀏覽器（包括Internet Explorer）不能逐步呈現(xiàn)頁(yè)面。一些瀏覽器會(huì)阻止渲染辕近，以避免在頁(yè)面樣式發(fā)生變化時(shí)韵吨，重新繪制頁(yè)面中的元素。這種做法可以防止呈現(xiàn)給用戶空白的頁(yè)面或沒(méi)有樣式的內(nèi)容移宅。
2学赛、把<script>標(biāo)簽恰好放在</body>之前：
腳本在下載和執(zhí)行期間會(huì)阻止HTML解析。把<script>標(biāo)簽放在底部吞杭，保證了HTML首先完成解析盏浇，將頁(yè)面盡早呈現(xiàn)給用戶。
例外情況是當(dāng)你的腳本里包含document.write()時(shí)芽狗。但是現(xiàn)在绢掰，document.write()不推薦使用。同時(shí)童擎，將<script>標(biāo)簽放在底部滴劲，意味著瀏覽器不能開(kāi)始下載腳本，直到整個(gè)文檔（document）被解析顾复。也許班挖，對(duì)此比較好的做法是，<script>使用defer屬性芯砸，放在<head>中萧芙。
什么是漸進(jìn)式渲染（progressive rendering）给梅？
漸進(jìn)式渲染是用于提高網(wǎng)頁(yè)性能（尤其是提高用戶感知的加載速度），以盡快呈現(xiàn)頁(yè)面的技術(shù)双揪。
一些舉例：
- 圖片懶加載——頁(yè)面上的圖片不會(huì)一次性全部加載动羽。當(dāng)用戶滾動(dòng)頁(yè)面到圖片部分時(shí)，JavaScript將加載并顯示圖像渔期。
- 確定顯示內(nèi)容的優(yōu)先級(jí)（分層次渲染）——為了盡快將頁(yè)面呈現(xiàn)給用戶运吓，頁(yè)面只包含基本的最少量的CSS、腳本和內(nèi)容疯趟，然后可以使用延遲加載腳本或監(jiān)聽(tīng)DOMContentLoaded/load事件加載其他資源和內(nèi)容拘哨。
- 異步加載HTML片段——當(dāng)頁(yè)面通過(guò)后臺(tái)渲染時(shí)，把HTML拆分信峻，通過(guò)異步請(qǐng)求倦青，分塊發(fā)送給瀏覽器。
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么站欺？
漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面姨夹，保證最基本的功能纤垂，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果矾策、交互等改進(jìn)和追加功能，達(dá)到更好的用戶體驗(yàn)峭沦。
優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建完整的功能贾虽，然后再針對(duì)低版本的瀏覽器進(jìn)行兼容。
document 中的load事件和DOMContentLoaded事件之間的區(qū)別是什么吼鱼？
當(dāng)初始的 HTML 文檔被完全加載和解析完成之后蓬豁，
DOMContentLoaded事件被觸發(fā)，而無(wú)需等待樣式表菇肃、圖像和子框架的完成加載地粪。window的
load事件僅在DOM和所有相關(guān)資源全部完成加載后才會(huì)觸發(fā)。
為什么要使用load事件琐谤？這個(gè)事件有什么缺點(diǎn)嗎蟆技？你知道一些代替方案嗎，為什么使用它們斗忌？
- 在文檔裝載完成后會(huì)觸發(fā)
load事件质礼。此時(shí)，在文檔中的所有對(duì)象都在DOM中织阳，所有圖像眶蕉、腳本、鏈接和子框架都完成了加載唧躲。 - DOM 事件
DOMContentLoaded將在頁(yè)面的DOM構(gòu)建完成后觸發(fā)造挽，但不要等待其他資源完成加載碱璃。如果在初始化之前不需要裝入整個(gè)頁(yè)面，這個(gè)事件是使用首選刽宪。
“attribute” 和 “property” 之間有什么區(qū)別厘贼？
-
property是DOM中的屬性，是JavaScript里的對(duì)象圣拄； -
attribute是HTML標(biāo)簽上的特性嘴秸，它的值只能夠是字符串； -
property屬性庇谆，就像C#等高級(jí)語(yǔ)言可以用.(dot)獲取或者設(shè)置其值岳掐；attribute特性，每一個(gè)dom元素都有一個(gè)attributes屬性來(lái)存放所有的attribute節(jié)點(diǎn)饭耳，通過(guò)getAttribute()和setAttribute()方法來(lái)進(jìn)行獲取和操作串述。
BOM和DOM有什么區(qū)別
- BOM是瀏覽器對(duì)象模型，用來(lái)獲取或設(shè)置瀏覽器的屬性寞肖、行為纲酗，例如：新建窗口、獲取屏幕分辨率新蟆、瀏覽器版本號(hào)等觅赊。
- DOM是文檔對(duì)象模型，用來(lái)獲取或設(shè)置文檔中標(biāo)簽的屬性琼稻，例如獲取或者設(shè)置input表單的value值吮螺。
- BOM的內(nèi)容不多，主要還是DOM帕翻。
- 由于DOM的操作對(duì)象是文檔（Document）鸠补，所以dom和瀏覽器沒(méi)有直接關(guān)系。
請(qǐng)解釋單頁(yè)應(yīng)用（SPA）是什么以及如何使其對(duì)SEO友好嘀掸。
以前是服務(wù)器端渲染（瀏覽器從服務(wù)器接收 HTML 并渲染紫岩。當(dāng)用戶導(dǎo)航到其它 URL 時(shí)，需要整頁(yè)刷新睬塌，服務(wù)器會(huì)為新頁(yè)面發(fā)送新的 HTML泉蝌。）
然而，在現(xiàn)代的 SPA中衫仑，客戶端渲染取而代之梨与。
- 瀏覽器從服務(wù)器加載初始頁(yè)面，以及整個(gè)應(yīng)用程序所需的腳本（框架文狱、庫(kù)粥鞋、應(yīng)用代碼）和樣式表。
- 當(dāng)用戶導(dǎo)航到其他頁(yè)面時(shí)瞄崇，不會(huì)觸發(fā)頁(yè)面刷新呻粹。該頁(yè)面的URL通過(guò)
HTML5 History API進(jìn)行更新壕曼。 - 瀏覽器通過(guò) AJAX 請(qǐng)求向服務(wù)器檢索新頁(yè)面所需的數(shù)據(jù)（通常采用JSON格式）。
- 然后等浊，SPA 通過(guò) JavaScript 來(lái)動(dòng)態(tài)更新頁(yè)面腮郊，這些 JavaScript 在初始頁(yè)面加載時(shí)已經(jīng)下載。
- 這種模式類似于原生移動(dòng)應(yīng)用的工作方式筹燕。
好處：
- 用戶感知響應(yīng)更快轧飞，用戶切換頁(yè)面時(shí)，不再看到因頁(yè)面刷新而導(dǎo)致的白屏撒踪。
對(duì)服務(wù)器進(jìn)行的 HTTP - 請(qǐng)求減少过咬，因?yàn)閷?duì)于每個(gè)頁(yè)面加載，不必再次下載相同的資源制妄。
- 客戶端和服務(wù)器之間的關(guān)注點(diǎn)分離掸绞。可以為不同平臺(tái)（例如手機(jī)耕捞、聊天機(jī)器人衔掸、智能手表）建立新的客戶端，而無(wú)需修改服務(wù)器代碼俺抽。只要 API 沒(méi)有修改敞映，可以單獨(dú)修改客戶端和服務(wù)器上的代碼。
壞處：
- 由于加載了多個(gè)頁(yè)面所需的框架凌埂、應(yīng)用代碼和資源驱显，導(dǎo)致初始頁(yè)面加載時(shí)間較長(zhǎng)诗芜。
- 服務(wù)器還需要進(jìn)行額外的工作瞳抓，需要將所有請(qǐng)求路由配置到單個(gè)入口點(diǎn)，然后由客戶端接管路由伏恐。
- SPA 依賴于 JavaScript 來(lái)呈現(xiàn)內(nèi)容孩哑，但并非所有搜索引擎都在抓取過(guò)程中執(zhí)行 JavaScript，他們可能會(huì)在你的頁(yè)面上看到空的內(nèi)容翠桦。這無(wú)意中損害了應(yīng)用的搜索引擎優(yōu)化（SEO）横蜒。
- 然而，當(dāng)你構(gòu)建應(yīng)用時(shí)销凑，大多數(shù)情況下丛晌，搜索引擎優(yōu)化并不是最重要的因素，因?yàn)椴⒎撬袃?nèi)容都需要通過(guò)搜索引擎進(jìn)行索引斗幼。為了解決這個(gè)問(wèn)題澎蛛，可以在服務(wù)器端渲染你的應(yīng)用，或者使用諸如 Prerender 的服務(wù)來(lái)“在瀏覽器中呈現(xiàn)你的 javascript蜕窿，保存靜態(tài) HTML谋逻，并將其返回給爬蟲(chóng)”呆馁。
什么時(shí)候會(huì)用到document.write()？
document.write()用來(lái)將一串文本寫入由document.open()打開(kāi)的文檔流中毁兆。當(dāng)頁(yè)面加載后執(zhí)行document.write()時(shí)浙滤，它將調(diào)用document.open，會(huì)清除整個(gè)文檔（<head>和<body>會(huì)被移除）气堕，并將文檔內(nèi)容替換成給定的字符串參數(shù)纺腊。因此它通常被認(rèn)為是危險(xiǎn)的并且容易被誤用。
網(wǎng)上有一些答案茎芭，解釋了document.write()被用于分析代碼中摹菠，或者當(dāng)你想包含只有在啟用了 JavaScript的情況下才能工作的樣式。它甚至在HTML5樣板代碼中用于并行加載腳本并保持執(zhí)行順序骗爆！但是次氨，我懷疑這些使用原因是過(guò)時(shí)的，現(xiàn)在可以在不使用document.write()的情況下實(shí)現(xiàn)摘投。如果我的觀點(diǎn)有錯(cuò)煮寡，請(qǐng)糾正我。
本地對(duì)象犀呼、內(nèi)置對(duì)象幸撕、宿主對(duì)象？
- 本地對(duì)象（原生對(duì)象）：Object外臂、Function坐儿、Array、String宋光、Boolean貌矿、Number、Date罪佳、RegExp逛漫、Error、EvalError赘艳、RangeError酌毡、ReferenceError、SyntaxError蕾管、TypeError枷踏、URIError
- 內(nèi)置對(duì)象：Global、Math
- 宿主對(duì)象（運(yùn)行環(huán)境[Node或?yàn)g覽器]提供的）：window掰曾、document旭蠕、XMLHttpRequest等
- 所有的BOM和DOM都是宿主對(duì)象。
