BOM
- BOM是browser object model的縮寫，簡稱瀏覽器對象模型。
- 瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。
- Window是BOM中的核心對象。
1. window.onload 和 document.onDOMContentLoaded 有什么區(qū)別？
- 當使用window.onload時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成。
- 當使用document.onDOMContentLoaded時，僅當DOM加載完成不包括樣式表、圖片、flash。
2. 如何獲取圖片真實的寬高？
document.querySelector("img").onload = dunction() {
console.log(this.width);
console.log(this.height);
3. 如何獲取元素的真實寬高？
//假如我要獲取名為body元素的寬高
console.log(body.offsetHeight)
console.log(body.offsetWidth)
4. URL 如何編碼解碼？
JavaScript中提供了四個URL編碼方法：
- encodeURI()
用于轉碼整個 URL。它的參數(shù)是一個字符串，代表整個 URL。它會將元字符和語義字符之外的字符，都進行轉義。不會對ASCII字母、數(shù)字、~!@#$&*()=:/,;?+'
字符編碼 。
encodeURI('http://www.example.com/q=春節(jié)')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"
- encodeURIComponent()
用于轉碼 URL 的組成部分，會轉碼除了語義字符之外的所有字符，即元字符也會被轉碼。所以，它不能用于轉碼整個 URL。它接受一個參數(shù)，就是 URL 的片段。不會對ASCII字母、數(shù)字、~!*()' 字符編碼。
注意：encodeURIComponent()會連 URL 元字符一起轉義，所以如果轉碼整個 URL 就會出錯。
encodeURIComponent('春節(jié)')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春節(jié)')
//"http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"
- decodeURI()
用于整個 URL 的解碼。它是encodeURI()方法的逆運算。它接受一個參數(shù)，就是轉碼后的 URL。
decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春節(jié)"
- decodeURIComponent()
用于URL 片段的解碼。它是encodeURIComponent()方法的逆運算。它接受一個參數(shù)，就是轉碼后的 URL 片段。
decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春節(jié)"
5.為什么要編碼？
- URL就是網(wǎng)址，只要上網(wǎng)，就一定會用到。
- 只有字母和數(shù)字[0-9a-zA-Z]、一些特殊符號“$-_.+!*'(),”[不包括雙引號]、以及某些保留字，才可以不經(jīng)過編碼直接用于URL。
- 如果URL中有漢字，就會導致亂碼。
- URL參數(shù)字符串中如果包含”&”或者”%”勢必會造成服務器解析錯誤。
- 不同情況瀏覽器，網(wǎng)頁，編碼的處理方式不同。也會導致編碼混亂不堪。
怎么解決上述問題？
使用Javascript先對URL編碼，然后再向服務器提交，不要給瀏覽器插手的機會。因為Javascript的輸出總是一致的，所以就保證了服務器得到的數(shù)據(jù)是格式統(tǒng)一的。
6. cookie & session &localStorage 分別是什么？
cookie
- 會跟隨請求被發(fā)送到服務器上
- 是存儲在瀏覽器上的一小段數(shù)據(jù)，用來記錄某些當頁面關閉或者刷新后仍然需要記錄的信息
- 一般瀏覽器存儲cookie 最大容量為4k，所以大量數(shù)據(jù)不要存到cookie。
- 有個數(shù)限制，不同瀏覽器下，一個域名下cookie的個數(shù)有限，并且限制數(shù)量可能不一樣
session
- 當一個用戶打開一個頁面登錄后，刷新瀏覽器仍然展示登錄狀態(tài)。服務器如何分辨這次發(fā)起請求的用戶是剛才登錄過的用戶呢 這里就使用了session保存狀態(tài)。用戶在輸入用戶名密碼提交給服務端，服務端驗證通過后會創(chuàng)建一個session用于記錄用戶的相關信息，這個 session 可保存在服務器內存中，也可保存在數(shù)據(jù)庫中。
- 創(chuàng)建session后，會把關聯(lián)的session_id 通過setCookie 添加到http響應頭部中。
- 瀏覽器在加載頁面時發(fā)現(xiàn)響應頭部有 set-cookie字段，就把這個cookie 種到瀏覽器指定域名下。
- 當下次刷新頁面時，發(fā)送的請求會帶上這條cookie， 服務端在接收到后根據(jù)這個session_id來識別用戶。
- cookie 是存儲在瀏覽器里的一小段「數(shù)據(jù)」，而session是一種讓服務器能識別某個用戶的「機制」，session 在實現(xiàn)的過程中需要使用cookie。 二者不是同一維度的東西。
localStorage
- localStorage HTML5本地存儲web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中，保存后數(shù)據(jù)永遠存在不會失效過期，除非用 js手動清除。
- 不參與網(wǎng)絡傳輸。
- 一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。
- 總體數(shù)量無限制
