背景

有同学反映「权限申请」按钮的动画效果会导致 GPU 占用高的问题，在我的 m1 macbook pro 13 上表现为占用 20~25%，但是那位同学说在他电脑上占用率高达 130%，因此想搞明白为什么 animation 会导致 GPU 占用如此高。

@keyframes flowlight {
  // 0% {
  //   background-position: 0 0;
  // }
  100% {
    background-position: -400% 0;
  }
}

// 按钮的类名
.permission-url {
  background-image: linear-gradient(
    -89deg,
    #fcab9b,
    #f1d3af,
    #afc9f1,
    #bb9cfc,
    #fcab9b
  );
  background-size: 400%;
  animation: flowlight 3.5s linear infinite;
}

提升90%加载速度——vuecli下的首屏性能优化

链接

Vue SPA 首屏加载优化实践

链接

从资源请求完成到页面的显示：

1. 解析HTML字符串构建DOM树
2. 解析CSS样式，产生CSSOM树
3. 执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
4. 浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式 display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。
5. 根据渲染树对每一个节点在页面上进行布局。（reflow）
6. 遍历渲染树，为每一个节点绘制对应的样式，显示到屏幕。(repaint)

牛客真题
知乎解析

preload 提前加载

preload顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用时立即执行，无需等待网络的消耗。
当浏览器解析到这行代码就会去加载 href 中对应的资源，但不执行，待到真正使用到的时候再执行。

简书文章链接

缓存位置

• Service Worker
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。

使用 Service Worker 的话，传输协议必须为**HTTPS。因为 Service Worker 中涉及到请求拦截**，所以必须使用 HTTPS 协议来保障安全。