浏览器知识点总结

浏览器基础特点

• 内核以及内核渲染原理
• 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
复制代码