计算机网络时延图,计算机网络中网站性能延迟加载图像的示例分析
计算机网络中网站性能延迟加载图像的示例分析
发布时间:2021-06-09 11:38:56
来源:亿速云
阅读:95
作者:小新
这篇文章给大家分享的是有关计算机网络中网站性能延迟加载图像的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题。
即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。
在本文中,您将学习有关延迟加载图像的五种方法,您可以将这些方法添加到web优化工具包中,以改进站点上的用户体验。
什么是延迟加载?
延迟加载图像意味着在网站上异步加载图像——也就是说,在网站上面的折叠内容完全加载之后,甚至仅当它们出现在浏览器的视区中时,才有条件地加载它们。这意味着,如果用户不一直向下滚动,那么放在页面底部的图像甚至不会被加载。
许多网站都使用这种方法,但在图片密集的网站上尤其明显。尝试浏览你最喜欢的在线搜索网站,寻找高分辨率的照片,你很快就会意识到网站只加载有限数量的图片。当您向下滚动页面时,您将看到占位符图像快速填充真实图像以供预览。例如,请注意unsplash.com上的加载程序:将页面的该部分滚动到视图中会触发使用全分辨率照片替换占位符:
为什么要关心延迟加载图像?
至少有两个很好的理由可以让你考虑延迟的为你的网站加载图像:如果您的网站使用JavaScript来显示内容或向用户提供某种功能,那么加载DOM很快就变得至关重要。脚本在开始运行之前,通常要等到DOM完全加载之后才开始运行。在有大量图像的站点上,延迟加载-或异步加载图像-可能会在用户停留或离开您的站点之间产生差异。
由于大多数延迟加载解决方案只在用户滚动到在视区中可以看到图像的位置时加载图像,因此如果用户从未到达该点,则永远不会加载这些图像。这意味着节省了大量的带宽,大多数用户,尤其是那些在移动设备和慢速连接上访问网络的用户,都会感谢您。
嗯,延迟加载图像有助于网站性能,但最好的方法是什么?
没有完美的方式。
如果您使用JavaScript,那么实现您自己的延迟加载解决方案应该不成问题。没有什么比自己编写代码更能让你控制了。
或者,您可以浏览web,寻找可行的方法,并开始使用它们。我就是这么做的,然后遇到了这五个有趣的技巧。
1使用Intersection Observer API进行延迟加载
Intersection Observer API是一个现代化的界面,你可以利用它来延迟加载图像和其他内容。
下面介绍MDN如何引入此API:
Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉的方法。
换句话说,异步观察的是一个元素与另一个元素的交集。
Denys Mishunov在交叉观察者和使用它的延迟加载图像上都有很棒的教程。这是他的解决方案的样子。
假设您想懒得加载图片库。每个图像的标记如下所示:
注意图像的路径如何包含在data-src属性内,而不是src属性中。原因是使用src意味着图像会立即加载,这不是你想要的。
在CSS中,您可以为每个图像赋予一个min-height值100px。这为每个图像占位符(没有src属性的img元素)提供了垂直维度。img {
min-height: 100px;
...more styles here
}
在JavaScript文档中,然后创建一个配置对象,并将其注册到一个intersectionObserver实例中:// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
// register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
// iterate over each entry
entries.forEach(entry => {
// process just the images that are intersecting.
// isIntersecting is a property exposed by the interface
if(entry.isIntersecting) {
// custom function that copies the path to the img
// from data-src to src
preloadImage(entry.target);
// the image is now in place, stop watching
self.unobserve(entry.target);
}
});
}, config);
最后,迭代所有图像并将它们添加到此iterationObserver实例:const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});
这个解决方案的优点是:实现起来很容易,很有效,并且让intersectionObserver在计算方面做大量的工作。
另一方面,虽然大多数浏览器的最新版本都支持交集观察器API,但并不是所有浏览器都一致支持它。幸运的是,有一个polyfill可用。
2 Robin Osborne逐步增强的延迟加载
罗宾·奥斯本提出了一个基于渐进增强的超级巧妙的解决方案。在这种情况下,使用JavaScript实现的延迟加载本身被认为是对常规HTML和CSS的增强。
渐进增强的原因吗?那么,如果使用基于JavaScript的解决方案显示图像,如果禁用JavaScript或发生错误阻止脚本正常工作,会发生什么情况呢?在这种情况下,如果没有渐进的增强,用户很可能根本看不到图像。不酷。
您可以在此Pen中查看Osborne解决方案的基本版本的详细信息;在另一个Pen中,你可以看到一个更全面的解决方案,其中考虑了破坏JavaScript的情况。
这种技术有许多优点:渐进增强方法可确保用户始终可以访问内容。
它不仅适用于JavaScript不可用的情况,而且还适用于JavaScript 崩溃的情况:我们都知道容易出错的脚本,特别是在运行大量脚本的环境中。
它延迟加载滚动图像,因此如果用户不滚动到浏览器中的位置,则不会加载所有图像。
它不依赖于任何外部依赖,因此不需要框架或插件。
3 Lozad.js
实现延迟加载图像的一种快速简便的替代方法是让JS库为您完成大部分工作。
Lozad是纯JavaScript中高性能,轻量级和可配置的延迟加载器,没有依赖关系。您可以使用它来延迟加载图像,视频,iframe等,并使用Intersection Observer API。
您可以使用npm / Yarn包含Lozad并使用您选择的模块捆绑器导入它:npm install --save lozad
yarn add lozad
import lozad from 'lozad';
或者,您可以使用CDN简单地加载库,并将其添加到
接下来,对于基本实现,将类lozad添加到标记中的资源:
最后,在JS文档中实例化Lozad:const observer = lozad();
observer.observe();
您将找到如何使用lozad github存储库上的库的所有详细信息。
如果您不想深入了解Intersection Observer API的工作方式,或者您只是在寻找适用于各种内容类型的快速实现,那么Lozad是一个很好的选择。
只有,请注意浏览器支持,并最终将此库与Intersection Observer API的polyfill集成。
4延迟加载,模糊图像效果
如果你是一个中等水平的读者,你肯定已经注意到网站是如何在帖子中加载主图片的。
您首先看到的是图像的模糊、低分辨率副本,而它的高分辨率版本正被延迟加载,媒体网站上的高分辨率,延迟加载图像。
您可以通过多种方式使用这种有趣的模糊效果来延迟加载图像。
我最喜欢的技术是Craig Buckler。以下是此解决方案的所有优点:性能:只有463个字节的CSS和1,007个字节的缩小JavaScript代码
支持视网膜屏幕
无依赖性:不需要jQuery或其他库和框架
逐步增强以抵消旧版浏览器和JavaScript失败
5 Yall.js
Yall是一个功能丰富的延迟加载脚本,适用于图像,视频和iframe。更具体地说,它使用了Intersection Observer API,并在必要时巧妙地依靠传统的事件处理程序技术。
在文档中包含Yall时,需要按如下方式对其进行初始化:
document.addEventListener("DOMContentLoaded", yall);
接下来,要延迟加载一个简单img元素,您需要在标记中执行的操作是:
请注意以下事项:您添加类慵懒的元素
值src是占位符图像
要延迟加载的图像的路径位于data-src属性内。
Yall的好处包括:Intersection Observer API具有出色的性能
神奇的浏览器支持(它可以追溯到IE11)
没有必要的其他依赖。
感谢各位的阅读!关于“计算机网络中网站性能延迟加载图像的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
计算机网络时延图,计算机网络中网站性能延迟加载图像的示例分析相关推荐
- html5延迟加载效果,网站性能延迟加载图像的五种技巧(小结)
由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题. 即使经过适当的优化,图像也会有相当大的重量.这可能会对访问者在访问网站内容之前等待的时间产生负面影响.很有可能,它们 ...
- java解析xml实例_在java中使用dom解析xml的示例分析
本篇文章介绍了,在java中使用dom解析xml的示例分析.需要的朋友参考下 dom是个功能强大的解析工具,适用于小文档 为什么这么说呢?因为它会把整篇xml文档装载进内存中,形成一颗文档对象树 总之 ...
- python绘制三维曲面图-Python中使用Matplotlib绘制3D图形示例
原标题:Python中使用Matplotlib绘制3D图形示例 3D图形能给我们对数据带来更加深入地理解.python的matplotlib库就包含了丰富的3D绘图工具.3D图形在数据分析.数据建模. ...
- 计算机网络时延图,动画:什么是计算机网络时延
时延 时延(delay或latency)是指数据(一个数据包或bit)从网络的一端传送到另一端所需要的时间. 总时延 = 发送时延 + 传播时延 + 排队时延 + 处理时延 发送时延 发送时延是主机或 ...
- Php 网站性能优化,关于ThinkPHP中网站性能优化研究
轻易不要用多表查询,如下代码以及模拟数据测试结果能让你清晰地认识到多表查询,join,left join,inner join的可怕之处,能不用就不要用 /** * 获取持有偶像币总估值 * @par ...
- matlab画泡面图,MATLAB中,( )函数可以保存图像并指定为图像文件格式。
The word "tunnel visioned "(Para 3, Line 2) most probably means______ . [解析] 男:简直不敢相信,我通过了 ...
- 使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能
目录 一:使用WebPageTest评估网站性能 二:使用Lighthouse分析性能 1.本地npm安装Lighthouse 2.Chrome DevTools中使用 三:使用Chrome DevT ...
- 计算机网络和因特网--分组交换网中的时延,丢包和吞吐量
一.分组交换网中的时延概述 节点总时延中最为重要的包括节点处理时延.排队时延.传输时延.传播时延 1.处理时延 检查分组首部和决定将该分组导向何处所需要的时间,还包括其他因素,如检查比特级错误. 2. ...
- 24考研深入浅出计算机网络笔记【更新中】
24考研深入浅出计算机网络笔记 文章目录 24考研深入浅出计算机网络笔记 前言 第一章 概述 1.1 因特网概述 1.2 电路交换.分组交换和报文交换 1.3 计算机网络的定义和分类 1.3.1 计算 ...
最新文章
- MinkowskiPooling池化(上)
- 全网独发gensim中similarities.Similarity用法
- C++ c_str()
- Linux 添加新硬盘
- P2240 【深基12.例1】部分背包问题
- ubuntu修改系统时区和jvm时区
- PyCharm导入selenium的webdirver模块出错
- Origin——在对象管理器中操作图层和绘图
- 遗传算法matlab_当结构设计遇到遗传算法应用ANSYS和MATLAB联合优化设计探索(二)...
- 360安全助手 -- 强力卸载电脑上的软件 的问题
- Windows下Pidgin介绍/安装配置图文攻略
- Vulkan教程 - 01 环境搭建
- 恋爱计时:只要时间在走,我们的爱就在继续
- 谷歌浏览器密码导入导出
- 计算机网络stp和utp,关于网络线UTP FTP STP SFTP 屏蔽层区别
- 攻防世界CTF —— PHP本地文件包含漏洞解题思路
- 我的世界服务器修改配置文件,瞬间统一 配置文件config修改 教程
- 简单计算一下,发现炒房一点不划算
- hive的列分隔符和行分隔符的使用
- Hive的安装部署--三种模式