2020-06-10 浏览器

事件机制

1、事件触发三阶段

● window 往事件触发处传播，遇到注册的捕获事件会触发

● 传播到事件触发处触发注册的事件

● 从事件触发处往window传播，遇到注册的冒泡事件会触发

触发顺序：捕获 - 触发 - 冒泡

特例：给一个节点同时注册多个事件，触发的顺序是按照注册的顺序来的

// 以下会先打印冒泡然后是捕获node.addEventListener('click',event=>{console.log('冒泡')},false)node.addEventListener('click',event=>{console.log('捕获 ')},true)

2、注册事件

addEventListener(事件名，方法，冒泡还是捕获)

使用stopPropagetion阻止默认事件

3、事件代理

有很多子节点需要注册事件，就把事件注册到父节点上

<ulid="ul">

</ul>

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 标签，浏览器会自动将该节点变为图层。