本次预计翻译三篇文章如下:

我为什么要创建这个git仓库?通过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址:https://github.com/yzsunlei/javascript-article-translate

从Chrome 73开始,可以结合link rel = "preload"和响应式图像,来更快地加载图像。

本文使我有机会来讨论我最喜欢的两件事:响应式图像和预加载。作为致力于开发这两块功能的人,我很高兴看到他们一起工作!

响应式概述

假设您正在300像素宽的屏幕上浏览网页,并且该页面请求了一张1500像素宽的图像。该页面就浪费了您大量的网络数据,因为您的屏幕无法使用所有这些额外分辨率进行任何操作。理想情况下,浏览器应该获取图像的一个版本,只是比你的屏幕尺寸稍微宽一些,比如说325个像素。这样可以确保图像高分辨率而又不会浪费网络数据。而且,更好的是,图像将加载得更快。响应式图像使浏览器在不同的设备上能够获取到不同的图像资源。即使不使用图像CDN为每个图像保存多个尺寸,而在srcset属性中指定它们。w值告诉浏览器每个版本的宽度。根据设备,浏览器可以选择适当的一个版本:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

预加载概述

通过预加载,您可以在HTML中发现关键资源之前,告诉浏览器您要尽快加载的关键资源。这对于不容易发现的资源特别有用,例如样式表中包含的字体,背景图像或从脚本加载的资源。

<link rel="preload" as="image" href="important.png">

响应式图像+预加载=更快的图像加载

响应式图像和预加载在过去几年中已经就可用了,但同时缺少一些内容:无法预加载响应式图像。从Chrome 73开始,浏览器可以在srcset发现img标记之前预加载正确的响应式图像版本!

根据您网站的结构,这可能意味着显着加快图像显示速度!我们在使用JavaScript延迟加载响应图像的网站上进行了测试。预加载使图像加载速度加快了1.2秒。

所有现代浏览器均支持响应图像,而预加载图像仅在基于Chromium的浏览器中受支持。

imagesrcsetimagesizes

为了预加载响应式图像,最近向<link>元素添加了新属性:imagesrcsetimagesizes。它们与element中使用<link rel="preload">srcsetand sizes语法一起使用并匹配<img>

例如,如果您要预加载使用以下命令指定的响应图像:

<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

您可以通过将以下内容添加到HTML的<head>中来做到这一点:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

这揭开了使用相同的资源选择逻辑的请求,并应用srcsetsizes的序幕。

使用案例

预加载动态注入的响应式图像

假设您要动态加载人物图像作为幻灯片的一部分,并知道将首先显示哪个图像。在这种情况下,您可能要避免在加载有问题的图像之前等待脚本,因为这会延迟用户看到它的时间。

您可以在具有动态加载的图片库的网站上检查此问题:

  • 1.在新标签页中打开此示例网站。

  • 2.按Control+Shift+J(或Command+Option+J在Mac上)按打开DevTools。

  • 3.单击网络选项卡。

  • 4.在“限制”下拉列表中

  • 5.禁用“禁用缓存”复选框。

  • 6.重新加载页面。

该瀑布流显示图像仅在浏览器完成运行脚本后才开始加载,从而给图像最初显示给用户的时间带来了不必要的延迟。

preload在此处使用帮助是因为图像会提前加载,并且在浏览器需要显示图像时可能已经存在。

该瀑布流表明,第一张图像与脚本同时开始加载,避免了不必要的延迟,从而加快了显示图像的速度。

要查看预加载的区别,您可以按照第一个示例中的步骤检查相同的动态加载的图像库,但预加载了第一张图像。

避免该问题的另一种方法是使用基于标记的轮播,并让浏览器的预加载器选择所需的资源。但是,这种方法可能并不总是实用的。(例如,如果您正在复用现有的不基于标记的组件。)

使用图片集预加载背景图片

如果您针对不同的屏幕分辨率使用不同的背景图像,则可以使用以下image-set语法在CSS中指定它们。然后,浏览器可以根据屏幕的DPR选择显示哪一个。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

上面的语法忽略了以下事实:在基于Chromium和基于WebKit的浏览器中,此功能需要浏览器的前缀。如果您打算使用此功能,则应考虑使用Autoprefixer来自动处理该问题。

CSS背景图片的问题在于,只有在浏览器下载并处理了页面中的所有CSS后,浏览器才会发现它们<head>,这可能是很多CSS…

您可以在带有响应背景图片的示例网站上检查此问题。

在此示例中,直到完全下载CSS后才开始图像下载,从而导致图像显示产生不必要的延迟。

响应式图像预加载提供了一种简单且无漏洞的方法来更快地加载这些图像。

<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">

您可以在预加载的响应式背景图像检查前面的示例的效果。

此处,图像和CSS同时开始下载,避免了延迟并加快了图像的加载速度。

预加载响应图像的实践

在理论上预加载您的响应式图像可以加快它们的速度,但是实际上它有什么作用?

为了回答这个问题,我创建了一个演示PWA商店的两个副本:一个不预加载图像,另一个预加载一些图像。由于该站点使用JavaScript懒加载图像,因此可能会受益于预加载初始视口中的图像。

这给了我以下结果:无预加载和图像预加载。从原始数字来看,我们看到“开始渲染”保持不变,“速度指数”略有改善(273毫秒,因为图像到达速度更快,但并没有占用很大的像素区域),但是真正的指标可以捕捉到差异是最后绘制的主题图像指标,提高了1.2秒。

[技术翻译]预加载响应式图像,从Chrome 73开始实现的更多相关文章

  1. seo网页加速技术,预加载 DNS Prefetching 详解

    seo网页加速技术,预加载 DNS Prefetching 详解 DNS Prefetching 是什么 : DNS 是什么-- Domain Name System,域名系统,作为域名和IP地址相互 ...

  2. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  9. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

随机推荐

  1. ROS Software update

    http://packages.ros.org/ros/ubuntu

  2. Qt widget使用QML自定义导航栏

    具体方法: https://www.cnblogs.com/judes/p/11359243.html qml: import QtQuick 2.0 import QtQuick 2.9 impor ...

  3. Eclipse下代码字体背景变红/变绿/变黄原因

    如下图所示:不知道怎么,在eclipse IDE手抖按了啥,就成这样了. 后来在stackoverflow提问后,找到了原因.eclipse 有测试代码覆盖率的功能,也就是执行Run——>Cov ...

  4. 【 Linux 】Systemd 配置文件说明及编写(2)

    1. 开机启动 对于支持 systemd 的软件,如果想要设置开机启动,就执行如下命令(以 http 为例): systemctl enable httpd 上面的命令相当于在 /etc/system ...

  5. 如何修改WAMPServer默认的网站路径地址

    通常,我们安装WAMPServer集成的PHP开发环境之后,默认的网站路径地址是其安装目录下子文件夹:"wamp/www/".那么我们怎么修改网站地址到自己指定的路径呢?本篇经验将 ...

  6. popup demo

    Django下实现: urls.py: from django.conf.urls import url from django.contrib import admin from app01 imp ...

  7. request.GET、request.POST、request.body(持续更新)

    1.request.GET: print(request.GET) # <QueryDict: {'page' : ['5'], 'id__gt' : ['4']}> print(requ ...

  8. [BJOI2019] 删数 [dp转贪心结论+线段树]

    题面 传送门 思路 dp部分 以下称合法序列为原题面中可以删空的序列 这个是我在模拟考场上的思路 一开始我是觉得,这个首先可以写成一个dp的形式:$dp[i][j]$表示用$j$个数字填满了目标序列的 ...

  9. pandas对时间列分组求diff遇到的问题

    例子: df = pd.DataFrame() df['A'] = [1, 1, 2] df['B'] = [datetime.date(2018, 1, 2), datetime.date(2018 ...

  10. 任务调度之Quartz.Net基础

    最近公司要求将之前的系统设计文档补上,于是大家就都被分配了不同的任务,紧锣密鼓的写起了文档来.发现之前项目中使用了Quartz.Net来做一些定时任务的调度,比如定时的删除未支付的订单,定时检查支付状 ...