Html5+js測試題(開發版)

------------------------------------------------

1. 談談你對js閉包的理解:

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。

閉包三個特性:   

　　　　　　 ①：函數嵌套函數 ;

　　　　　　 ②：函數內部能夠引用外部的參數和變量 ;

　　　　　　 ③：參數和變量不會被垃圾回收機制回收

2. 談談你對Cookie的理解和優缺點:【客戶端】

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的;

每一個特定的域名下最多生成20個cookie;IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie;cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節;

優勢：極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。

2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點:

1.Cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

3. html5瀏覽器本地存儲有哪些?

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage:用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

localStorage:用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

4. web storage和cookie的區別?

Web Storage的概念和cookie類似，區別是:

Web storage:1.是爲了更大容量存儲設計的。2.Web Storage擁有setItem,getItem,removeItem,clear等方法.3.Web Storage僅僅是爲了在本地「存儲」數據而生

Cookie:1.大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬;2.cookie還須要指定做用域，不能夠跨域調用。3.須要前端開發者本身封裝setCookie，getCookie.4.cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在;

**localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等**

5. cookie 和session 的區別：

1.cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2.cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙 考慮到安全應當使用session。

3.session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能 考慮到減輕服務器性能方面，應當使用COOKIE。

4.單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

5.因此我的建議:將登錄信息等重要信息存放爲SESSION其餘信息若是須要保留,能夠放在COOKIE中

6. display:none和visibility:hidden的區別？

display:none:隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏， 就當他歷來不存在。

visibility:hidden:隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

7. position:absolute和float屬性的異同

共同點：對內聯元素設置`float`和`absolute`屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

不一樣點：float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

8. 介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。 

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

9. CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS3新增僞類有那些？

1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（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, text-indent;

不可繼承的樣式：border padding margin width height ;

優先級就近原則，同權重狀況下樣式定義最近者爲準;

載入樣式以最後載入的定位爲準;

CSS3新增僞類舉例：

p:first-of-type  選擇屬於其父元素的首個<p>;元素的每一個<p>元素。

p:last-of-type  選擇屬於其父元素的最後<p>; 元素的每一個<p>; 元素。

p:only-of-type 選擇屬於其父元素惟一的<p>; 元素的每一個<p>; 元素。

p:only-child   選擇屬於其父元素的惟一子元素的每一個<p>; 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個<p>; 元素。

:enabled  :disabled 控制表單控件的禁用狀態。

:checked  :單選框或複選框被選中。

10. position的值， relative和absolute分別是相對於誰進行定位的？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。

relative :生成相對定位的元素，相對於其在普通流中的位置進行定位。static 默認值。沒有定位，元素出如今正常的流中（相對於父容器來講）

11. CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);旋轉,縮放,定位,傾斜 增長了更多的CSS選擇器 多背景 rgba 在CSS3中惟一引入的僞元素是::selection. 媒體查詢，多欄佈局 border-image
12. XML和JSON的區別？

1.數據體積方面。JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

2.數據交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

3.數據描述方面。JSON對數據的描述性比XML較差。

4.傳輸速度方面。JSON的速度要遠遠快於XML。
13. 說說你對語義化標籤的理解？address　　title　　header　　footer

1.去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2.有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；[爬蟲]

3.方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4.便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

14. 網頁設計常見兼容性問題有哪些,如何解決？

Document.getElementByid('name')

1.png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.

2.瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

3.IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

4.浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

5.漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

6.IE下,可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一經過getAttribute()獲取自定義屬性.

7.IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

8.解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

9.Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

10.超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

11.怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：<doctype html>

12.上下margin重合問題 ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。 解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

ie6對png圖片格式支持很差(引用一段腳本處理)

15. 解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。 這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。

2.使用overflow。 給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

3.使用after僞對象清除浮動。 該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。　　::after

使用中需注意:該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素.

16. 浮動元素引發的問題和解決辦法？

浮動元素引發的問題：1.父元素的高度沒法被撐開，影響與父元素同級的元素; 2.與浮動元素同級的非浮動元素（內聯元素）會跟隨其後; 3.若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法：使用CSS中的clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式

17. DOM操做——怎樣添加、移除、移動、複製、建立和查找節點

1.建立新節點 createDocumentFragment() //建立一個DOM片斷 createElement() //建立一個具體的元素 createTextNode() //建立一個文本節點

2.添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點

3.查找 getElementsByTagName() //經過標籤名稱 getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的) getElementById() //經過元素Id，惟一性

18. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

1.HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

2.拖拽釋放(Drag and drop) API 語義化更好的內容標籤（header,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失； sessionStorage 的數據在瀏覽器關閉後自動刪除 表單控件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation

3.移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 對可用性產生負面影響的元素：frame，frameset，noframes；支持HTML5新標籤：

4.IE8/IE7/IE6支持經過document.createElement方法產生的標籤， 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤， 瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

5.固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

19. iframe的優缺點？

<iframe>優勢： 解決加載緩慢的第三方內容如圖標和廣告等的加載問題 Security sandbox 並行加載腳本 solve slow to load third-party content such as icons and advertisements of loading problems Security sandbox parallel load script

<iframe>的缺點:          1.iframe會阻塞主頁面的Onload事件；2.即時內容爲空，加載也須要時間 3.沒有語意

(爬蟲抓不到iframe內容)

20. 如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

21. 請說出三種減小頁面加載時間的方法

1.優化圖片

2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3.優化CSS（壓縮合並css，如margin-top,margin-left...)

4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）——（最好加上斜槓）

5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。 當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）

減小http請求（合併文件，合併圖片）。

22. documen.write和 innerHTML的區別

Document.write: 只能重繪整個頁面;  innerHTML: 能夠重繪頁面的一部分

23. sql注入原理

就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。總的來講有如下幾點：

1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等。

2.永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取。

3.永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接。

不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。

select * from users where username="aa" and password="aa";

A' or 1=1 #
24. XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點.

(跨域攻擊）

25. XSS與CSRF有什麼區別嗎？

XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。

要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：

　　1.登陸受信任網站A，並在本地生成Cookie。 
　　2.在不登出A的狀況下，訪問危險網站B。

26. CSRF的防護

1.服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數。

使用驗證碼

27. Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash ajax對比 Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM

28. GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。 GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。然而，在如下狀況中，請使用 POST 請求： 沒法使用緩存文件（更新服務器上的文件或數據庫） 向服務器發送大量數據（POST 沒有數據量限制）發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

29. 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 服務器端暫時沒法處理請求（多是過載或維護）。

30. 談談網頁性能優化問題

 

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。 
         緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等 
         請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。 
         請求帶寬：壓縮文件，開啓GZIP，

移動端性能優化:儘可能使用css3動畫，開啓硬件加速。適當使用touch事件代替click事件.避免使用css3漸變陰影效果.儘量少的使用box-shadow與gradients box-shadow與gradients每每都是頁面的性能殺手