欢迎回到我们关于构建更快网页的系列。上一篇文章讨论了仅通过图像压缩来实现此目标的方法。此示例以1.2MB的“浏览器容量”开始，然后缩小到488.9KB。但这还不够快！于是本文继续向浏览器“减肥”。在此过程中，您可能会认为我们正在做的事情有点疯狂，但一旦完成，您就会明白为什么。准备工作本文又从网页分析入手。使用Firefox的内置屏幕截图功能对整个页面进行屏幕截图。您还需要使用sudo安装Inkscape：$sudodnfinstallinkscape如果您想学习如何使用Inkscape，FedoraMagazine中有几篇现成的文章。本文将只介绍一些基本的SVG优化方法，供web使用。分析我们以getfedora.org的网页为例。Getfedora的页面，图片标注的地方这个分析最好用图形化的方式来做，这就是为什么先从截图开始的原因。上面的屏幕截图标记了页面中的所有图形元素。Fedora网站团队已经为两种情况更换了图像（可能是四种，这样更好）。社交媒体图标变成字体字形，语言选择器变成SVG。我们有几个替代方案：CSS3字体SVGHTML5CanvasHTML5Canvas简单地说，HTML5Canvas是一种HTML元素，允许您借助脚本语言（通常是JavaScript）在其上绘制，尽管它尚未被广泛使用。因为它可以使用脚本语言绘制，所以这个元素也可以用于动画。下面是一些使用HTMLCanvas实现的示例，例如三角形图案、动态波浪和字体动画。不过，在这种情况下，这似乎也不是最佳选择。CSS3使用级联样式表，您可以绘制形状，甚至可以为它们制作动画。CSS通常用于绘制按钮等元素。然而，使用CSS绘制的更复杂的图形通常只能在技术演示页面中看到。这是因为使用视觉制作图形仍然比使用代码更快。另一种使用字体的方法是用字体来装饰网页，Fontawesome在这方面非常受欢迎。例如，在此示例中，您可以使用字体替换“Flavor”和“Spin”图标。这种方法有一个缺点，但它很容易修复，我们将在本系列的下一部分中介绍它。SVG是一种已经存在很长时间的图形格式，并且一直在浏览器中使用。很长一段时间以来，并非所有浏览器都支持它，但这已经成为历史。因此，本例中替换图形的最佳方法是使用SVG。为Web优化SVG为Internet使用优化SVG需要几个步骤。SVG是一种XML方言。它使用节点来描述组件，例如圆形、矩形或文本路径。每个节点都是一个XML元素。为了保持代码整洁，SVG应包含尽可能少的元素。我们选择的SVG实例是一个带有咖啡杯的圆形图标。您可以通过三个选项在SVG中描述它。一个带有咖啡杯的圆形元素stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markersfillstroke"id="path36"cx="68.414307"cy="130.71523"r="3.7620001"/>上面有咖啡杯的圆形路径单一条路你应该可以看到代码越来越复杂，需要更多的字符来描述它当然，在文件包含更多的字符会导致更大的尺寸。节点清理如果您在Inkscape中打开实例SVG并按F2，节点工具将被激活。您应该看到类似这样的内容：Inkscape-激活节点工具这有五个不必要的节点在例子中——线中间的那些。要删除它们，可以在节点工具处于活动状态的情况下将它们一一选中并按Del键。然后，选择线的定义节点，然后使用工具工具栏将它们重新制作成角。Inkscape-将节点变成角的工具。如果我们不这样做修复这些角落，我们还有办法定义这条曲线，它会被保存，这会增加文件大小......你可以手动清理这些节点，因为它不能自动有效地完成。现在，您已准备好进入下一阶段。使用“另存为”功能，并选择“优化的SVG”。这将弹出一个窗口，在那里你可以选择要删除或保留哪些组件。Inkscape-“另存为”“优化的SVG”虽然这个SVG实例很小，但它仍然从3.2KB减少到920字节，不到三分之一1.回到getfedora页面：页面主体部分背景的灰色Voronoi图，经过本系列第一篇优化过程后，从211.12KB减少到164.1KB。Page导出的原始SVG大小为1.9MB。经过这些SVG优化步骤后，它只有500.4KB。太大？那么，蓝色背景的体积现在是564.98KB。SVG和PNG之间只有细微差别。压缩文件$ls-lhinsgesamt928K-rw-r--r--。1个用户user161K19.Feb19:44grey-pattern.png-rw-rw-r--。1个用户user160K18.Feb12:23grey-pattern.png.gz-rw-r--r--。1个用户user489K19.Feb19:43greyscale-pattern-opti.svg-rw-rw-r--。1useruser112K19.Feb19:05greyscale-pattern-opti.svg.gz这是我为可视化这个主题所做的一个小测试的输出。您可能应该看到光栅图形-PNG-已经被压缩并且不能再被压缩。对于SVG，它是一个XML文件。它是一个文本文件，因此可以压缩到原始大小的四分之一以下。所以现在它比PNG小大约50KB。现代浏览器可以本地处理压缩文件。因此，许多Web服务器都启用了mod_deflate(Apache)和gzip(Nginx)模式。这样我们就可以在传输过程中节省空间。您可以在此处查看您的服务器是否启用了它。生产工具首先，没有人愿意每次都使用Inkscape来优化SVG。您可以在没有GUI的情况下从命令行运行Inkscape，但是您找不到将InkscapeSVG转换为优化SVG的选项。可以导出光栅图像。但我们有替代方案：SVGO（看起来开发过程不再活跃）Scour在这种情况下，我们使用scour进行优化。让我们先安装它：$sudodnfinstallscour要自动优化SVG文件，像这样运行scour：[user@localhost]$scourINPUT.svgOUTPUT.svg-p3--create-groups--renderer-workaround--strip-xml-prolog--remove-descriptive-elements--enable-comment-stripping--disable-embed-rasters--no-line-breaks--enable-id-stripping--shorten-ids这是结束第二部分。在这部分中，您应该已经学习了如何用SVG替换光栅图像并优化它以供使用。
