事件机制
1、事件触发三阶段
● window 往事件触发处传播，遇到注册的捕获事件会触发
● 传播到事件触发处触发注册的事件
● 从事件触发处往window传播，遇到注册的冒泡事件会触发
触发顺序：捕获 - 触发 - 冒泡
特例：给一个节点同时注册多个事件，触发的顺序是按照注册的顺序来的
// 以下会先打印冒泡然后是捕获node.addEventListener('click',event=>{console.log('冒泡')},false)node.addEventListener('click',event=>{console.log('捕获 ')},true)
2、注册事件
addEventListener(事件名，方法，冒泡还是捕获)
使用stopPropagetion阻止默认事件
3、事件代理
有很多子节点需要注册事件，就把事件注册到父节点上
<ulid="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let ul=document.querySelector('#ul')
ul.addEventListener('click',event=>{console.log(event.target)})
</script>
节省内存
不需要给子节点注销事件
4、跨域
因浏览器的安全策略，跨域不能请求，协议、端口号、域名有一个不一样都是跨域；
解决方法如下：
1）JSONP
利用script标签没有跨域限制的漏洞，指向一个要访问的地址提供一个回调函数接收数据
简单切兼容性不错，但只限get请求
2）CORS
需浏览器和后端同时支持，关键是后端。
服务端设置 access-control-allow-origin 就可以开启CORS。
该属性表示哪些域名是可以访问的，如果是通配符就都可以访问。
3）document.domain
二级域名相同时可以使用，如a.test.com和b.test.com.
只需给页面添加document.domain = 'test.com'既可以实现跨域
4）postMessage
用于获取嵌入页面中的第三方页面数据，一个页面发消息，另一个页面判断来源是否接受
5、event loop
微任务：nextTick、promise、Object.observe、MutationObserver
宏任务：script、setTimeout、setInterval、setImmediate、I/O，ui rendering
微任务并不一定快于宏任务
正确的顺序应该：
1）同步代码，属于宏任务
2）查询微任务
3）执行微任务
4）有必要就去渲染ui
5）下一轮event loop
*setTimeout：HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加
6、存储：
cookie、localStorage、sessionStorage、indexDB
cookie注意安全性
大量存储用local或session，不怎么变的用local
7、渲染机制
浏览器的渲染机制一般分为以下几个步骤：
1）处理 HTML 并构建 DOM 树。
2）处理 CSS 构建 CSSOM 树。
3）将 DOM 与 CSSOM 合并成一个渲染树。
4）根据渲染树来布局，计算每个节点的位置。
5）调用 GPU 绘制，合成图层，显示在屏幕上。
越是具体的 CSS 选择器，执行速度越慢。
当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。
8、重绘（Repaint）和回流（Reflow）
重绘只是更改外观不影响布局，比如更改color
回流是更改布局，要重新画页面，影响性能大
回流一定会发生重绘，反过来不一定，回流的成本很高
event loop也会影响重绘和回流
9、减少重绘和回流
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免 DOM 深度过深
将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。
网友评论