Category: Chrome

Reference link

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

1. 用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。

上报数据的方法
1. 我们可以将 ajax 请求改为同步方法，这样就能保证请求一定能发送到服务端。由于 fetch 及 axios 都不支持同步请求，所以需要通过 XMLHttpRequest 发送同步请求。这里要注意的是，将请求改为同步以后，会阻塞页面关闭或重新加载的过程，这样就会影响用户体验。
2. 动态图片
我们可以通过在 beforeunload 事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送，因为绝大多数浏览器会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。
[cc lang=”js”]const reportData = (url, data) => {
let img = document.createElement(‘img’);
const params = [];
Object.keys(data).forEach((key) => {
params.push(`${key}=${encodeURIComponent(data[key])}`);
});
img.onload = () => img = null;
img.src = `${url}?${params.join(‘&’)}`;[/cc]

此时服务端可以返回一个 1px * 1px 的图片，保证触发 img 的 onload 事件，但如果某些浏览器在实现上无法保证图片的载入，就会导致上报数据的丢失。
3. sendBeacon
为了解决上述问题，便有了 navigator.sendBeacon 方法，使用该方法发送请求，可以保证数据有效送达，且不会阻塞页面的卸载或加载，并且编码比起上述方法更加简单。
navigator.sendBeacon(url, data);

url 就是上报地址，data 可以是 ArrayBufferView，Blob，DOMString 或 Formdata，根据官方规范，需要 request header 为 CORS-safelisted-request-header，在这里则需要保证 Content-Type 为以下三种之一：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

如果数据类型是 string，则可以直接上报，此时该请求会自动设置请求头的 Content-Type 为 text/plain。

[cc lang=”js”]const reportData = (url, data) => {
navigator.sendBeacon(url, data);
}[/cc]
如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，一般设置为 application/x-www-form-urlencoded。
[cc lang=”js”]const reportData = (url, data) => {
const blob = new Blob([JSON.stringify(data), {
type: ‘application/x-www-form-urlencoded’,
}]);
navigator.sendBeacon(url, blob);
};[/cc]
可以直接创建一个新的 Formdata，此时该请求会自动设置请求头的 Content-Type 为 multipart/form-data
[cc lang=”js”]const reportData = (url, data) => {
const formData = new FormData();
Object.keys(data).forEach((key) => {
let value = data[key];
if (typeof value !== ‘string’) {
// formData只能append string 或 Blob
value = JSON.stringify(value);
}
formData.append(key, value);
});
navigator.sendBeacon(url, formData);
};[/cc]

breakpoint

1 调试可以忽略代码

1. Blackbox a script from the Editor pane ：blackbox source 右击代码 blackbox script
2. Blackbox a script from the Call Stack pane
3. Blackbox提供了这个便利功能，当你把不需要调试的代码加入Blackbox时候，调试的时候便会自动绕过这些文件，断点也不会调入黑盒中
4. restart frame : 右击 call stack里第一个函数 ，选择 restart frame 可以重新 debugger 函数
5. breakpoint continue to here Add conditional breakpoint 设置条件断点
6. xhr fetch breakpoints 添加 url 关键字， 有访问就会打端点
7. Dom breakpoints Dom 属性改变 删除 内容改变 都可以打断点
8. 在 scope 改 变量数据

performance

看每秒的帧数， 如果FPS 是红线说明 用户不到60FPS

解决问题

看summary 扇形图 看看哪个时间长 然后减少它的时间

1. Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. main 里每一个bar 代表一个事件，事件下面是当前bar的子事件
2. Animation Frame Fired （估计每个screenshot 是一帧） 当你在main 里 看到 一个 动画帧里有红色三角行，就说明这个bar当前事件有警告， 点开mian 里的 bar 事件，然后点击 summary 的 reveal link， 再点击关联文件就到 source 里了
3. 减少页面re-layout 重绘，用flex 布局
4. 坚持仅合成器的属性和管理层计数

• 坚持使用 transform 和 opacity 属性更改来实现动画。
• 使用 will-change 或 translateZ 提升移动的元素。
• 避免过度使用提升规则；各层都需要内存和管理开销。

.moving-element {
  will-change: transform;
}
.moving-element {
  transform: translateZ(0);
}

https://web.dev/rail/