Web前端面試題總結(jié)
HTML+CSS理論知識(shí)
1、講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個(gè)過程中發(fā)生了什么
a.域名解析
b.?發(fā)起TCP的3次握手
c.?建立TCP連接后發(fā)起http請(qǐng)求
d.?服務(wù)器端響應(yīng)http請(qǐng)求，瀏覽器得到html代碼
e.?瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源
f.?瀏覽器對(duì)頁面進(jìn)行渲染呈現(xiàn)給用戶
2、談?wù)勀銓?duì)前端性能優(yōu)化的理解
a.?請(qǐng)求數(shù)量：合并腳本和樣式表，CSS Sprites，拆分初始化負(fù)載，劃分主域
b.?請(qǐng)求帶寬：開啟GZip，精簡(jiǎn)JavaScript，移除重復(fù)腳本，圖像優(yōu)化，將icon做成字體
c.?緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存
d.?頁面結(jié)構(gòu)：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出
e.?代碼校驗(yàn)：避免CSS表達(dá)式，避免重定向
3、前端?MV*框架的意義
早期前端都是比較簡(jiǎn)單，基本以頁面為工作單元，內(nèi)容以瀏覽型為主，也偶爾有簡(jiǎn)單的表單操作，基本不太需要框架.
隨著?AJAX?的出現(xiàn)，Web2.0的興起，人們可以在頁面上可以做比較復(fù)雜的事情了，然后前端框架才真正出現(xiàn)了。
如果是頁面型產(chǎn)品，多數(shù)確實(shí)不太需要它，因?yàn)轫撁嬷械?JavaScript代碼，處理交互的絕對(duì)遠(yuǎn)遠(yuǎn)超過處理模型的，但是如果是應(yīng)用軟件類產(chǎn)品，這就太需要了。
長(zhǎng)期做某個(gè)行業(yè)軟件的公司，一般都會(huì)沉淀下來一些業(yè)務(wù)組件，主要體現(xiàn)在數(shù)據(jù)模型、業(yè)務(wù)規(guī)則和業(yè)務(wù)流程，這些組件基本都存在于后端，在前端很少有相應(yīng)的組織。
從協(xié)作關(guān)系上講，很多前端開發(fā)團(tuán)隊(duì)每個(gè)成員的職責(zé)不是很清晰，有了前端的?MV框架，這個(gè)狀況會(huì)大有改觀。
之所以感受不到?MV*框架的重要性，是因?yàn)镸odel部分代碼較少，View的相對(duì)多一些。如果主要在操作View和Controller，那當(dāng)然?jQuery?這類庫比較好用了。
4、請(qǐng)簡(jiǎn)述盒模型
IE6盒子模型與W3C盒子模型。
文檔中的每個(gè)元素被描繪為矩形盒子。盒子有四個(gè)邊界：外邊距邊界margin,?邊框邊界border,?內(nèi)邊距邊界padding與內(nèi)容邊界content。
CSS3中有個(gè)box-sizing屬性可以控制盒子的計(jì)算方式，
content-box：padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值。（IE6盒子模型）
5、請(qǐng)你談?wù)凜ookie的弊端
a.?每個(gè)特定的域名下最多生成的cookie個(gè)數(shù)有限制
b. IE和Opera?會(huì)清理近期最少使用的cookie，F(xiàn)irefox會(huì)隨機(jī)清理cookie
c. cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)
d.?安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。
6、瀏覽器本地存儲(chǔ)
在HTML5中提供了sessionStorage和localStorage.
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀，是會(huì)話級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
7、web storage和cookie的區(qū)別
a.Cookie的大小是受限的
b.?每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬
c.cookie還需要指定作用域，不可以跨域調(diào)用
d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發(fā)者自己封裝setCookie，getCookie
e.Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
f. IE7、IE6中的UserData通過簡(jiǎn)單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage
8、線程與進(jìn)程的區(qū)別
a.?一個(gè)程序至少有一個(gè)進(jìn)程，一個(gè)進(jìn)程至少有一個(gè)線程
b.?線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高
c.?進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率
d.?每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制
e.?多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配
9、請(qǐng)說出三種減少頁面加載時(shí)間的方法
a.?盡量減少頁面中重復(fù)的HTTP請(qǐng)求數(shù)量
b.?服務(wù)器開啟gzip壓縮
c. css樣式的定義放置在文件頭部
d. Javascript腳本放在文件末尾
e.?壓縮合并Javascript、CSS代碼
f.?使用多域名負(fù)載網(wǎng)頁內(nèi)的多個(gè)文件、圖片
10、你都使用哪些工具來測(cè)試代碼的性能？
JSPerf, Dromaeo
11、你遇到過比較難的技術(shù)問題是？你是如何解決的？
12、常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？
13、列舉IE與其他瀏覽器不一樣的特性？
a.IE的排版引擎是Trident?（又稱為MSHTML）
b.Trident內(nèi)核曾經(jīng)幾乎與W3C標(biāo)準(zhǔn)脫節(jié)（2005年）
c.Trident內(nèi)核的大量?Bug等安全性問題沒有得到及時(shí)解決
d. JS方面，有很多獨(dú)立的方法，例如綁定事件的attachEvent、創(chuàng)建事件的createEventObject等
e. CSS方面，也有自己獨(dú)有的處理方式，例如設(shè)置透明，低版本IE中使用濾鏡的方式
14、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
漸進(jìn)增強(qiáng)progressiveenhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí)gracefuldegradation：
一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：
a.?優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給
b.?漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要
c.?降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶
15、WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？
a.html5 websoket
b. WebSocket通過Flash
c.XHR長(zhǎng)時(shí)間連接
d. XHR Multipart Streaming
e.?不可見的Iframe
f.<script>標(biāo)簽的長(zhǎng)時(shí)間連接(可跨域)
16、對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？
a.?前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從?90分進(jìn)化到?100?分，甚至更好
b.?參與項(xiàng)目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px；
c.?與團(tuán)隊(duì)成員，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通；
d.?做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)；
e.?處理hack，兼容、寫出優(yōu)美的代碼格式；
f.?針對(duì)服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。
17、平時(shí)如何管理你的項(xiàng)目？
a.?先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8)?等；
b.?編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；
c.?標(biāo)注樣式編寫人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；
d.?頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）；
e. CSS跟HTML?分文件夾并行存放，命名都得統(tǒng)一（例如style.css）；
f. JS?分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。
g.?圖片采用整合的?images.png png8?格式文件使用 盡量整合在一起使用方便將來的管理
18、說說最近最流行的一些東西吧？常去哪些網(wǎng)站？
CSDN、SegmentFault、php.net、MDN、css參考手冊(cè)、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
19、請(qǐng)解釋一下?JavaScript?的同源策略
同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
20、AMD和CMD?規(guī)范的區(qū)別？
AMD?提前執(zhí)行依賴?-?盡早執(zhí)行，requireJS?是它的實(shí)現(xiàn)
CMD?按需執(zhí)行依賴?-?懶執(zhí)行，seaJS?是它的實(shí)現(xiàn)
21、網(wǎng)站重構(gòu)的理解
重構(gòu)：在不改變外部行為的前提下，簡(jiǎn)化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。
a.?使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS、如對(duì)IE6有效的)
b.?對(duì)于移動(dòng)平臺(tái)的優(yōu)化，針對(duì)于SEO進(jìn)行優(yōu)化
c.?減少代碼間的耦合，讓代碼保持彈性
d.?壓縮或合并JS、CSS、image等前端資源
22、瀏覽器的內(nèi)核分別是什么?
IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink；
23、請(qǐng)介紹下cache-control
每個(gè)資源都可以通過?Cache-Control HTTP頭來定義自己的緩存策略
Cache-Control?指令控制誰在什么條件下可以緩存響應(yīng)以及可以緩存多久
Cache-Control?頭在?HTTP/1.1?規(guī)范中定義，取代了之前用來定義響應(yīng)緩存策略的頭（例如?Expires）。
24、前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？
a.?結(jié)構(gòu)層：由?HTML?或?XHTML?之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建，僅負(fù)責(zé)語義的表達(dá)。解決了頁面“內(nèi)容是什么”的問題。
b.?表示層：由CSS負(fù)責(zé)創(chuàng)建，解決了頁面“如何顯示內(nèi)容”的問題。
c.?行為層：由腳本負(fù)責(zé)。解決了頁面上“內(nèi)容應(yīng)該如何對(duì)事件作出反應(yīng)”的問題。
25、知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測(cè)試并使用WebP格式。
Apng：全稱是“Animated Portable Network Graphics”,?是PNG的位圖動(dòng)畫擴(kuò)展，可以實(shí)現(xiàn)png格式的動(dòng)態(tài)圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前得到?iOS safari 8的支持，有望代替GIF成為下一代動(dòng)態(tài)圖標(biāo)準(zhǔn)。
26、一次js請(qǐng)求一般情況下有哪些地方會(huì)有緩存處理？
a.?瀏覽器端存儲(chǔ)
b.?瀏覽器端文件緩存
c. HTTP緩存304
d.?服務(wù)器端文件類型緩存
e.?表現(xiàn)層&DOM緩存
27、一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗(yàn)。
a.?圖片懶加載，滾動(dòng)到相應(yīng)位置才加載圖片。
b.?圖片預(yù)加載，如果為幻燈片、相冊(cè)等，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
c.?使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)，如果圖片為css圖片的話。
d.?如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。
28、談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么？
a.?了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
b. meta標(biāo)簽優(yōu)化
c.?關(guān)鍵詞分析
d.?付費(fèi)給搜索引擎
e.?鏈接交換和鏈接廣泛度（Link Popularity）
f.?合理的標(biāo)簽使用
29、<img>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。
30、分別寫出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：、
下標(biāo)：
居中：
字體：、、參考《HTML標(biāo)簽列表》
31、請(qǐng)寫出至少5個(gè)html5新增的標(biāo)簽，并說明其語義和應(yīng)用場(chǎng)景
section：定義文檔中的一個(gè)章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁面或章節(jié)的頭部。它經(jīng)常包含?logo、頁面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
32、請(qǐng)說說你對(duì)標(biāo)簽語義化的理解？
a.?去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
b.?有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
c.?方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；
d.?便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
33、Doctype作用??嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
DOCTYPE>?聲明位于文檔中的最前面，處于??標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴(yán)格模式的排版和?JS?運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
34、你知道多少種Doctype文檔類型？
標(biāo)簽可聲明三種?DTD?類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的?HTML?文檔。
HTML 4.01?規(guī)定了三種文檔類型：Strict、Transitional?以及Frameset。
XHTML 1.0?規(guī)定了三種?XML?文檔類型：Strict、Transitional?以及Frameset。
Standards?（標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。
35、HTML與XHTML——二者有什么區(qū)別
a. XHTML?元素必須被正確地嵌套。
b. XHTML?元素必須被關(guān)閉。
c.?標(biāo)簽名必須用小寫字母。
d. XHTML?文檔必須擁有根元素。
36、html5有哪些新特性、移除了那些元素？
a. HTML5?現(xiàn)在已經(jīng)不是?SGML?的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
b.?拖拽釋放(Drag and drop) API
c.?語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d.?音頻、視頻API(audio,video)
e.?畫布(Canvas) API
f.?地理(Geolocation) API
g.?本地離線存儲(chǔ)localStorage?長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h.sessionStorage?的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除
i.?表單控件，calendar、date、time、email、url、search
j.?新的技術(shù)webworker,websocket等
移除的元素：
a.?純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b.?對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
37、iframe的優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
a.?解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
b.iframe無刷新文件上傳
c.iframe跨域通信
缺點(diǎn)：
a.iframe會(huì)阻塞主頁面的Onload事件
b.?無法被一些搜索引擎索引到
c.?頁面會(huì)增加服務(wù)器的http請(qǐng)求
d.?會(huì)產(chǎn)生很多頁面，不容易管理。
38、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁面大家都不會(huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。
a.?盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks?模式下，IE的寬度和高度還包含了padding和border。
b.?設(shè)置行內(nèi)元素的高寬：在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。
c.?設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用
d.?設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。
39、請(qǐng)闡述table的缺點(diǎn)
a.?太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b.?靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td
c.?代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異?；靵y
d.?混亂的colspan與rowspan，用來布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。
e.table需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。
f.?不夠語義
40、簡(jiǎn)述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接
41、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
1、新特性：
? a.HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
? ? ? ? ?b.?拖拽釋放(Drag and drop) API
? c.語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
? d.音頻、視頻API(audio,video)
? ? ? ? e.畫布(Canvas) API
? ? ? ? f.地理(Geolocation) API
? ? ? ?g.本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
? ? ? ?h.sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
? ? ? ?i.表單控件，calendar、date、time、email、url、search
? ? ? ?j.新的技術(shù)webworker, websocket, Geolocation
2、移除元素：純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u； 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
3、h5新標(biāo)簽兼容：IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架<!--[if lt IE 9]>? ?<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>? ?<![endif]-->如何區(qū)分：? DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
42、CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？?CSS3新增偽類有那些？
? CSS 選擇符：
? ?1.id選擇器（ # myid）
? ?2.類選擇器（.myclassname）
? ?3.標(biāo)簽選擇器（div, h1, p）
? ?4.相鄰選擇器（h1 + p）
? ?5.子選擇器（ul > li）
? ?6.后代選擇器（li a）
? ?7.通配符選擇器（ * ）
? ?8.屬性選擇器（a[rel = "external"]）
? ?9.偽類選擇器（a: hover, li:nth-child）
可以繼承的屬性：
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優(yōu)先級(jí)：
? !important > id > class > tag
? important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高
??CSS3新增偽類舉例：
? p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
? p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
? p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
? p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
? p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
? :enabled :disabled 控制表單控件的禁用狀態(tài)。
? :checked 單選框或復(fù)選框被選中。
43、CSS3有哪些新特性？
1、CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），
2、對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
3、transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
4、增加了更多的CSS選擇器 多背景rgba
5、在CSS3中唯一引入的偽元素是::selection.
? 6、媒體查詢，多欄布局
7、border-image
44、解釋盒模型寬高值得計(jì)算方式，邊界塌陷，負(fù)值作用，box-sizing概念？
1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內(nèi)容寬度； chrom、IE9+、(添加doctype) 使用標(biāo)準(zhǔn)盒模型， 寬度 = 內(nèi)容寬度。 2.box-sizing: 為了解決標(biāo)準(zhǔn)黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(默認(rèn))，border-box 讓元素維持IE傳統(tǒng)盒子模型， inherit 繼承 父盒子模型； 3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時(shí)會(huì)合并（塌陷）為單個(gè)外邊距（合并后最大的外邊距），這樣的現(xiàn)象稱之為 外邊距塌陷。 4. 負(fù)值作用：負(fù)margin會(huì)改變浮動(dòng)元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。
45、BFC（Block Formatting Context） 是什么？應(yīng)用？
1.BFC就是 ‘塊級(jí)格式上下文’ 的格式，創(chuàng)建了BFC的元素就是一個(gè)獨(dú)立的盒子，不過只有BLock-level box可以參與創(chuàng)建BFC，它規(guī)定了內(nèi)部的Bloc-level Box 如何布局，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響，當(dāng)然它也不會(huì)影響到外面的元素。 2. 應(yīng)用場(chǎng)景： ? 1. 解決margin疊加的問題 ?2. 用于布局（overflow: hidden）,BFC不會(huì)與浮動(dòng)盒子疊加。 ? 3. 用于清除浮動(dòng)，計(jì)算BFC高度。
46、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
47、簡(jiǎn)要說一下CSS的元素分類
塊級(jí)元素：div,p,h1,form,ul,li;
行內(nèi)元素 : span,a,label,input,img,strong,em;
48、解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的方法
浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
??1.使用空標(biāo)簽清除浮動(dòng)。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
2.使用after偽對(duì)象清除浮動(dòng)
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0，否則該元素會(huì)比實(shí)際高出若干像素；
? ? #parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
? 3.設(shè)置overflow為hidden或者auto
? 4.浮動(dòng)外部元素
49、CSS隱藏元素的幾種方法（至少說出三種）
Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁的布局起作用。它也將響應(yīng)用戶交互;Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會(huì)被隱藏;Display:display設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;Position:不會(huì)影響布局，能讓元素保持可以操作;
Clip-path:clip-path屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
50、請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？
相同點(diǎn)：都會(huì)在瀏覽器端保存，有大小和同源限制。? 不同點(diǎn)： ?? 1、cookie會(huì)隨請(qǐng)求發(fā)送到服務(wù)器，作為會(huì)話表示，服務(wù)器可修改cookie。web storage不會(huì)隨請(qǐng)求大宋到服務(wù)器。 ? ??2、cookie有path的概念，子路徑可以訪問父路徑的cookie，父路徑不可以訪問子路徑的cookie。 ? ? 3、有效期： cookie在設(shè)置的有效期內(nèi)有效，默認(rèn)為瀏覽器關(guān)閉消失。sessionStorage在會(huì)話窗口關(guān)閉后失效，localStorage長(zhǎng)期有效，需主動(dòng)刪除。 ?? ??4、sessionStorage不能共享，localStorage在同源文檔之間可以共享，cookie在同源且符合path規(guī)則的文檔之間可以共享。 ? ? ?5、localStorage的修改會(huì)觸發(fā)其他文檔的update事件。 ? ? ?6、cookie有secure屬性要求HTTPS傳輸。 ? ? ? ? ? ?7、瀏覽器不能保存超過300個(gè)cookie，單個(gè)服務(wù)器不能超過20個(gè)，每個(gè)cookie不能超過4k。webStorage可以支持5M的存儲(chǔ)。
51、什么是語義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！
??????html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
52、link和@import有什么區(qū)別？
link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; 頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載;import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無兼容問題;
53、常見的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
54、如何解決跨域問題
JSONP、CORS、通過修改document.domain來跨子域、使用window.name來進(jìn)行跨域、HTML5中新引進(jìn)的window.postMessage方法、在服務(wù)器上設(shè)置代理頁面
1、JSONP
原理是：動(dòng)態(tài)插入script標(biāo)簽，通過script標(biāo)簽引入一個(gè)js文件，這個(gè)js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù)，并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入。
由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源，為了實(shí)現(xiàn)跨域請(qǐng)求，可以通過script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請(qǐng)求。
優(yōu)點(diǎn)是兼容性好，簡(jiǎn)單易用，支持瀏覽器與服務(wù)器雙向通信。缺點(diǎn)是只支持GET請(qǐng)求。
2、CORS
服務(wù)器端對(duì)于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問。
? 3、通過修改document.domain來跨子域
將子域和主域的document.domain設(shè)為同一個(gè)主域.前提條件：這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用document.domain進(jìn)行跨域
主域相同的使用document.domain
? 4、使用window.name來進(jìn)行跨域
? window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁面中的
55、前端性能優(yōu)化的方式
? ? ? 1、減少DOM操作
??????2、部署前，圖片壓縮，代碼壓縮
??????3、優(yōu)化js代碼結(jié)構(gòu)，減少冗余代碼
??????4、減少http請(qǐng)求，合理設(shè)置HTTP緩存
??????5、使用內(nèi)容分發(fā)cdn加速
????? 6、靜態(tài)資源緩存
? ????7、圖片延遲加載
56、對(duì)前端工程化的理解
? 1、開發(fā)規(guī)范
? 2、模塊化開發(fā)
??3、組件化開發(fā)
? 4、開發(fā)倉庫
? 5、性能優(yōu)化
? 6、項(xiàng)目部署
? 7、開發(fā)流程
? 8、開發(fā)工具
