很久没写过博客更新内容了，不过都有在更新的，前不久把服务端的后端 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，估计这个方法知道这个隐藏属性的也比较少，临时使用简单记录一下。

重新开启子域名cdn加速访问图片后，这个生成图文海报的插件又出了之前那个跨域问题，在后端配置了 Access-Control-Allow-Origin 后仍然不能访问（之前不知道是怎么搞的能访问），于是又查了一圈，发现需要给图片添加 crossorigin="anonymous" 属性，试了一下还是不能（此时图片无法访问）然后发现了个新方法：在 src 属性后添加固定字符串参数即可！（实测添加参数后，不添加 crossorigin="anonymous" 也可以正常访问）。在控制台网络中可以看到不携带参数出现cors跨域问题的图片是没有 Access-Control-Allow-Origin 响应头的，其 Referrer Policy 为 stict-origin-when-cross-origin ，原因就是 img 是在缓存数据中读取的，远程访问这个图片的时候没有携带请求头。参考链接：https://www.jianshu.com/p/169f50d95c19

Ps.

流程：首先需要在 nginx 中配置 Access-Control-Allow-Origin 跨域访问，之后在 html2canvas 中配置 useCORS:true 开启跨域，最后在需要跨域的图片 src 属性后添加任意参数（如 ?fixed_cors 不可随机参数，可能造成 cdn 缓存击穿），至于是否需要在跨域图片上添加 crossorigin="anonymous" 属性需要自行尝试。

突然发现 valine 的评论顺序出错了，在 @zlprime 的评论页面，最新评论的内容跑到最后一页去了。因为近两天刚把评论区的表情包地址全部替换了一遍，以为是 leancloud 控制台数据问题，于是赶紧换回去，结果一样。然后想了下最近也没有修改什么 valine 的东西，但还是去 github 看了下历史版本，发现正常的时候也就改了个样式。这就把我难到了，到底是那里出了问题？突然想到曾经修改过“排序”的内容也就只有评论置顶了，于是去注释掉相关代码后，一切恢复正常。

Ps.

这个就是典型的能用就行导致的代码逻辑不规范，至于之前为什么生效就不再去考究了，计划近期重写 valine 评论置顶。