web页面uri唤醒应用_Web设计中数据URI的内容，原因和方式

最新推荐文章于 2022-11-16 10:04:56 发布

daique1908

最新推荐文章于 2022-11-16 10:04:56 发布

阅读量4k

点赞数

文章标签： python java js css 人工智能 ViewUI

web页面uri唤醒应用

让我们看一下通过减少发出的HTTP请求的数量来提高网站的性能。我们将利用一种称为数据URI方案的技术；将图像和字体都编码为纯数据字符串，可以直接集成到您的标记和样式表中。

缩略图： Visual Idiot制作的Broccolidryiconsaniconsetitisfullof…图标（我们将在一分钟内使用这些图标。）

随着Internet连接的速度越来越快，计算机功能越来越强大，网站性能通常是一种经常被忽视的最佳实践。如今，确保您的网站运行良好对确保用户和搜索引擎的满意度至关重要。尤其是在使用移动数据以及电量不足的电话和其他设备访问网站时。

数据URI的内容，原因和方式

在Webdesigntuts +之前，我们已经看过CSS Sprite Sheets：最佳实践，工具和有用的应用程序，演示了如何通过减少HTTP请求和减小整体图像文件大小来提高性能。但是您知道吗，您可以仅使用ASCII文本字符串在HTML或CSS中表示图像（实际上是任何二进制数据）？

该技术被称为数据URI方案，实际上并不是新技术。尽管数据URI已有十多年的发展历史，但它们只是在最近才获得广泛使用，它具有广泛的浏览器兼容性并致力于提高站点性能。

使用数据URI有什么好处？

使用数据URI的主要好处是提高了性能。您的浏览器会使用HTTP请求获取您网站中使用的所有资源。这包括从样式表到JavaScript文件再到图像的所有内容。无论Internet连接的速度如何，几乎所有浏览器都将一次并发HTTP请求的最大数量限制为一次最多两个，从而实际上导致了数据瓶颈。需要发出的HTTP请求越多，站点的整体性能就越差。

将图像数据合并到站点HTML或CSS中后，立即消除了浏览器获取其他资源的需要。尽管通常认为原始的Base64编码数据比经过优化的对应数据（例如，图像）大33％，但是在进行gzip和CSS文件优化之后，文件大小的差异通常可以忽略不计。

数据URI看起来像什么？

数据URI本质上是编码为Base64格式的二进制数据，以及针对浏览器的一些其他信息，包括MIME类型，字符集和编码格式（Base64）。

数据URI（以最简单的形式）如下所示：

data:[][;charset=][;base64],

要将数据URI用作嵌入式HTML图像，格式应如下所示：

<img src="https://img-blog.csdnimg.cn/2022010708582376181.png" alt="My Image" width="32" height="32" />

要将数据URI用作CSS中的重复背景图像，格式如下：

body {
    background-image:url('data:image/png;base64,');
    background-repeat: repeat;
}

或者，将背景元素与CSS速记结合起来：

div.logo {
    background:url('data:image/png;base64,')
    no-repeat
    top left;
    margin:20px 10px 0 10px;
}

尽管我们使用图像来说明数据URI的用法，但几乎可以使用任何媒体，包括多媒体文件，字体（我们将很快看到）以及更多内容。

如何使用数据URI

好的，让我们通过几个示例开始实践。让我们拍下一张图像（我从Subtle Patterns下载的重复拼贴），将其转换为Data URI，并使用CSS为网站或界面创建重复背景。

尽管数据URI看起来很时髦，但是创建一个的过程非常简单。

首先，转到Web语义数据URI转换器，然后通过选择图像的文件位置并单击“转换图像”工具来上传图像：

处理后，如果向下滚动页面，您将看到此图像看起来像是base64编码的：

由于我们需要一个重复的项目背景，因此我们需要修改该工具提供给我们CSS。

对于重复的背景，请复制并粘贴以下CSS：

div.logo {
background-repeat: repeat;
background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlCNDA1N0EyRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlCNDA1N0EzRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUI0MDU3QTBGQ0RDMTFFMTk0QTI4RjU0QUUzOUQzNUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUI0MDU3QTFGQ0RDMTFFMTk0QTI4RjU0QUUzOUQzNUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEB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);
}

让我们举一个更简单的示例，将以下图像转换为Data URI并将其作为内嵌图像放入我们的标记中：

只需按照上述步骤将图像转换为base64编码图像，然后复制该工具生成HTML标记（从“作为图像”面板中），然后以与插入时相同的方式将其直接粘贴到HTML标记中常规的嵌入式图片。

此示例的最终代码如下所示：

<img width="110" height="58" title="" alt="" src="https://img-blog.csdnimg.cn/2022010708582481337.jpeg" />

何时使用数据URI（以及何时避免使用）

关于何时使用数据URI替换站点资产的确实没有硬性规定，但是在选择是否使用数据URI时要考虑许多缺点和特殊性。

如果您打算支持
数据URI不会被浏览器缓存，因此即使已被浏览器呈现，它们也需要在每个页面上下载。
数据URI最适合小型资源，但是它们可用于较大的资源（例如照片），而不会造成任何重大的性能损失（压缩后，它们比原始文件大2-3％）。但是请注意，在下载整个资产之前，站点用户将看不到任何东西 ，这对于移动用户或Internet连接速度慢的用户可能是不希望的。
数据URI使CSS和HTML文档看起来非常混乱。对于大型站点和广泛的数据URI利用，样式表和标记变得更加难以阅读，导航和维护。
每次更改资产（例如Spritesheet）时，都需要重新编码图像文件，从而在工作流程中添加更多步骤。

Base64编码的图标字体

您还记得我说过任何二进制数据都可以在数据URI方案中使用吗？现在，我们已经研究了base64编码的图像，现在让我们看一下将图标字体转换为数据URI并在项目中实现它。

实际上，数据URI非常适合图标字体，特别是如果您仅打算使用一些符号且文件大小较小的字体。

我们将使用在线Web应用程序IcoMoon生成自定义字体集，输出数据URI并生成最终CSS代码。

首先，转到IcoMoon网站，然后单击“开始使用应用程序”链接：

接下来，浏览字体集以选择您的自定义图标字体，或者使用页面左上方的搜索字段查找与标签“注释”，“心脏”，“眼睛”和“搜索”匹配的字体。

在此示例中，我使用了Visual Idiot的Broccolidry字体集。

接下来，通过点击屏幕底部的“字体”按钮进入下载设置页面：

在下载设置页面上，将基准更改为10％，单击设置图标以显示高级选项，然后选中“ Base64编码和嵌入CSS”复选框。点击“保存”图标下载字体。

下载并提取了自定义字体后，您可以打开“ index.html”文件以查看字体及其unicode配对：

Index.html allows you to view your font pairings

使用自定义图标字体

现在我们已经创建了自定义图标字体集，让我们看看如何在项目中使用它。

首先，打开IcoMoon下载中提供的样式表，然后找到以下CSS。由于游戏的名称是关于减少HTTP请求的，因此我们将复制所有提供CSS并将其粘贴到我们自己的主样式表中。

<pre>@font-face {
    font-family: 'customFont';
    src: url(data:font/svg;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM+Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA+Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMyLDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwxMy40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAxMTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM+PC9zdmc+) format('svg'),
         url(data:font/ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

这几行CSS现在将使您的自定义图标字体可以在所有现代浏览器上使用。如果要支持IE9兼容模式和IE的旧版本，则需要添加一条附加规则（请注意，这将获取附加资源，但仅在用户代理请求时）。

@font-face {
  font-family: 'customFont';
<!-- IE9 Compatibility Mode -->
  src: url('../fonts/customFont.eot');
<!-- Old IE Fix -->
    src: url('../fonts/customFont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;

对这些IE修补程序感到好奇吗？ Paul Irish在防弹@ font-face语法上有一篇很棒的博客文章。

既然已经创建了规则，我们可以通过两种方式在设计中包括自定义字体，这两种方式都使用Unicode实体来引用相关的图标。 IcoMoon应用程序的优点在于，已经为我们生成了所有CSS，并可以将它们复制到我们的主样式表中，具体取决于我们决定使用哪种方法（或同时使用这两种方法）。

使用图标字体：数据图标方法

使用图标字体的第一种技术是数据图标方法，该方法使我们的标记保持美观和整洁，并且对屏幕阅读器友好。

假设我们要在页面的span元素内包含注释图标（在这种情况下，unicode值为&#x22; ）。

我们HTML：

<span data-icon="&#x22;" aria-hidden="true"></span>
<!-- the aria-hidden attribute prevents screenreaders from trying to read the unicode -->

相关CSS（直接从下载的IcoMoon样式表中获取）如下（注释是我的）。

/* A :before pseudo element is created for any HTML element with the data-icon attribute */
[data-icon]:before {

/* Font family is set the name set in our @font-face rule */
font-family: 'customFont';

/* The content for the pseudo element is fetched from the HTML data-icon (e.g. &#x22;) */
content: attr(data-icon);

/* Additional instructions to screen readers (not universally recognised) */
speak: none;

/* Univeral font styling */
font-weight: normal;
-webkit-font-smoothing: antialiased;
}

span {
/* Specific font-styling */
font-size: 2em;
color: #A2A2A2;
padding:2px 5px 2px 5px;
margin-right:5px;
}

尽管这种方法很好用且经过简化，并且避免了标记中的额外类膨胀，但对于可维护代码而言，它可能不是最佳选择。除非您对Unicode字符的记忆既是百科全书的还是图片的，否则这种方法不会在HTML中包含任何提示您将显示哪个图标的信息。

使用图标字体：附加的类方法

作为一种替代方法，您可以选择在HTML中使用其他CSS类来显示图标。这具有将语义，描述性信息直接输入到标记中的好处，从而增强了代码的可读性。

要使用这种方法，请在HTML中添加带有IcoMoon样式表提供的类名称的元素：

<span class="icon-comment"></span>

我们CSS看起来像这样（评论是我的）。

/* The rule will be applied to any HTML element with a class of 'icon-*l and sets a pseudo-element to the element */
[class^="icon-"]:before, [class*=" icon-"]:before {

/* Font family is set the name set in our @font-face rule */
font-family: 'custom';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}

.icon-comment:before {

/* The content for the pseudo element is set in escaped unicode (i.e. &#x22; becomes '/22' ) */
content: "\22";
}

现在，只需增加一些样式，您就可以轻松地在下一个项目中实现美观的图标字体-无需使资产树陷入其他资源的泥潭。

结论

感谢您抽出宝贵的时间来探索一些可以充分利用下一个项目的数据URI的方法。

重要的是要记住，数据URI并不总是最好的解决方案。尽管使用CSS3，SVG和图标字体比使用图像具有一些非常引人注目的好处（尤其是在响应式设计领域），但在base64中编码图像的好处却更加细微。在考虑是否在下一个项目中使用数据URI时，要权衡加载时间和减少HTTP请求以及代码的可维护性-只需将数据URI作为工具箱中的另一个工具即可！

您是否喜欢本教程，现在正渴望以更实际的方式开始使用这些技术？请尽快关注新的优质内容，我们将广泛使用数据URI来创建轻量级的用户界面设计。关注此空间！

您如何在项目中使用图标字体和数据URI？订阅并发表评论！

翻译自: https://webdesign.tutsplus.com/articles/the-what-why-and-how-of-data-uris-in-web-design--webdesign-8648

web页面uri唤醒应用

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web页面uri唤醒应用_Web设计中数据URI的内容，原因和方式

让我们看一下通过减少发出的HTTP请求的数量来提高网站的性能。我们将利用一种称为数据URI方案的技术；将图像和字体都编码为纯数据字符串，可以直接集成到您的标记和样式表中。缩略图： Visual Idiot制作的Broccolidryiconsaniconsetitisfullof…图标（我们将在一分钟内使用这些图标。）随着Internet连接变得越来越快，计算机功能越来...
复制链接

扫一扫