https://blog.foamzou.com/tags/emoji/ Recent content in Emoji on Foam 的博客 Hugo zh-cn Sat, 20 Nov 2021 16:28:50 +0800 https://blog.foamzou.com/posts/wordpress-emoji-s-w-org/ Sat, 20 Nov 2021 16:28:50 +0800 https://blog.foamzou.com/posts/wordpress-emoji-s-w-org/ <h2 id="怎么可以这么慢">怎么可以这么慢</h2> <p>今天给我的博客加了 CDN ，绝大部分文件都很快被加载。唯独有一片 emoji 文件列表响应在 400+ ms，怎么能忍。</p> <p><img loading="lazy" src="https://blog.foamzou.com/posts/wordpress-emoji-s-w-org/image-1.png"></p> <h2 id="官方的-emoji-built-in-方案成了负担">官方的 emoji built-in 方案成了负担</h2> <p>貌似从 4.2 版本开始，WordPress 官方提供 emoji 的自支持方案。详细可查看 《<a href="https://facetwp.com/wordpress-4-2-emoji-performance/">WordPress 4.2 Emoji Performance</a>》，这篇文章分析了官方方案的原理和弊端。</p> <p>WordPress 的 js 脚本会把 html 中的 emoji code 替换成 WordPress 站点的 emoji 图片。目的应该是为了让那些尚不支持 emoji 的网站能够正常展示 emoji。</p> <p>就我看来，这更多是自作多情了，毕竟现代浏览器还有多少是不支持 emoji 的？另外，这个方案是一刀切的，不管当前浏览器是否支持 emoji 都自动 fallback 到它的 build-in 方案。</p> <p>这给浏览器带来了额外的网络请求，增大了网页的加载速率。在一些无法很好访问 s.w.org 站点的地区，更是直接被暴击。</p> <p>不清楚 WordPress 后面的版本是否有做优化，anyway，让我们来干掉它吧。</p> <h2 id="解决方案">解决方案</h2> <h3 id="方案一直接禁用推荐">方案一：直接禁用（推荐）</h3> <p>本博客采用了这个方案，因为我不需要照顾 不支持 emoji 的浏览器用户。</p> <p>下载这个插件（<a href="https://wordpress.org/plugins/disable-emojis/">disable-emojis</a>）, 上传到 <code>/wp-content/plugins/</code> 目录下，解压。到你的 plugin 管理后台，启用它即可。</p> <p>世界瞬间清爽了，浏览器直接渲染 emoji ，再也不需要另外去请求网络获取图片文件。</p> <h3 id="方案二替换为本地文件">方案二：替换为本地文件</h3> <p>如果你的站点希望照顾到 不支持 emoji 的浏览器。</p>