相信不少小伙伴都看b/p站，其中有个比较有意思的效果就是当鼠标移动到视频上时，视频会随着鼠标移动幅度快进/退展现视频预览图，这个效果用户体验很不错。搜了一圈发现虽然可以前端用定时器+canvas实现，不过性能及兼容性各方面都不太完善，因此大部分还是推荐预先在后端处理好视频需求之后，再到前端做控制。这个扩展就是大名鼎鼎的 FFMpeg，其可以在服务端上安装运行，不过源码已经很久没有维护了（部分以前版本存在漏洞），实测宝塔环境安装指令：wget http://download.bt.cn/install/ext/ffmpeg.sh && sh ffmpeg.sh

安装完成后，花了几天时间研究了下 ffmpeg 指令及相关思路，现已将测试版集成到 wordpress 主题控件，当在后台上传视频类型文件到媒体库时将自动在同级上传目录下生成 jpg 长图/gif 动图以及文件 json 视频信息等，目前仅在部分页面开启（前端），后续再做更新优化。

Ps.

完成后测试体验不错，设计了一个新的样式。总的来说坑还是不少，不过解决问题的方案有非常多，还是需要多灵活变通。

很久没写过博客更新内容了，不过都有在更新的，前不久把服务端的后端 php 性能配置优化了一下（启用memcached、opcache缓存扩展，设置4G并发方案，memory_limit为256m，linux 启用 2G swap 虚拟内存等），感觉还是很有效果。这两天顺便把之前的图片懒加载也给重新安排上了（取消了 lazyload.js 的 jquery 依赖），之前只应用在文章中，现在全站开启，首屏加载效果的确比以前要快很多（尤其是漫游影视这种单页面多图片的，再加上php缓存后，加载速度效果卓越），主要很多页面减少了大量评论表情包请求，这种时候 lazyload 的确有必要。适配完成后已将版本更新到 github 。

在本地 lighthouse 评估测试中（PC端，移动端普遍下浮），除漫游影视主页面（多图片请求）及归档页面（大量sql请求）的 Performance 评分在 80-90 之间浮动外，其他页面均在 95-10 0之间，基本能实现秒开。测试 lighthouse 期间，顺便优化里其中的其他几项评分标准（Accessibility、Best practices、SEO），主要还是一些 seo 的东西（评论图片 alt 优化暂时搁置）。

在测试可访问性（Accessibility）栏目中的 CONTRAST 中有一条：Background and foreground colors do not have a sufficient contrast ratio.

也就是页面对比度不够，可能对视觉障碍用户有影响，这个也有很多博友提到过。还有字体大小，以后再慢慢优化吧。

Ps.

其实优化网站速度还是挺有必要的，以前基本都只是套个cdn，优化代码逻辑而已，其实优化后端还是蛮有必要的，毕竟依赖后端数据支持。

刚刚宕机了一会，上腾讯控制台重启服务器耗时很久重启之后才正常了，我预估是cpu或者内存满载了，至于原因不清楚，然后打算发个工单让他们帮查一下什么原因。在手动 提交工单 页面，选择服务器问题Linux系统卡顿，然后自动跳出来了个 自助检测 ，选择实例后开始检测即可。

然后结果不出所料，“该实例最近12小时的MEM利用率曾达[90%]…”、“该实例最近在2022-12-08 14:28 出现过外网出带宽平均利用率超过90%]…”，应该就是不知道什么情况外网访问把内存爆了，不过既然知道原因了也无所谓了。重启服务器后看到内存占用一半以上还是很高，顺便去把服务器上搭建部署的 seafile 服务暂停了，之后下降到了50%以下。

Ps.

有一说一这个自助检测还是很实用的，免去了发起工单浪费相互的时间。

这里 @小元 提醒到被回复后没有收到邮件提醒，因为我用的 valine 评论所以就去 leancloud 控制台看了下云引擎日志，结果报错 Error: Invalid login: 535 Error: authentication failed, system busy，查了下意思是 smtp 的密码没对，我又去主题后台看了下我自己设置的密码换上去，重新部署后还是一样 535 错误，于是上邮箱设置里看发现那个客户端密码没有了。。必须要绑定微信才可以生成（我记得以前应该是有的，不然我也不会用这个邮箱发件这么久，最近一次是6月份），没办法只能先用另一个绑定了微信的邮箱重新生成新smtp密码，更换邮箱信息重新部署后，就正常收发邮件了。

Ps.

这个不提醒还真不容易注意到，因为我主题开发后评论提醒是分开做的，别人评论我能收到微信（企业）推送，我回复别人走的是 leancloud 的云引擎发件函数，所以还真挺扯淡的。。

通常，我们使用 js 来克隆某一元素时一般会优先考虑 cloneNode(deep) 方法，通过该方法我们可以非常轻松实现元素克隆。当我们使用 on.xxx 为被克隆元素添加方法后，再使用 cloneNode 对其进行克隆后的元素将不再附带其自定义事件，也就是说：cloneNode()无法克隆事件（除元素内联事件外），这就导致其在部分场景无法适用。（注：在 jQuery 中的替代为 clone() 方法，该方法可以完整克隆自定义事件）
后了解到 importNode()及adoptNode()，前者与 cloneNode 一样无法克隆事件，后者则不同：adoptNode(Node)方法用于从另外一个文档中获取一个节点(可以是任何节点类型) adoptNode()会将原文档中的节点删除，类似元素“剪贴”后保留所有事件，这也是我们想要的。

Ps.

搜了一圈也没找到替代方法，一般就让用jquery，估计这个方法知道这个隐藏属性的也比较少，临时使用简单记录一下。