web前端开发面试题（答案）
1.xhtml和html有什么區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
2.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
3.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時加載
前者無兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
4.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基于webkit，Google與Opera Software共同開發)
5.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
6.你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
7.清除浮動的幾種方式，各自的優缺點
1.使用空標簽清除浮動 clear:both（理論上能清楚任何標簽，，，增加無意義的標簽）
2.使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE）
3.是用afert偽元素清除浮動(用于非IE瀏覽器)
8.”==”和“===”的不同
前者會自動轉換類型
后者不會
9.簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
10.px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
11.一次完整的HTTP事物是怎樣的一個過程？
基本流程：
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連接后發起http請求
d. 服務器端響應http請求，瀏覽器得到html代碼
e. 瀏覽器解析html代碼，并請求html代碼中的資源
f. 瀏覽器對頁面進行渲染呈現給用戶
12.你所了解的web攻擊技術
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。
13.html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分?HTML?和?HTML5？
(1)繪畫?canvas;
(2)用于媒介回放的?video?和?audio?元素;
(3)本地離線存儲?localStorage?長期存儲數據，瀏覽器關閉后數據不丟失;
(4)sessionStorage?的數據在瀏覽器關閉后自動刪除;
(5)語意化更好的內容元素，比如?article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
? ? ? ?IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim
14.HTTP狀態碼知道哪些？
100 Continue?繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息
200 OK?正常返回信息
201 Created?請求成功并且服務器創建了新的資源
202 Accepted?服務器已接受請求，但尚未處理
301 Moved Permanently?請求的網頁已永久移動到新位置。
302 Found?臨時性重定向。
303 See Other?臨時性重定向，且總是使用?GET?請求新的?URI。
304 Not Modified?自從上次請求后，請求的網頁未修改過。
400 Bad Request?服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized?請求未授權。
403 Forbidden?禁止訪問。
404 Not Found?找不到如何與?URI?相匹配的資源。
500 Internal Server Error?最常見的服務器端錯誤。
503 Service Unavailable?服務器端暫時無法處理請求（可能是過載或維護）。
14.你有哪些性能優化的方法？
? ? ? ?（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） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
15.哪些常見操作會造成內存泄漏？
? ? ? ?內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為?0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
setTimeout?的第一個參數使用字符串而非函數的話，會引發內存泄漏。
閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）。
16.線程與進程的區別
? ? ? ?一個程序至少有一個進程,一個進程至少有一個線程。
線程的劃分尺度小于進程，使得多線程程序的并發性高。
另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。
線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。
17.null和undefined的區別？
? ? ? ?null是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。
undefined：
（1）變量被聲明了，但沒有賦值時，就等于undefined。
（2)?調用函數時，應該提供的參數沒有提供，該參數等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數沒有返回值時，默認返回undefined。
null：
（1） 作為函數的參數，表示該函數的參數不是對象。
（2） 作為對象原型鏈的終點。
?
轉載于:https://www.cnblogs.com/chaihy/p/7201713.html
總結
以上是生活随笔為你收集整理的web前端开发面试题（答案）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用的魔术方法
- 下一篇： 基于HTML5 WebGL 与 GIS