只需三种手段，将传统的网站的性能提高 24%

对于技术人来说，操控性强化是两个世世代代维持不变的热门话题。而随着架构、词汇、库等辅助工具的不断重构，现代的强化方式与否仍然适用于？在技术创新的自然环境下，又有什么样极为死路的强化方式？在责任编辑中，翻译者将以两年前的中文网站为试验第一类，试著了新一代的四种方式，有效地将中文网站操控性提高了 24%，接下去，他们将一探到底。

翻译者 | SwissGreg

翻译者 | 弯月，白眉林 | 屠敏

公司出品 | CSDN（ID：CSDNnews）

下列为原文：

本周一，他们提高了两年从前构筑的两个中文网站的操控性。

他们的这个中文网站是为比利时的应用软件开发者提供更多的求职者互联网平台，该中文网站的操控性非常重要，原因有如下表所示两个：

较好的采用者新体验：既主要包括中文网站的读取天数（以及与采用者可视化天数），也主要包括采用该中文网站时的方便快捷感。

SEO：在非常大某种程度上，他们的互联网流量倚赖Google搜寻，而且不可否认Google更为偏重操控性出色的中文网站（Google甚至在搜寻控制面板中显示了速率调查报告）。

如果你在网路上搜寻“中文网站操控性基础”，就会发现许多小基本功，比如：

采用CDN（文本交货互联网）提供更多能够内存一段天数的动态文档。

强化影像体积和文档格式。

采用GZIP或Brotli填充。

增加TumkurJS和CSS标识符的大小不一。

他们实现了许多难达成一致的目标。

另外，由于他们的主页基本上是两个可过滤的列表（用React编写），所以他们引入了react-window，可以一次只渲染10个列表项（而不是250个）。

上述基本功帮助他们极大地提高了操控性，然而在查看了速率调查报告后，感觉他们还有进步的空间。

因此，他们开始研究更多不寻常的方式来提高中文网站的速率，最终他们取得了巨大的成功！这是本周的调查报告：

这份调查报告显示，中文网站的整体读取天数增加了24%！

那么，为了取得这样的成果，他们到底做了什么样努力呢？

1. 针对JSON数据采用rel =”preload”

index.html文档中加入的这一行标识符可以指示浏览器：在JavaScript调用AJAX/fetch请求JSON数

本来他们可以早点实现这个基本功，但是Chrome浏览器中曾经有一些问题导致重复下载。不过如今看来已经改好了。

2. 在服务器端实现超级简单的内存

值得一提的是/api/jobs端点是两个简单的getAll端点，因此没有改进的余地。

但是，他们决定更进一步，通过两个JS变量简单地构筑自己的内存。如下表所示所示：

此处唯一没有列出的是POST /jobs端点，它会删除内存（cachedJobs =undefined）。

如此简单的一段标识符，就削减掉了0.4秒的读取天数！

3. 削减CSS和JS包的大小不一

最后他们查看了网页需要读取的CSS和JS包的大小不一。他们注意到”font-awesome”这个包的大小不一超过了70kb。

然而，他们仅采用了其中大约20%的图标。

他们是如何处理的？他们通过icomoon.io选择了需要采用的图标，并创建了自定义的精简图标包。

因此，节省了50kb！

以上四种不寻常的基本功帮助他们将中文网站的读取天数缩短了24%。甚至有调查报告显示，中文网站的读取天数降低了43％（降低至1-2秒）。

目前他们对这些提高感到非常满意。但是，他们相信他们可以做得更好！

如果你知道其他不寻常的基本功可以提供更多帮助，那么敬请在下方的评论中留言！

原文

：

【End】