文本内容的加载性能转载
文本：字母和数字、单词和短语、句子和段落。 这是我们在网页中传达大部分含义的方式。 文本内容向我们的读者（不仅仅是“访问者”）告知、描述、解释概念和程序。 它是网络通信的基础。
网络上的文本内容总是有一些结构——即使只是自上而下，还有一些格式——即使只是默认情况下。 它还可以响应读者的行为或作者的意图而表现出行为、移动或变化、出现或消失。 但就其本身而言，文本内容本身不具备这些品质和能力。 它的结构、外观和行为由其他基于文本的资源实现和影响，如：HTML、CSS 和 JavaScript 代码。
在网页中，内容、结构、格式和行为的每个字符都必须从服务器获取并下载到浏览器，这是一项非常重要的任务。 在本节中，我们将介绍一些加快文本内容加载速度的有效方法。
将开发与部署分离
当您减少文本资源的大小并采取其他影响其可读性的操作时，请务必记住，一旦修改了一大块代码以进行部署，您通常无法再阅读它，更不用说维护了。 最好始终将开发文件和部署文件分开，以避免将开发文件替换为部署版本。 然而，如果这类事情确实意外发生，通过类似代码美化器或“unminifier”（例如，http://unminify.com/）等工具可能会节省一些时间。
最小化你的代码
一种简单有效的方法是minification，它本质上是通过删除其空白和不必要的字符来压缩文本资源，而不改变其有效性或功能。 听起来没那么有用，但确实有用。 例如，这个小函数（表格排序脚本的一部分）最初包含 348 个字符。
function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
var tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
ts_makeSortable(thisTbl);
}
}
}
Minification 之后，代码形如以下，只包含 257 个字符。
function sortables_init(){if(!document.getElementsByTagName)return;var tbls=document.
getElementsByTagName("table");for(ti=0;ti<tbls.length;ti++){thisTbl=tbls[ti];
if(((''+thisTbl.className+'').indexOf("sortable")!=-1)&&(thisTbl.id)){ts_makeSortable(thisTbl)}}}
当然，现在它的可阅读性已经大大降低，但浏览器仍可识别。 大小和所需下载时间减少了 26%；这非常重要，即使是对于这个小样本而言。
纵观全局，该片段来自的完整脚本超过 10k，但在缩小后降至 5,411 个字符，减少了 48% 之多。
HTML 和 CSS 可以以相同的方式缩小，这样您就可以缩短与格式和行为相关的代码的加载时间。
许多（许多！）在线和桌面 minification 工具可用；Kangax HTML Minifier 是最受欢迎和强烈推荐的在线工具之一，因为它的寿命和稳定性很高，它为缩小的代码提供了广泛的输出自定义选项。
还有一些其他的 minification 工具:
- Minifier: 在线工具通过复制和粘贴来缩小 JavaScript 或 CSS。
- HTML Minifier: 此在线工具还处理 HTML，并自动识别代码类型。
- Node module for Grunt: 一个集成到 Grunt 工作流中的 NPM 缩小包。
- Node module for Gulp: 一个集成到 Gulp 工作流中的 NPM 缩小包。
- Node module for HTML Minifier: 一个 NPM 包，其中包含一个有用的图表，将其压缩结果与其他方法进行比较。
框架
当然，您在编写时确实（或将要）使用框架、IDE 或其他结构化环境的可能性很大，而不是一次将一个文件复制/粘贴到 Web 应用程序中。 大多数现代系统都有内置设施，用于在构建过程中将开发文件与部署分开，并且能够在此过程中执行各种转换，例如 minification。
例如，包含 HTML minification 的 Gulp 开发到部署任务可能如下所示。
var gulp = require('gulp');
var htmlmin = require('gulp-html-minifier');
gulp.task('minify', function() {
gulp.src('./src/*.html') //development location
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist')) //deployment location
});
该任务的执行命令：
gulp minify
(来源: npmjs)
请注意，该任务通过管道将 HTML 文件从其原始位置传送到部署位置，并在构建期间将它们最小化。 这不仅可以防止对源文件进行潜在的不可逆修改，还可以避免在以后的开发和测试过程中污染生产环境。
压缩文本资源
到目前为止，我们已经讨论了单个图像和文本文件的压缩。 但是，如果我们能让服务器也自动压缩整个文件集也会很有帮助，这就是 Gzip 的用武之地。
Gzip 是一种用于压缩和解压缩文件的应用程序（及其文件格式）。 与单文件压缩一样，它通过减小资源大小来减少传递服务器响应所需的时间。 它可以通过 GNU 项目站点获得。
https://www.gnu.org/software/gzip/
Gzip 在文本资源上表现最好，并且可以定期实现高达 70% 的压缩（对于大文件甚至更高）。 但是，对已经单独压缩的非文本资源（例如图像）进行 Gzip 压缩通常不会显着减小大小。
与桌面或基于浏览器的本地压缩不同，Gzip 在服务器上工作以识别和处理您指定的某些文件类型。 虽然所有现代浏览器都支持 HTTP 请求的 Gzip 压缩，但您必须正确配置服务器以在请求时交付压缩资源。 当然，不同的服务器类型有不同的设置要求。 例如，您可以通过 .htaccess 文件配置 Apache 服务器，该文件将包含类似的内容。
<IfModule deflate_module>
# Enable compression for the following file types
AddOutputFilterByType \
DEFLATE \
application/javascript \
text/css \
text/html \
text/javascript \
text/plain \
text/xml
</IfModule>BetterExplained 有一篇非常好的关于 Gzip 压缩的文章，包括背景信息、示例和注意事项。
那么，在你的服务器上启用了 GZip，你怎么知道它是否真的在提供压缩文件呢？ 一个简单的查找方法是在 GIDNetwork 的 Gzip 测试站点上进行检查。
http://www.gidnetwork.com/tools/gzip-test.php
该报告包括有关站点压缩的一般信息、一个有趣的“假设”图表，显示站点在各种 Gzip 压缩级别下将获得多少压缩，以及响应标头和页面源。
在这里，我们在 GIDNetwork 自己的根 URL 上进行了测试——有趣的是，它似乎没有被压缩。
Gzip 可以进一步压缩已经压缩的文件，这是一种有效的方法。 事实上，要获得基于文本的资源的最大压缩率，首先在部署之前将它们单独缩小，然后在交付时通过支持 Gzip 的服务器对其进行压缩。
减少类库的试用
流行的 CSS 和 JavaScript 库尽最大努力缩小和压缩下载文件，但通常它们仍然是非常严重的带宽消耗者。 例如，jQuery——取决于版本和应用的压缩算法——可能从 28k 到超过 250k。 如果您需要给定库的大部分功能，那很好； 但是如果你只需要一两个特定的东西，你可以通过用一次性函数或 CSS 规则替换那些特性来节省大量的下载时间。
例如，一个网站可能会使用 jQuery 方便的 toggleClass 功能来翻转类以执行特定的操作。
$(el).toggleClass(className);
是的，它工作得很好，而且很容易编码，但是 jQuery 为一种效果带来了很多下载开销。 您可能会考虑将那个庞大的库换成一个更小的单一用途函数（来源：You Might Not Need jQuer）。
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
else
classes.push(className);
el.className = classes.join(' ');
}
关键是，如果您不需要整个 250k 库，请不要下载它。 相反，找到并使用只做您需要的小型、单一用途的例程。 （别忘了缩小它们！）
您可以在 You Might Not Need jQuery 中找到许多有趣且中肯的 jQuery 代码替代方案，它探讨了现代 Web 是如何发展到提供许多我们以前可能使用 jQuery 的相同功能的。
小结
虽然像图像这样的大型项目往往会引起很多提高速度的关注，但文本资源——无疑是大多数网站的主要内容——经常被忽视。 在寻找加快页面速度的方法时，不要忽略基于文本的组件，包括可见的和幕后的组件。
