自己总结的前端面试题
HTML5新增了哪些新特性和標(biāo)簽？
CSS3有哪些新特性？
列舉你所知道的行內(nèi)元素有哪些?塊級(jí)元素有哪些? CSS的盒模型？
介紹所知道的CSS hack技巧。
常見的兼容性問題有哪些？
常使用的JS類庫(kù)有哪些??是否進(jìn)行過插件開發(fā)？
若使用過Jquery,如何添加，刪除，替換節(jié)點(diǎn)？
JS中的事件是指什么？IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？
是否做過后臺(tái)接口調(diào)用處理等操作？對(duì)Json有多少了解？
介紹一下XMLHttpRequest是指什么？該對(duì)象的常用方法和屬性有哪些？
jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？
Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是?
ajax是什么? ajax的交互模型（流程）? 同步和異步的區(qū)別?
如何解決跨域問題?
什么是閉包??閉包主要涉及到js的哪些特性？
你有哪些性能優(yōu)化的方法？
?
參考答案如下：
答：
a) 繪畫 canvas標(biāo)簽
??b) 用于媒介回放的 video 和 audio 元素
??c) 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
??d) sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
e) 語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
??f) 表單控件，calendar、date、time、email、url、search
答：
a)?CSS3實(shí)現(xiàn)圓角（border-radius:8px）
b)?陰影（box-shadow:10px）
c)?對(duì)文字加特效（text-shadow、）
d)?線性漸變（gradient）
e)?旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜
f)?增加了更多的CSS選擇器，多背景rgba等。
答：
行內(nèi)元素span,a,var ,em,input,img,img,textarea,var,em,strong,select等。
塊級(jí)標(biāo)簽：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr等。
CSS盒模型：頁(yè)面上的塊級(jí)元素被看做是一個(gè)矩形框，這個(gè)框由元素的內(nèi)容（content）、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)組成。
答：
IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；
IE6能識(shí)別*，但不能識(shí)別 !important,
IE7能識(shí)別*，也能識(shí)別!important;
FF不能識(shí)別*，但能識(shí)別!important;
IE6支持下劃線，IE7和firefox均不支持下劃線。
例如：
a)?png24位的圖片在iE6瀏覽器上出現(xiàn)背景：解決方案是做成PNG8.
b)?瀏覽器默認(rèn)的margin和padding不同：解決方案是加一個(gè)全局的{margin:0;padding:0;}來統(tǒng)一。
c)?IE6種浮動(dòng)產(chǎn)生的雙倍邊距問題：解決方案是在float的標(biāo)簽樣式控制中加入 _display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
答：最常用的庫(kù)：Jquery ,YUI等。
答：obj.appendChild?， obj.removeChild??， obj.replaceChild
a) 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為。
b) 事件處理機(jī)制：IE是事件冒泡、火狐是事件捕獲； ?
c) ev.stopPropagation()適用于火狐等瀏覽器 ； cancelBubble()只支持IE瀏覽器。
答：JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小。
答：
a)?XMLHttpRequest 對(duì)象提供了在網(wǎng)頁(yè)加載后與服務(wù)器進(jìn)行通信的方法。
b)?open(“method”,”URL”) 建立對(duì)服務(wù)器的調(diào)用:
第一個(gè)參數(shù)是HTTP請(qǐng)求,方式可以為GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。
第二個(gè)參數(shù)是請(qǐng)求頁(yè)面的URL。
? ? send()方法，發(fā)送具體請(qǐng)求
? ? abort()方法，停止當(dāng)前請(qǐng)求
? ? readyState屬性 ? 請(qǐng)求的狀態(tài) 有5個(gè)可取值0=未初始化 ，1=正在加載
? ? 2=以加載，3=交互中，4=完成
? ? responseText 屬性 ?服務(wù)器的響應(yīng)，表示為一個(gè)串
? ? reponseXML 屬性 服務(wù)器的響應(yīng)，表示為XML
? ? status ? 服務(wù)器的HTTP狀態(tài)碼，200對(duì)應(yīng)ok ?400對(duì)應(yīng)not found
答：
$.fn.stringifyArray = function(array) {
??????return JSON.stringify(array)
??}
?
??$.fn.parseArray = function(array) {
??????return JSON.parse(array)
?}
答：hasOwnProperty
答：
a）ajax是異步的 JavaScript 和 XML。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
b） ??1--啟動(dòng) ?獲取XMlHttpRequest對(duì)象
? ? 2--open 打開url通道，并設(shè)置異步傳輸?
? ? 3--send 發(fā)送數(shù)據(jù)到服務(wù)器
? ? 4--服務(wù)器接受數(shù)據(jù)并處理，處理完成后返回結(jié)果?
? ? 5--客戶端接收服務(wù)器端返回
c）同步：腳本會(huì)停留并等待服務(wù)器發(fā)送回復(fù)然后再繼續(xù).
異步：腳本允許頁(yè)面繼續(xù)其進(jìn)程并處理可能的回復(fù).
答：幾個(gè)可行的方案：
1、Web代理的方式。即用戶訪問A網(wǎng)站時(shí)所產(chǎn)生的對(duì)B網(wǎng)站的跨域訪問請(qǐng)求均提交到A網(wǎng)站的指定頁(yè)面，由該頁(yè)面代替用戶頁(yè)面完成交互，從而返回合適的結(jié)果。此方案可以解決現(xiàn)階段所能夠想到的多數(shù)跨域訪問問題，但要求A網(wǎng)站提供Web代理的支持，因此A網(wǎng)站與B網(wǎng)站之間必須是緊密協(xié)作的，且每次交互過程，A網(wǎng)站的服務(wù)器負(fù)擔(dān)增加，且無法代用戶保存session狀態(tài)。
2、on-Demand方式。動(dòng)態(tài)控制script標(biāo)記的生成，通過修改script標(biāo)記的src屬性完成對(duì)跨域頁(yè)面的調(diào)用。此方案存在的缺陷是，script的src屬性完成該調(diào)用時(shí)采取的方式是get方式，如果請(qǐng)求時(shí)傳遞的字符串過大時(shí)，可能會(huì)無法正常運(yùn)行。不過此方案非常適合聚合類門戶使用。
3、iframe方式。數(shù)據(jù)提交跟獲取，采用iframe這種方式的確可以了，但由于父窗口與子窗口之間不能交互（跨域訪問的情況下，這種交互被拒絕），因此無法完成對(duì)父窗口效果的影響。
4、用戶本地轉(zhuǎn)儲(chǔ)方式：IE本身依附于windows平臺(tái)的特性為我們提供了一種基于iframe，利用內(nèi)存來“繞行”的方案，即兩個(gè)window之間可以在客戶端通過windows剪貼板的方式進(jìn)行數(shù)據(jù)傳輸，只需要在接受數(shù)據(jù)的一方設(shè)置Interval進(jìn)行輪詢，獲得結(jié)果后清除Interval即可。FF的平臺(tái)獨(dú)立性決定了它不支持剪貼板這種方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF無法通過內(nèi)存來完成暗渡陳倉(cāng)。而由于文件操作FF也沒有提供支持（無法通過Cookie跨域完成數(shù)據(jù)傳遞），致使這種技巧性的方式只能在IE中使用。
5、結(jié)合了前面幾種方式，在訪問A網(wǎng)站時(shí)，先請(qǐng)求B網(wǎng)站完成數(shù)據(jù)處理，再根據(jù)返回的標(biāo)識(shí)來獲得所需的結(jié)果。這種方法的缺點(diǎn)也很明顯，B網(wǎng)站的負(fù)載增大了。優(yōu)點(diǎn)，對(duì)session也實(shí)現(xiàn)了保持，同時(shí)A網(wǎng)站與B網(wǎng)站頁(yè)面間的交互能力增強(qiáng)了。最重要的一點(diǎn)，這種方案滿足了我們的全部需要。
答：
a)?能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).（閉包定義大體理解對(duì)即可）
b) 作用域鏈,垃圾(內(nèi)存)回收機(jī)制,函數(shù)嵌套等
答：（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時(shí)間戳。（8） 避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來，顯示比div+css布局慢。
轉(zhuǎn)載于:https://www.cnblogs.com/wujx9/p/7244989.html
總結(jié)
以上是生活随笔為你收集整理的自己总结的前端面试题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Bootstrap + Vue.js
- 下一篇： 4-30 HTML 细节摘录