20170316111406

什么是延迟加载,它的好处是什么

延迟加载是将资源或对象的加载或初始化延迟到实际需要它们以提高性能和节省系统资源的做法。例如,如果一个网页有一张图片,用户必须向下滚动才能看到,你可以显示一个占位符,并且只有当用户到达它的位置时才可以延迟加载完整的图片。推荐阅读:《什么是延迟加载?延迟加载与预加载》

延迟加载的好处包括:

减少初始加载时间 – 延迟加载网页可减少页面重量,从而缩短 页面加载时间。

带宽节约 – 延迟加载通过仅在用户请求时才向用户交付内容来节约带宽。

系统资源节约 ——延迟加载既节约了服务器资源,也节约了客户端资源,因为实际上只需要渲染或执行部分图像、JavaScript 和其他代码。

什么是延迟加载,它的好处是什么
什么是延迟加载,它的好处是什么

延迟加载 vs. 急切加载

延迟加载会延迟资源的初始化,而急切加载会在代码执行后立即初始化或加载资源。预加载还涉及预加载资源引用的相关实体。例如,带有 include 语句的 PHP 脚本执行预加载——一旦执行,预加载就会拉入并加载包含的资源。

当有机会或需要在后台加载资源时,快速加载是有益的。例如,某些网站会显示“正在加载”屏幕并急切加载 Web 应用程序运行所需的所有资源。

延迟加载实现方法

有几个开源库可用于实现延迟加载,包括:

blazy.js – blazy.js 是一个轻量级的 JavaScript 库,用于延迟加载和多服务图像、iframe、视频和其他资源。

LazyLoad – LazyLoad 是一个脚本,可在图像进入视口时自动加载图像。

在代码中实现延迟加载的方法包括:

延迟初始化 – 此方法将对象设置为 null。对象数据仅在调用它们之后和每次调用时加载,检查是否为空,如果是,则加载对象数据。

虚拟代理 ——访问对象时,调用与真实对象具有相同接口的虚拟对象。当虚拟对象被调用时,加载真实对象,然后委托给它。

Ghost – 仅使用标识符加载处于部分状态的对象。第一次调用对象上的属性时,加载完整数据。

值持有者 ——创建一个处理延迟加载行为的通用对象。此对象应出现在对象的数据字段的位置。

延迟加载图片

要延迟加载图像,请显示轻量级占位符图像,并在滚动时替换为真实的全尺寸图像。

延迟加载图像有几种技术方法:

内嵌

标签,如果图像在视口中,则使用 JavaScript 填充标签

事件处理程序,例如 scroll 或 resize

该 路口观察API

CSS 背景图像属性

延迟加载视频

要延迟加载不自动播放的视频,您可以使用 HTML5 视频标签的 preload 属性。

对于自动播放的视频,谷歌浏览器会自动提供延迟加载。在其他浏览器中,您需要在 video 标签中声明以下属性:

<视频自动播放静音循环播放宽度=”xx”高度=”xx”海报=”placeholder-image.jpg”>

延迟加载最佳实践

执行延迟加载时,请考虑以下提示:

仅延迟加载显示在折叠下方或用户视口之外的资源。在代码中,仅延迟加载初始或基本系统操作不需要的对象。

延迟加载图像时,请在将其插入 DOM 之前使用 JavaScript decode() 方法对其进行异步解码。否则,大图像可能会导致浏览器冻结。

在图像或对象无法加载的情况下处理错误。

提供一个 noscript 以防 JavaScript 不可用。否则禁用 JavaScript 的用户将看不到任何延迟加载的资源。

延迟加载和 CDN

延迟加载和内容交付网络(CDN),例如 Imperva 的 CDN,是缩短页面加载时间和优化最终用户体验的两种方法。CDN 有助于将资源放置在 靠近用户的 缓存服务器上,从而使他们能够更快地访问它。

在网站性能优化方面,延迟加载与 CDN 相比如何?

延迟加载避免了不必要的资源下载或代码执行。然而,当用户实际请求大量或大量资源时,它无济于事。

CDN 缓存资源并可以更快地为用户提供服务——但它可能会传输用户实际上并不需要的不必要的资源。

最佳解决方案是将这两种技术结合起来——通过在通过 CDN 提供资源的同时实现延迟加载,您可以确保仅下载用户实际需要的资源,并且当用户实际需要资源时,它会被缓存并快速交付。推荐相关阅读:《什么是CDN,以及工作原理和构建块》

20170316111406

什么是延迟加载?延迟加载与预加载

延迟加载:是什么以及为什么要关心?美丽的网站是伟大的,但如果没有人看到它,就不是。可能设计了令人惊叹的网站,但如果它不能快速加载,可能会失去流量。各种不同的研究表明,大约50%的互联网用户希望网页在两秒或更短的时间内加载,这意味着如果网站需要三秒钟才能运转起来,那么就有相当大的机会失去访问者。反过来说,其实可以通过减少页面加载时间来提高转化率。研究如何让网站更快时,有可能已经遇到了延迟加载这个词。如果不确定这个术语是什么,不要担心,很多人都是这样,下面hostgator美国虚拟主机商为你详细介绍一下吧,不懂的小伙伴看过来。

什么是“延迟加载”?

延迟加载是指只在需要时加载必要的页面,目的是节约系统资源,提高整体速度和性能。就图片而言,延迟加载是指任何非立即需要的图片在被调用之前不会加载。它的原理是在原始内容中增加属性,通过将图像加载推迟到需要的时间,网页能够更快地只加载立即需要的图像。页面上不在用户视窗中的图片将被占位图填充,直到需要为止。

什么是预加载?

延迟加载需要花时间来加载图片,而预加载则没有同样的耐心。预加载是指一次性强制加载页面上所有资产的动作。它加载相关的实体,即使访问者从未向下滚动。可能以前也见到过预加载。如果曾访问过显示加载屏幕、有很多照片或视频的页面,这就是预加载。预加载可以一次性加载所有的资源,但它可能会导致速度更慢,增加带宽和资源使用量。像Windows虚拟主机的带宽比较小的时候,就会出现预加载这种情况。

延迟加载VS预加载

至于哪种类型的加载效果最好,这一切都取决于个人需求。延迟加载提供了一系列的好处,如减少请求,更快的加载时间,更少的资源和带宽保护。如果在一个页面上有很多照片,或者一篇文章中包含多张照片,这一点特别有用。 而对于移动网站来说,用户往往更加没有耐心。

预加载可以确保网站及其所有相关的资产一次性加载。如果有轻量级的资产或快速查询,预加载可以是一个很好的选择,因为它可以通过无需执行额外的SQL查询来节省时间。

WordPress中的延迟加载

WordPress在5.5版本中默认引入了图片的延迟加载功能。

在5.5之前,用户必须安装第三方插件来延迟加载图片。这对数百万WordPress用户来说,应该会给网站速度带来很大的提升。关于更多WordPress的知识,可以阅读:如何用插件在WordPress网站添加电子商务功能

“随着WordPress默认启用原生的延迟加载,将极大影响数百万网站的性能和用户体验,而不需要任何技术知识,甚至不需要意识到延迟加载这个概念,”WordPress核心提交人Felix Arntz在5.5公告中说。“采用新的加载属性,是WordPress引领整体网络速度发展的一个很好机会。”

以上就是hostgator美国虚拟主机商为你介绍关于延迟加载与预加载的知识,这个在网站中是比较常见的。自己可以尝试建站来试试看,这里推荐hostgator的分销主机产品,有Aluminum 计划、Copper 计划、Silver 计划、Gold 计划、Platinum 计划等供你选择,一个月也就几十块钱。