动画、播放器、文件加载过大

2022-06-14 前端 PV:

解决前端动画卡顿的问题

页面卡顿原因：
我们设备大多数的肉眼可见不卡顿是 60fps,就要求浏览器对每一帧动画的渲染在 16ms 内完成。
优化方案如下：

1.css 优化

1. 尽量使用 transform 属性，避免使用 height、width、margin、padding 等.
  浏览器的渲染进程里有主线程和合成线程，margin-left:-18px，就要计算 18 次，经历 DOM tree、css tree、render tree、绘制这些阶段，然后合成线程也要计算 18 次，但是使用 transform：translate 只要 1+18=19 次。(大概次数，不是准确的数字，只是举例子)
1. 要求较高时，可以开启 GPU 硬件加速器
  当触发 3d 属性时，浏览器会默认开启。比如 -webkit-transform:translate3d(250px,250px,250px)
1. 使用 flex 布局代替原有的老式布局，flex 布局更加高效。

2.js 优化

1. 使用 requestAnimationFrame 代替 setTimeOut 和 setInterval
  requestAnimationFrame 是 window 对象的一个方法，他会告诉浏览器执行一个动画，可以指定调用回调函数进行更新动画，但是 setTimeOut 和 setInterval 无法确认执行时机。
1. DOM 无关的耗时操作放到 Web Worker 中
  Worker 线程负担高延迟且 UI 无关的任务，主线程负责 UI 交互就会相对流畅。
1. 减少需要计算样式的元素个数

tips: https://blog.csdn.net/terrychinaz/article/details/115518078

transition 和 animation 的区别

transiton: property duration timing-function delay;
// 属性名称、过渡时间、速度曲线、延迟时间

animation: name duration time-function delay iteration-count direction;
// 帧（keyframe）名称、过渡时间、速度曲线、延迟、播放次数、播放方向

1. transition 只有两个状态——开始和结束状态
  animation 可以设置多个状态，有帧的概念
1. transition 需要借助别的方式触发比如 hover 或者 js
  animation 可以自动触发
1. animation 功能更强大可以设置循环次数、播放方向、播放状态等，这些都是 transition 做不到的
1. animation 设置离不开@keyframes,也就是说设置动画帧效果
1. transition 并不是所有的 css 属性都可以具备过渡效果
  animationn 几乎所有的 css 属性都可以设置动画效果

tips: transform 也是用来制作动效的，只不过是提供一些函数，做不同的转换。

相同点： animation 和 transition 本质都是通过控制 css 属性变化来达到动画视觉效果，但是 transform 描述的是元素静态样式，这个允许元素旋转、缩放、移动、倾斜。

视频优化

1. 合适的视频格式
  WebM 相较于 MPEG-4 来说相对小一些，但是有兼容性问题，所以一般 vedio 中配多个 source。
  （AV1 编码更小）
1. 视频压缩
  Hybrid、HandBrake、Freemake、MeGui
1. 不需要音频的情况下移除音轨数据，vedio 设置 muted
1. 切片的方式，不断地下载一小段的分片来进行视频播放，避免完整视频下载的流量消耗
1. 不需要使用视频的场景，去掉视频，可以通过媒体查询避免下载视频。

@media screen and (max-width: 650px) {
    #hero-video {
        display: none;
    }
}

1. 播放器 sdk 的优化、数据预取、码率自适应
… 视频不单单是内容，还有尺寸、字幕、时长、版权信息等。一个 mp4 文件是由多个 box 组成的。如果是在线观看，就会不停的查找视频的信息，比如开始、结束的位置，所以会多次发起请求。但是如果视频就在本地，就没有什么问题，所以预加载可以起到优化的作用。
… 利用一些工具对视频进行加工，比如把 Moov box 提到视频的前面。

tips: http://www.proyy.com/6970157600419610638.html