性能文章>文本内容的加载性能>

文本内容的加载性能转载

6月前
228601

文本:字母和数字、单词和短语、句子和段落。 这是我们在网页中传达大部分含义的方式。 文本内容向我们的读者(不仅仅是“访问者”)告知、描述、解释概念和程序。 它是网络通信的基础。

网络上的文本内容总是有一些结构——即使只是自上而下,还有一些格式——即使只是默认情况下。 它还可以响应读者的行为或作者的意图而表现出行为、移动或变化、出现或消失。 但就其本身而言,文本内容本身不具备这些品质和能力。 它的结构、外观和行为由其他基于文本的资源实现和影响,如: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 工具:

当然,您在编写时确实(或将要)使用框架、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 上进行了测试——有趣的是,它似乎没有被压缩。

GIDNetwork

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 的相同功能的。

虽然像图像这样的大型项目往往会引起很多提高速度的关注,但文本资源——无疑是大多数网站的主要内容——经常被忽视。 在寻找加快页面速度的方法时,不要忽略基于文本的组件,包括可见的和幕后的组件。

点赞收藏
分类:标签:
风之石
请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

【全网首发】抛砖系列之前端性能分析工具

【全网首发】抛砖系列之前端性能分析工具

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(3)——性能监控

从零开始搞监控系统(3)——性能监控

Sentry 错误监控实战

Sentry 错误监控实战

前端构建效率优化之路

前端构建效率优化之路

1
0