1.引言

    最近，本着试试的想法，想着找一个前端方面的工作，遇到一些招聘软件或者网站上面有一栏是个人博客网站链接。想着自己虽然在CSDN有20w的访问量，但是还是没有自己的博客网站，虽然之前是有的，但是由于自己更换主题搞崩了。现在趁着寒假决定重新搭一下，恰好之前看见了一个比较好的博客主题，决心用一用，在使用的过程中由于主题使用的CDN主要是德国开始扩展的，导致插件的使用给网站的响应速度带来了极大的负担。作为一个杠精，决定用自己微不足道的前端性能优化方式来缩短网页的响应速度。于是，下面的故事就发生了。

2.认清现实

    wordpress在下载好官方的建站源码安装完成之后，由于开始的配置都被初始化到数据库里面了，如果想要直接修改数据库的方式快速修改配置是不太现实的，可能某处的配置更改了，其他的地方会报错。企图直接修改数据库实现页面的效果更改实在是太憨了，这可不是个好习惯，而且Navicat，不支持crtl+Z。于是决定直接抛弃原来的wordpress数据库，虽然里面有很多文章，但是对我而言到时无所谓的，我CSDN里面有着大量的文章，并且wordpress和CSDN都是用的Markdown语法，直接复制粘贴很快的。
    于是，我便通过一些方式白嫖到了Sakura主题插件，了解了主题的安装方式：直接复制到wp-content/themes/目录下，然后在wordpress的管理端启用主题插件。结果一看，网页打开时间高达几十秒，站在用户的角度来说这是非常不爽的。我是用浏览器网络调试发现明显是调用了CDN资源，然后我使用域名查询地址的方式访问了一下域名，发现最快的地方竟然是在德国，由于国内网络访问外网十分不稳定，通常会出现一下资源能够访问网页加载快，一会儿又加载慢的情况。为了提高博客站点的稳定性，我决定将里面的CDN资源本地化。没想到的是简单的几个字确花费了我一周的零碎时间。

3.使用的本地化方法

    虽然自己的方法可能有一些愚钝，但还是分享给大家：
（1）文件定位：利用idea快速定位文件，为什么不使用电脑的查询呢？电脑查询往往扫描了半天还是看不到文件，使用idea更快，更何况我的盗版系统的文件扫描相关的服务损坏了，根本用不了。打开idea一看，需要注册码，最后久经波折，找到了这个有效的激活链接：idea激活码，当然后来发现直接使用服务器中宝塔面板的文件检索也是可以的；
（2）文件内部搜索：idea是不具备文件内部搜索的，只能点击文件内部搜索，而且每次搜索跳转文件之后需要重新搜索，直接使用宝塔面板内嵌的生产环境代码查看方式也是如此。vscode则能够文件跳转默认再次扫描文件查询，这样能够提高文件的搜索速度。于是我想出了借鉴之前uniapp开发时候使用Hbuilder调试，vscode编辑代码的方式。在本地克隆一份相同的代码，然后利用vscode搜索国外的cdn域名，找到了具体的文件之后，下载对应文件到本地，如果没有下载下来那就翻墙下载。然后经过漫长的操作资源就下载下来了，由于采用的是发现一个修改一次路径的方式，一开始也没有注意到用的是php脚本语言，php在网页中非常灵活，很多资源定位错误了，不过不要紧，404了就找到文件的位置看看其他本地资源的引入方式，其实就是使用了get_template_directory_uri()这个函数直接获取到主题的根目录，然后拼接上本地资源，这样能够保证插件的可移植性，不然的话如果使用的是网络请求，存在两个缺点不能够很好的利用索引提高文件查找速度，另一方便主题插件难以扩充，当然还存在如果主题被第三方使用，那么无端给自己的服务器带来的静态资源请求负担。经过vscode搜索，生产环境修改代码、调试，终于将所有的cdn资源本地化完成了。

4.分享自己走的一些弯路

    由于一开始没有提高对js压缩文件的重视程度，导致忽略了很多静态资源的本地化，甚至由于请求的资源里面出现了404报错，明明可以看到cdn链接，但是一致找不到位置，情急之下通过JS格式化工具来格式化代码，找到了函数的调用位置（本来如果有.map映射文件的话还比较好找到位置，但是插件里面是不具有的，另外如使用格式化，需要提前备份好已经压缩的文件，压缩文件->格式化->压缩会出问题的，而二者逻辑不一样，格式化方便查阅代码，压缩会存在代码混淆，变量简化成单个字母等）。找到之后直接使用类似于抓包工具一样通过检索请求的链接，直接强制拦截并本地请求化，比如请求资源为：https://cdn.nightowl.top，通过indexof查找cdn判断链接是否使用远程cdn，如果使用那么将请求链接改成https://blogs.nightowl.top/wp-content/themes/Sakura/…，后来才发现这种思路可行但是没有必要，主要还是找漏了。
    还有一个就是遇到了大量的请求字体图标的情况，下面贴一张图可能更加形象：

    如果还是手动修改的话（下载文件，修改引用方式），是不是很沙雕。我第一次遇到的时候跳过了，后来由于请求线路不稳定，部分字体资源可能达到一秒或几秒，最后决定还是本地化一下，反复操作了几次之后觉得不对劲。采用的解决方式如下（仔细观察可以发现字体文件就是最后几位不一样，利用这个特点可以再用上node.js的文件读写功能快速操作）：

    由于js大量读写或者网络问题，后来发现还是有几个没有引入好，这个时候再来手动修改，工作量明显小了很多。

5.硬刚404的余波

    网站404后来成为影响响应速度最大的因素，一旦404网页的加载会延时一段时间，导致加载时间非常大。这里以主题插件内部的inc/switcher.php为例，通过分析发现本来是请求网页背景图资源，但是由于https://api.mashiro.top/bing/链接请求背景图方式错误（个人猜测），于是在代码内部逻辑中强制替换了该链接，改成使用本地资源，然后随手P了一个背景图上去。
    点击个人头像bug，虽说不是404但是直接跳转到了一个空页面，理论上应该是跳转到个人资料的详情页。解决思路是利用好内部的提示弹出框插件，使用a标签拦截的方式（绑定点击事件，return false）给出提示友好处理一波。

6.额外的收获

    由于个人资料的跳转，当时觉得是测试的用户没有成为我的博客网站的注册用户导致的，于是注册了一个用户，但是注册之后需要发送一个邮件到指定的创建用户时使用的邮箱。通过查阅资料，找到了这篇文章：WP Mail SMTP邮件配置教程，不巧的是我这边使用的是网易邮箱，其实也差不多，使用smtp.163.com，然后在网易邮箱开启pop3/smtp以获取授权码，里面说的比较模糊的是邮箱：SMTP Username其实就是你使用的邮箱。另外的话如果wordpress 提示无法下载插件的话，需要进行如下的几部操作：

（1）配置ftp相关的全局变量（参照实例配置就行）：

define('FTP_BASE', '/www/wwwroot/blogs.nightowl.top/personal-blog-site/');
define('FTP_CONTENT_DIR', '/www/wwwroot/blogs.nightowl.top/personal-blog-site/wp-content');
define('FTP_PLUGIN_DIR', '/www/wwwroot/blogs.nightowl.top/personal-blog-site/wp-content/plugins/');
define('FTP_THEMES_DIR', '/www/wwwroot/blogs.nightowl.top/personal-blog-site/wp-content/themes/');
define('FS_METHOD', 'direct');

（2）将wp-content的所有者改成www，不要直接777权限过高不安全：