前端面試題總結(jié)
寫在前面：今天晚上開始看網(wǎng)上的前端題了，盡管目前離求職還有很遠(yuǎn)，但我覺(jué)得這并不是沒(méi)有必要，我始終相信學(xué)習(xí)東西需要不斷的沁入到這些知識(shí)點(diǎn)中去，并不是因?yàn)槲覀凂R山要用的時(shí)候才去看某樣?xùn)|西，而是在急需用到的時(shí)候，我們的腦回路里面突然閃現(xiàn)：在某個(gè)時(shí)候偶然看到的一個(gè)知識(shí)點(diǎn)，然后自己能順著這個(gè)進(jìn)行聯(lián)想，而這可能也正是非科班生所缺少的吧。
HTML
-
文檔類型聲明的作用？
<!DOCTYPE html>的作用是將標(biāo)簽語(yǔ)言與相應(yīng)的文檔類型定義相關(guān)聯(lián)起來(lái)。
只有確定了一個(gè)正確的文檔類型，超文本標(biāo)記語(yǔ)言或可擴(kuò)展超文本標(biāo)記語(yǔ)言中的標(biāo)簽和層疊樣式表才能生效，甚至對(duì)JavaScript腳本都會(huì)有所影響。
涉及到的知識(shí)點(diǎn)：
- DTD文檔類型定義
- 超文本標(biāo)記語(yǔ)言下的文檔類型聲明是用來(lái)告知瀏覽器當(dāng)前文檔用的是哪種超文本規(guī)范。
- 超文本中的文檔類型聲明有三種：嚴(yán)格型、過(guò)渡性、框架集型。過(guò)渡模式包含了W3C標(biāo)準(zhǔn)，同時(shí)也可以使用不被W3C標(biāo)準(zhǔn)所推薦的標(biāo)簽
- HTML5的文檔聲明只需要寫成<!DOCTYEPE>
- DOCTYPE的模式區(qū)分是從HTML4開始的。
- 沒(méi)有文檔聲明，瀏覽器則會(huì)采用怪異模式。
- 瀏覽器有哪些模式？各種模式之間的區(qū)別是什么？
瀏覽器有三種模式：標(biāo)準(zhǔn)模式、幾乎模式、怪異模式；即standards moded、almost stadards mode/quirks mode;
區(qū)別：標(biāo)準(zhǔn)模式瀏覽器會(huì)以W3C標(biāo)準(zhǔn)來(lái)渲染網(wǎng)頁(yè)，而怪異模式時(shí)瀏覽器則會(huì)以老版本的方式來(lái)渲染網(wǎng)頁(yè)，，而且不同的瀏覽器的怪異模式還不一樣，所以在寫代碼的時(shí)候應(yīng)該避免這種錯(cuò)誤。至于幾乎模式則是一種介于標(biāo)準(zhǔn)模式和怪異模式之間的一種過(guò)渡模式。
- 瀏覽器模式與文檔模式有什么區(qū)別？如果存在一個(gè)完整的DOCTYPE，即文檔聲明，則瀏覽器會(huì)采用標(biāo)準(zhǔn)模式，否則瀏覽器會(huì)采用怪異模式。
- 在js中如何判斷瀏覽器模式？document對(duì)象的compatMode，它有兩個(gè)值，backCompat對(duì)應(yīng)怪異模式，CSS1compat對(duì)應(yīng)嚴(yán)格模式。
- HTML 和XHTML有什么區(qū)別？
簡(jiǎn)單的將html是一種標(biāo)簽語(yǔ)言，而xhtml則是這種標(biāo)簽語(yǔ)言的規(guī)范版本，xhtml是xml + html，即用xml的方式寫html。xhtml出現(xiàn)的初衷是為了解決互聯(lián)網(wǎng)大量web頁(yè)面包含錯(cuò)誤的問(wèn)題，但由于xhtml會(huì)強(qiáng)制性報(bào)錯(cuò)，所以并不是非常受歡迎，所以最終html5的出現(xiàn)洗去了這個(gè)教訓(xùn)，即向后兼容的特性。
- 如果頁(yè)面使用‘a(chǎn)pplication/xhtml + xml’會(huì)有什么問(wèn)題？
不滿足向后兼容的要求，老式的瀏覽器可能并不支持。這也是xhtml的局限，即要求必須：有html、title、head body，標(biāo)簽必須關(guān)閉，所有標(biāo)簽名都必須小寫，所有XHTML都必須有文檔聲明，否則就會(huì)報(bào)錯(cuò)。
- 如果網(wǎng)頁(yè)內(nèi)需要支持多種語(yǔ)言應(yīng)該怎么做？
1、首先是不同語(yǔ)言的編碼問(wèn)題：對(duì)提供多語(yǔ)言的網(wǎng)頁(yè)來(lái)說(shuō)，采用unicode字符集是一種非常好的選擇，幾乎涵蓋了所有的語(yǔ)言的每一種字符。
2、其次，不同語(yǔ)言的書寫習(xí)慣可能不一樣，有的向左有的向右。
3.還應(yīng)該考慮到不同語(yǔ)言地?cái)?shù)據(jù)庫(kù)的檢索和收集。
- 詳細(xì)解釋一下unicode字符集？
- 什么是utf-8？為什么要把非中文的頁(yè)面的字符集定位utf-8？
- 數(shù)據(jù)庫(kù)驅(qū)動(dòng)網(wǎng)站
- 使用data-屬性的好處是什么？
關(guān)于什么是data- 屬性：即data- 前綴 加自定義的屬性名，這種結(jié)構(gòu)可以用來(lái)儲(chǔ)存信息。
data-*屬性來(lái)自HTML5，可以通過(guò)添加data- 前綴的方法自定義的保存特定元素的數(shù)據(jù)。同時(shí)在HTML5中元素有一個(gè)dataset的屬性，可以通過(guò)JavaScript來(lái)操作，只是要注意的是：在JavaScript中操作時(shí)不用加前綴data- ，僅僅需要在dataset后面加 .自定義屬性名。
優(yōu)點(diǎn)即是可以不通過(guò)ajax、服務(wù)端數(shù)據(jù)庫(kù)查詢來(lái)創(chuàng)建更好的用戶體驗(yàn)。
怎樣使用data？在html通過(guò)data對(duì)元素進(jìn)行標(biāo)記，然后在css同進(jìn)行原則，通過(guò)這個(gè)屬性來(lái)增加樣式。在jquery中也可以通過(guò)對(duì)data- 的選擇來(lái)操作dom節(jié)點(diǎn)。但是要注意的是：無(wú)論在css中還是在jquery中，data- 實(shí)質(zhì)上都是屬性，而不僅僅是class一樣的，可以通過(guò) .className 名來(lái)選擇。比如在jquery中對(duì)data- 的選擇就是 $('元素名‘).attr('data- '), .attr()即是獲取某個(gè)屬性的值得方法。
- 如果把html5看作是一個(gè)開放平臺(tái)，它的構(gòu)建模塊有哪些？
有 <nav> <header> <section> <footer>
- 使用哪些工具可測(cè)試代碼性能？
JSPerf Profiler
*描述cookies、sessionStorage、localStorage的區(qū)別？
三者的共同點(diǎn)是：都屬于在瀏覽器端儲(chǔ)存數(shù)據(jù)，從而避免了不斷的請(qǐng)求服務(wù)器來(lái)交換數(shù)據(jù)。cookies是最早用來(lái)在瀏覽器端儲(chǔ)存數(shù)據(jù)的，而另外兩個(gè)都是在HTML5出現(xiàn)的，二者都是window的屬性。localStorage是一直屬于本地的，而sessionStorage只會(huì)伴隨著session的存在而存在，即一旦窗口關(guān)閉，則sessionStorage則消失。（詳細(xì)看下二者的使用方法）
不同點(diǎn)：
1.sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)，只要這個(gè)窗口沒(méi)有被關(guān)閉，進(jìn)入同源的其他頁(yè)面，數(shù)據(jù)也同樣是存在的。
2. 但如果同時(shí)打開兩個(gè)獨(dú)立的窗口，即便是同一頁(yè)面，sessionStorage也是不同的cookies會(huì)發(fā)送到服務(wù)器端。
- 為什么要將<link>放在<head></head>之間，而把 < script>放在</body>之前？有不有例外？
（將<link>放在</head>之前的原因是為了讓html頁(yè)面在渲染之前就將css樣式文件提前加載好；script放body前的原因是為了讓html頁(yè)面在完全渲染完畢后再執(zhí)行js動(dòng)態(tài)操作，否則會(huì)出現(xiàn)一些dom元素還沒(méi)有加載完畢，就開始對(duì)其執(zhí)行操作，而找不到相關(guān)對(duì)象的問(wèn)題。）（這是我自己的回答）
*上面的這個(gè)問(wèn)題設(shè)計(jì)到瀏覽器的渲染機(jī)制的問(wèn)題！
瀏覽器是如何渲染的？https://segmentfault.com/a/1190000004292479