前端面試題總結(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