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