面試官常問的 web前端 問題（二）

11.什麼是響應式設計？

響應式設計：是關於網站的製作或網頁製作的工作，不同的設備有不同的尺寸和不同的功能。
響應式設計讓所有的人能在這些設備上讓網站運行正常。
一部分是媒體查詢和不同的視覺效果。一部分是不同的資源（如不同的 Javascript 來處理觸摸與點擊自動適應屏幕的對比） 。

12.爲什麼我們要棄用 table 標籤

table的缺點 ：只有等 table標籤 裏的內容全部加載完才能顯示網頁。

table：服務器把代碼加載到本地服務器的過程中，本來是加載一行執行一行，但是 table 標籤是裏面的東西全都下載完之後纔會顯示出來，那麼如果圖片很多的話就會導致網頁一直加載不出來，除非所有的圖片和內容都加載完。如果要等到所有的圖片全部加載完之後才顯示出來會影響網頁的性能，所以 table 標籤現在我們基本放棄使用了。

13.iframe 有哪些缺點

iframe的缺點：阻塞主頁面 onload 事件；影響頁面並行加載（瀏覽器限制相同域的鏈接）；

搜索引擎的檢索程序無法解讀這種頁面，不利於 SEO iframe 和主頁面共享連接池，而瀏覽器對相同域的鏈接有限制，所以會影響頁面的並行加載。

使用 iframe 之前需要考慮這兩個缺點，如果需要使用 iframe，最好是通過 JavaScript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題。

iframe常用屬性:

1.frameborder:	是否顯示邊框，1(yes),0(no)
2.height:		框架作爲一個普通元素的高度，建議在使用css設置。
3.width:		框架作爲一個普通元素的寬度，建議使用css設置。
4.name:			框架的名稱，window.frames[name]時專用的屬性。
5.scrolling:	框架的是否滾動。yes,no,auto。
6.src：			內框架的地址，可以使頁面地址，也可以是圖片的地址。
7.srcdoc: 		用來替代原來HTML body裏面的內容。但是IE不支持, 不過也沒什麼卵用
8.sandbox: 		對iframe進行一些列限制，IE10+支持

14.meta viewport 是做什麼用的，怎麼寫？

控制頁面在移動端不要縮小顯示。

<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

這個標籤內的內容表示啥意思呢?

name			爲viewport表示供移動設備使用. content定義了viewport的屬性.
width			表示移動設設備下顯示的寬度爲設備寬度(device-width)
height			表示移動設設備下顯示的寬度爲設備寬度.
user-scalable	表示用戶縮放能力, no表示不允許.
initial-scale	表示設備與視口的縮放比率
maximum和minimum	分別表示縮放的最大最小值, 要注意的是, maximum必須必minimum大.

這個meta標籤就是告訴瀏覽器, 不要在移動端顯示的時候縮放.

15.json 和 xml 數據的區別

json：輕量級，傳遞速度快；佔帶寬小，易壓縮；更方便與JavaScript交互，易解析，能更好的數據交互，項目交互中多用於數據交互；對數據的描述性比xml較差；
xml：重量級；佔帶寬大；項目交互中多用於配置文件；

1，數據體積方面：xml 是重量級的，json 是輕量級的，傳遞的速度更快些。
2，數據傳輸方面：xml 在傳輸過程中比較佔帶寬，json 佔帶寬少，易於壓縮。
3，數據交互方面：json 與 javascript 的交互更加方便，更容易解析處理，更好的進行數據交互
4，數據描述方面：json 對數據的描述性比 xml 較差
5，xml 和 json 都用在項目交互下，xml 多用於做配置文件，json 用於數據交互。

16.document.write 和 innerHTML 的區別

document.write ：直接寫入頁面的內容流，導致頁面被重寫。
innerHTML ：寫入某個 DOM 節點，不會導致頁面全部重繪；

document.write是直接寫入到頁面的內容流，如果在寫之前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉之後重新調用該函數，會導致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。

innerHTML很多情況下都優於document.write，其原因在於其允許更精確的控制要刷新頁面的那一個部分。

17.jQuery 庫中的 $ 是什麼？

$就是jQuery的別稱，是jQuery庫提供的一個函數。
可以獲取元素

$('#submit').attr('disabled', true);

可以寫爲：

jquery('#submit').attr('disabled', true);

1、可以通過 $() 裏的參數進行查找和選擇html文檔中的元素

如：

	$('#tmp');//這是查找dom的id等於tmp的元素

2、訪問 $ 中定義的函數
如：

	$.ajax(options)

18.$(document).ready()方法和 window.onload 的區別？

$(document).ready() 方法：可在 DOM 載入就緒時就執行，並調用執行綁定的函數；可多次使用不同事件處理程序；
window.onload 方法：網頁中所有的元素(包括元素的所有關聯文件)完全加載後才執行；一次只能保存對一個函數的應用；

window.onload 和 $(document).ready()主要有兩點區別：

• 1、執行時機

  window.onload：在網頁中所有元素（包括元素的所有關聯文件）都完全加載到瀏覽器之後才執行。
  $(document).ready()：只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標籤完成，不用等這個圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。

  從二者的英文字母可以大概理解上面的話，onload即加載完成，ready即DOM準備就緒。

• 2、註冊事件

  $(document).ready()：可以多次使用不同的事件處理程序，

  window.onload：一次只能保存對一個函數的引用，多次綁定函數只會覆蓋前面的函數。

兩個window.onload在同一個頁面上可能效果會展示不了。

19.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的 HTML元素，例如：br、meta、hr、link、input、img

20.你爲什麼要使用 jQuery？

jQuery的優點：輕量級框架；選擇器強大；DOM操作封裝豐富；事件處理機制可靠；Ajax完善；瀏覽器兼容；支持鏈式操作、隱式迭代；行爲層與結構層分離；支持的插件豐富；jQuery文檔豐富。

jquery的優點：

• 輕量級
  　　　　JQuery非常輕巧，採用Dean Edwards編寫的Packer壓縮後，大小不到30KB,如果使用Min版並且在服務器端啓用Gzip壓縮後，大小隻有18KB。

• 強大的選擇器
  　　　　JQuery允許開發者使用從CSS1到CSS3幾乎所有的選擇器，以及JQuery獨創的高級而且複雜的選擇器，另外還可以加入插件使其支持XPath選擇器，甚至開發者可以編寫屬於自己的選擇器。由於JQuery支持選擇器這一特性，因此有一定CSS經驗的開發人員可以很容易的切入到JQuery的學習中來。

• 出色的DOM操作的封裝
  　　　　JQuery封裝了大量常用的DOM操作，使開發者在編寫DOM操作相關程序的時候能夠得心應手。JQuery輕鬆地完成各種原本非常複雜的操作，讓JavaScript新手也能寫出出色的程序。

• 可靠的事件處理機制
  　　　　JQuery的事件處理機制吸收了JavaScript專家Dean Edwards編寫的事件處理函數的精華，是的JQuery在處理事件綁定的時候相當可靠。在預留退路、循序漸進以及非入侵式編程思想方面，JQuery也做得非常不錯。

• 完善的Ajax
  　　　　JQuery將所有的Ajax操作封裝到一個函數$.ajax()裏，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用的問題。

• 不污染頂級變量
  　　　　JQuery只建立一個名爲JQuery的對象，其所有的函數方法都在這個對象之下。其別名$也可以隨時交流控制權，絕對不會污染其他的對象。該特性是JQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮到後期的衝突。

• 出色的瀏覽器兼容性
  　　　　作爲一個流行的JavaScript庫，瀏覽器的兼容性是必須具備的條件之一。JQuery能夠在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常運行。JQuery同時修復了一些瀏覽器之間的的差異，使開發者不必在開展項目前建立瀏覽器兼容庫。

• 鏈式操作方式
  　　　　JQuery中最有特色的莫過於它的鏈式操作方式——即對發生在同一個JQuery對象上的一組動作，可以直接接連寫無需要重複獲取對象。這一特點使得JQuery的代碼無比優雅。

• 隱式迭代
  　　　　當用JQuery找到帶有“.myClass”類的全部元素，然後隱藏他們時。無需循環遍歷每一個返回的元素。相反，JQuery裏的方法都被設計成自動操作的對象集合，而不是單獨的對象，這使得大量的循環結構變得不再必要，從而大幅度地減少代碼量。

• 行爲層與結構層的分離
  　　　　開發者可以使用選擇器選中元素，然後直接給元素添加事件。這種將行爲層與結構層完全分離的思想，可以使JQuery開發人員和HTML或其他頁面開發人員各司其職，擺脫過去開發衝突或個人單幹的開發模式。同時，後期維護也非常方便，不需要在HTML代碼中尋找某些函數和重複修改HTML代碼。

• 豐富的插件支持
  　　　　JQuery的易擴展性，吸引了來自全球開發者來編寫JQuery的擴展插件。目前已經有超過幾百種官方插件支持，而且還不斷有新插件面試。

• 完善的文檔
  　　　　JQuery的文檔非常豐富，現階段多位英文文檔，中文文檔相對較少。很多熱愛JQuery的團隊都在努力完善JQuery中文文檔，例如JQuery的中文API。

• 開源
  　　　　JQuery是一個開源的產品，任何人都可以自由地使用並提出修改意見。