瀏覽器知識點總結

瀏覽器基礎特點

• 核心以及核心渲染原理
• html解析器
• CSS解析器
• JavaScript引擎
• 渲染過程（HTML如何載入、CSS如何渲染、js如何載入）、repaint、reflow

HTML + CSS 基礎知識總結

• 儲存
• 跨域操作
• 事件
• 渲染
• 安全

儲存

• localStorage
• sessionStorage
• cookie
• cache

localStroage:
setItem("key","value");//以“key”為名稱儲存一個值“value”
localStorage.getItem("key");//獲取名稱為“key”的值
localStorage.removeItem("key");//刪除名稱為“key”的資訊。
localStorage.clear();​//清空localStorage中所有資訊

sessionStorage:
setItem("key","value");//以“key”為名稱儲存一個值“value”
sessionStorage.getItem("key");//獲取名稱為“key”的值
sessionStorage.removeItem("key");//刪除名稱為“key”的資訊。
sessionStorage.clear();​//清空sessionStorage中所有資訊

cookie 有大小限制和個數限制，大小為4K左右 個數最多有50個了
寫入cookie:
document.cookie  = 'username=Darren'

封裝函式獲取cookie的值：
function getCookie(c_name) {    
	if(document.cookie.length > 0) {   //先查詢cookie是否為空，為空就return ""
		c_start = document.cookie.indexOf(c_name + "=")   //通過String物件的indexOf()來檢查這個cookie是否存在，不存在就為 -1
		if(c_start != -1) {        
			c_start = c_start + c_name.length + 1;   //最後這個+1其實就是表示"="號啦，這樣就獲取到了cookie值的開始位置
			c_end = document.cookie.indexOf(";", c_start);   //其實我剛看見indexOf()第二個引數的時候猛然有點暈，後來想起來表示指定的開始索引的位置...這句是為了得到值的結束位置。因為需要考慮是否是最後一項，所以通過";"號是否存在來判斷
			if(c_end == -1) {
				c_end = document.cookie.length;  
			}      
			return unescape(document.cookie.substring(c_start, c_end))   //通過substring()得到了值。想了解unescape()得先知道escape()是做什麼的，都是很重要的基礎，想了解的可以搜尋下，在文章結尾處也會進行講解cookie編碼細節
		}    
	}    
	return ""  
}
複製程式碼

事件

• 瀏覽器事件
• 滑鼠事件（jQuery中）
• 鍵盤事件（jQuery中）
• 表單事件（jQuery中）

瀏覽器事件
onbeforeunload：關閉當前瀏覽器tab頁面時執行的事件

window.addEventListener('beforeunload', function(event) {
    if(event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = '你確認要離開嗎？';
    }
    });

onload：頁面結束載入之後觸發
onresize：當瀏覽器視窗被調整大小之後觸發

滑鼠事件
click dblclick mouseenter mouseleave

鍵盤事件
keypresss keydown keyup

表單事件
focus blur change submit
複製程式碼