@cyrbuzz

这个...比预想的要简单，都有现成的 API 。

```

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" onclick="pause(this)" id="ff">
<g>
<rect
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="square"
width="100"
height="100"
x="30"
y="30"
>
<animate
id="frame1"
attributeName="display"
values="inline;none;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</rect>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="circle"
d="m 125,80 a 45,45 0 1 1 -90,0 45,45 0 1 1 90,0 z">
<animate
id="frame2"
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="triangle"
d="M 105,105 47,89 89,46 105,105 z">
<animate
id="frame3"
attributeName="display"
values="none;none;inline;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
</g>
</svg>

<input type="text" placeholder="指定帧 1-3" onblur="setFrames(this.value)">

<script>
var a = true
function pause(t) {
a ? t.pauseAnimations() : t.unpauseAnimations()
a = !a
}

var b = document.querySelector('#ff')
cc = {
1: '0',
2: '0.33',
3: '0.66'
}
function setFrames(value) {
b.pauseAnimations()
a = !a
b.setCurrentTime(cc[value])
}

</script>
```

svg 复制自题主给的文章...搜了一下 svg 直接可以指定 onclick，在浏览器里控制台里可以看到 svg 控件有 pauseAnimation 和 unpauseAnimations，顾名思义一个暂停一个不暂停，实现 播放和暂停功能。循环这个不知道是啥..本身就是循环的，指定帧发现了一个叫 setCurrentTime 的 API，这个 API 可以指定当前 SVG 的时间，每个<animate>块都指定了 values 和 keyTimes 对应时间的 display 值，建立一个映射表即可。

17 点 39 分看到这个，准备试试。

@xuegy

好吧~，have a good day~.

@cyrbuzz
vscode，单行开正则...

(.+) (.+) = (.+);
$1 $2($3);

比格沃斯。

solarized light 真香。

https://github.com/HuberTRoy/myown/blob/master/%E5%9F%BA%E4%BA%8E%E6%80%9D%E8%80%83%E6%89%80%E5%81%9A%E7%9A%84%E6%8E%A2%E7%B4%A2/%E6%80%A7%E8%83%BD%E6%96%B9%E9%9D%A2%E7%9A%84%E6%8E%A2%E7%B4%A2.md

https://github.com/HuberTRoy/myown/blob/master/web%E7%A8%8B%E5%BA%8F%E4%BC%98%E5%8C%96%E6%80%9D%E8%B7%AF.pdf

优化公司产品时的总结，lighthouse 从不到 10 分已经提升到了 50~60+。

我自己的实践优化方面是：
1. 第三方资源非阻塞加载，async/defer 标记，这个提速很大。
2. DNS/CDN(百度统计等)链接的预查询与预连接，这个看不出来效果，提速微小。
3. 服务器端支持 HTTP2，比 HTTP1.1 快了不是一点两点。
4. 利用服务器端进行延迟加载，本身是个 Nuxt 的服务器端项目，利用 client-only 标签配合 import() + v-if 条件渲染，其实就是个分块+懒加载不过效果巨大，鹅且平时写组件的时候几乎都用 import 静态导入，调用频率低的模块也可以用 import()来改写。
5. webpack 打包时的 tree-shaking，老生常谈的 lodash 和 lodash-es 等等，这个减少的是传输体积，如果项目本身冗长这块提升也非常大。
6. 缓存这个就不用说了，检查检查有没有配置合理。
7. 图片移动端剪裁成 2 倍实际显示大小的尺寸，PC 端 1 倍，牺牲小部分清晰度的同时大幅减少传输体积。
8. 项目具体内部的代码优化，比如之前实现了一个利用 vue computed 属性的动态设置 style 的滚动效果，发现占用 CPU 20%以上....然后改成了 animation 。

transition 是一种从`有`到`有`的动画。所以你需要给.flashing 一个初始值 .flashing { opacity: 0 }。

另外直接写楼上的动画比用 JS 更简洁清晰易懂。

试试用订阅发布模型。

window.addEventListener('getWithImageUrl', (_url) => url = _url); window.dispatchEvent(new Event('getWithImage'))

这个...我怎么觉得返回`{A:""}`其实也不省流量，如果这个接口在一次普通用户访问中只会调用固定的几次，这样前端本来可以写成`response.B[0]`的代码现在要写成`response.B && response.B[0]`，这样不仅没有省流量，还有可能会阻塞首屏加载的嘞= =...

我自己的操作是....前期投入一个可接受的全亏钱(1k/1w)，然后如果全亏了就跑路，没有的话就按照盈利，比如投入的 1k 一年之后变成了 1.2k ，我就再加 0.8k ，保证盈利的钱在 10%内(一天最多亏 10%)，这样就变成了赚钱与不赚之间的选择而不是亏钱与赚钱之间的抉择了。

冲冲冲。

@wangsd

好滴，谢谢大佬，被双击搞得头秃，买了达尔优 em905，这个用坏了试试你这个，再次感谢~。

@qfans67

酷酷的名字。

@wangxiaoaer

有时候有会跳跃的感觉。

@iyu90

谢谢推荐，M720 确实还可以。

@johnsonshu

最近被连点折腾的没脾气...，偶尔会玩游戏，能正常点跟手就 ok 。

@AllenHua

好便宜...下单试试。

@ashtwo

两节电池感觉会有点重，谢谢推荐。


@JmingZhang
@Notamo

谢谢推荐~。


@wangsd

是要自己组装吗= =淘宝搜出来的是配件。

@PandaRun

感觉很不错的样子，谢谢推荐~。

@dasbn

连点搞得很烦= =，有线也加入备选了，谢谢。

@Cheons
@VsevenMagic
@qfans67
@elfive

G304 看着不错哎，谢谢推荐。

@ashtwo
703 有点小贵..


@zzzain46
这个感觉外形不太喜欢，谢谢推荐。


@zjuster
@sleeperqp
没用过的形状，考虑考虑，谢谢推荐。

@Light3
嗯嗯，谢谢预警。

按时长大。

粘贴在控制台没啥报错。