国外 网站页面引擎优化
1. css的动画（animation)
css中实现动画有两种方式：transition过渡动画、 animation自定义动画。
具体的可以看MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
- 使用@keyframes自定义关键帧动画并未其命名
- 使用自定义动画的时候，需要对
animation属性进行配
| 属性 | 含义 |
| animation-name | 指定一个或多个@keyframes自定义的动画名字，当多个的时候用，隔开。 例如：anination-name:test1,test2 |
| animation-duration | 指完成一个动画的所需要的时间 |
| animation-timing-function | 指动画效果在每个周期内是如何进行的 例如：linear：匀速运动 ease-in: 由慢到快 ease-out: 由快到慢 ease-in-out：由慢到快在到慢 steps(n, <jumpterm>)： 将动画分为n分，然后按照n个定格显示动画效果
|
| animation-delay | 设置动画延迟时间（s/ms)，默认为0，当为负数的时候，代表立即执行 *****适合当多个动画的时候，可依次定义每个动画的延迟执行时间， 区分开每个动画。 |
| animation-iteration-count | 动画执行次数，默认执行一次，infinite无限执行 可以指定多个动画效果，用，隔开 |
| animation-direction | 动画的运动方向 例如：reverse：反方向播放 alternate：正反交替播放（循环） |
| animation-fill-mode | 设置动画在执行前后的样式 例如：forwards ： 目标元素保持最后一帧动画 backwards： 目标元素保持起始帧动画 |
| animation-play-state | 设置动画是暂停还是开始 |
2 . 使用animation 动画实现一个简单的打字效果
js/css 代码如下
const contentDiv = document.querySelector('#content')const data = '最简单的打字机效果实现'.split('')let index = 0function writing() {if (index < data.length) {contentDiv.innerHTML += data[index++]setTimeout(writing, 100)// requestAnimationFrame(writing)}}writing() #content {height: 400px;padding: 10px;font-size: 28px;background-color: #eee;border-radius: 20px;}#content::after {color: #f00;animation: blink 1s infinite;content: '|';}@keyframes blink {from {opacity: 0;}to {opacity: 1;}}效果如图：
3. 接入SSE,使用后台推送的数据，来动态实现打字效果
选SSE,主要是是我们不需要向后台推送数据，只需要实时接收就可以，SSE返回的是流式输出的数据
我们可以使用node 自己写一个sse 接口，如：
因为我们使用的模块的格式写的接口，所以需要在app.js里引入（一定要设置允许跨域，不然会出现跨域的情况）
在需要的页面中使用new EventSource来接入就可以了
具体关于SSE的可以看MDN的链接：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
可以看到控制台是以流式来推数据的
把后台返回的数据，进行拼接展示
<script>const contentDiv = document.querySelector('#content')let currentContent = '' // 存储当前显示的内容function writing(text) {let index = 0function appendText() {if (index < text.length) {currentContent += text[index]contentDiv.innerHTML = currentContentindex++setTimeout(appendText, 100) // 调整这个时间来改变打字速度}}appendText()}const sse = new EventSource('http://localhost:3000/user/sse')sse.addEventListener('message', (event) => {const data = JSON.parse(event.data)writing(data.msg)})</script>效果截图如下：
4. 扩展--ch单位
ch是一个相对于数字0的大小
例如1ch 相当于1/2 汉字，也就是2ch 相当于一个汉字的宽度
2ch时如图：
1ch时如图：
1ch 相当于1个英文宽度
