【Web前端】用CSS3实现弹幕

初版

用css3来实现弹幕确实比较简单，只需要设置动画让弹幕从屏幕右侧移动到屏幕左侧即可，一开始是这样实现的

.danmu {
  position: fixed;
  left: %;
  animation: danmu 5s linear 0s ;
}

@keyframes danmu {
  from {
    left: %;
    transform: translateX();
  }
  to {
    left: ;
    transform: translateX(-%);
  }
}

在pc端测试挺流畅，效果不错，但是一拿到移动端上试，就发现这个动画不流畅，有卡顿，ios稍好，android的话即使是配置高的机器也是有卡顿，配置低的机器就更是明显。

缘由

一番研究，发现是因为keyframes中使用left，这样的话left的改变会在渲染的过程中导致reflow，从而造成卡顿。那么改进的思路就比较明确了，移除left，只使用translate。

reflow（回流）：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素。

repaint（重绘）：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）

回流的成本比重绘高得多

下面情况会导致reflow发生

1：改变窗口大小　　resize事件发生时

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

新问题

但是全部使用translate又有新的问题，使用left:100%可以达到让弹幕从屏幕右侧开始出现，但是translate使用的百分比单位是相对于自身的，我们需要明确的给出屏幕宽度来translate，而屏幕宽度只有运行时用js才能获取到。这样一来，动画的keyframes看来是需要使用js来动态生成了。

解决方案

在需要展示动画前，动态生成一个style，根据当前屏幕宽度定义好keyframes。

// css
.danmu {
  position: fixed;
  left: ;
  visibility: hidden;
  animation: danmu 5s linear 0s ;
}

// js代码
  let style = document.createElement('style');
  document.head.appendChild(style);
  let width = window.innerWidth;
  let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
  let to = `to { visibility: visible; -webkit-transform: translateX(-%); }`;
  style.sheet.insertRule(`@-webkit-keyframes danmu { ${from} ${to} }`, );

注意，这里.danmu里设置了visibility为隐藏，不然弹幕会堆积显示在屏幕左侧，而keyframes里则设置visibility为显示，这样就使得弹幕只在动画过程中才能被看见。
这么做的原因是弹幕的初始位置为left: 0才能方便的设置弹幕头部从屏幕右侧出现然后从右向左移动到弹幕尾部消失在屏幕左侧为止。

再讲解一下let ，ES6 新增命令，用来声明变量。

• let声明的变量拥有块级作用域
• let声明的全局变量不是全局对象的属性
• 形如for (let x...)的循环在每次迭代时都为x创建新的绑定。
• 用let重定义变量会抛出一个语法错误（SyntaxError）。
• 不存在变量提升，声明的变量直到控制流到达该变量被定义的代码行时才会被装载，所以在到达之前使用该变量会触发错误，称为“暂时性死区”(TDZ)

ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串

• 提供了简单的字符串插值功能  ${变量名}
• 模板字符串可以多行书写  模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中。