什么专业的会做网站,高端商务经纪网站建设,it外包范围,wordpress的文件权限设置方法延迟加载#xff08;Lazy Loading#xff09;是一种优化网页性能的技术#xff0c;它允许资源#xff08;如图片、脚本等#xff09;在需要时才被加载#xff0c;而不是在页面初次加载时全部加载。这可以减少初始页面加载时间#xff0c;提升用户体验#xff0c;特别是…延迟加载Lazy Loading是一种优化网页性能的技术它允许资源如图片、脚本等在需要时才被加载而不是在页面初次加载时全部加载。这可以减少初始页面加载时间提升用户体验特别是在移动设备或网络条件不佳的情况下。以下是几种常见的 JavaScript 延迟加载方法
1. 图片的延迟加载
使用 loading 属性
现代浏览器支持原生的图片延迟加载功能通过为 img 标签添加 loadinglazy 属性即可实现。
img srcimage.jpg altDescription of image loadinglazy
这种方法简单易用且不需要额外的 JavaScript 代码。
自定义 JavaScript 实现
如果需要更复杂的控制或者兼容性考虑可以使用 JavaScript 来检测元素是否进入视口并在适当的时候加载图片。
示例代码
function lazyLoadImages() {const images document.querySelectorAll(img[data-src]);const config {rootMargin: 0px,threshold: 0.1 // 当图片底部有10%进入视口时开始加载};let observer;function preloadImage(img) {const source img.getAttribute(data-src);if (!source) return;img.src source;img.removeAttribute(data-src);}function handleIntersect(entries, observer) {entries.forEach(entry {if (entry.isIntersecting) {preloadImage(entry.target);observer.unobserve(entry.target);}});}if (IntersectionObserver in window) {observer new IntersectionObserver(handleIntersect, config);images.forEach(image {observer.observe(image);});} else {// Fallback for browsers that do not support IntersectionObserverimages.forEach(image {preloadImage(image);});}
}// Call the function on page load or when needed
document.addEventListener(DOMContentLoaded, lazyLoadImages);
2. 脚本的延迟加载
使用 async 和 defer 属性
对于外部 JavaScript 文件可以通过设置 script 标签上的 async 或 defer 属性来实现异步加载。
async尽可能早地下载脚本并在下载完成后立即执行不会阻塞 DOM 解析。defer脚本会在 HTML 文档解析完成后但 DOMContentLoaded 事件触发前按顺序执行。
script srcscript.js async/script
script srcanother-script.js defer/script
动态插入脚本
另一种方法是通过 JavaScript 动态创建并插入 script 元素从而实现更灵活的控制。
示例代码
function loadScript(src, callback) {const script document.createElement(script);script.src src;script.onload () callback callback();document.body.appendChild(script);
}// Usage example
loadScript(https://example.com/script.js, () {console.log(External script loaded and executed.);
});
3. 框架和库
利用现有的前端框架如 Vue.js、React 等提供的组件懒加载机制可以在路由切换或其他特定条件下加载组件及其依赖项。此外还有专门用于处理资源延迟加载的第三方库例如 Lozad.js 或 lazysizes。
4. CSS 资源的延迟加载
虽然 CSS 通常不是延迟加载的重点但在某些情况下也可以考虑延迟加载非关键路径上的样式表。一种方式是将这些样式表放在媒体查询中只有当满足特定条件时才会加载。
link relstylesheet hrefprint.css mediaprint
link relstylesheet hrefmobile.css media(max-width: 768px)
5. Intersection Observer API
虽然之前已经提到过 Intersection Observer API 可以用来实现图片的懒加载但它的应用远不止于此。它也可以用于监听任何 DOM 元素何时进入或离开视口并根据这个事件触发相应的操作。
示例延迟加载视频
const videos document.querySelectorAll(video[data-src]);if (IntersectionObserver in window) {const videoObserver new IntersectionObserver((entries, observer) {entries.forEach(entry {if (entry.isIntersecting) {const video entry.target;video.src video.getAttribute(data-src);video.play();observer.unobserve(video);}});});videos.forEach(video {videoObserver.observe(video);});
}
6. Link Prefetching 和 Preloading Prefetch通过 link relprefetch 提前下载用户可能需要的资源例如下一个页面的 HTML、CSS 或 JavaScript 文件。这可以在后台悄悄进行当用户导航到该页面时资源已经准备好。 Preload使用 link relpreload 强制浏览器优先加载指定资源确保它们尽早可用。这对于关键路径上的资源特别有用比如字体或重要的样式表。
!-- Prefetch --
link relprefetch href/next-page.html!-- Preload --
link relpreload hrefcritical-font.woff2 asfont typefont/woff2 crossorigin
7. 动态导入Dynamic Imports
动态导入允许你按需加载模块而不是在应用程序启动时全部加载。这对于大型单页应用SPA尤其重要因为它可以帮助减少初始加载时间。
示例代码
// Traditional import
import(./module.js).then(module {// Use the imported module
});// Conditional dynamic import
if (condition) {import(./optional-module.js).then(optionalModule {// Do something with optionalModule});
}// In a function or event handler
function loadFeature() {return import(./feature.js);
}document.getElementById(featureButton).addEventListener(click, () {loadFeature().then(feature {feature.init();});
});
8. Code Splitting
对于使用打包工具如 Webpack构建的应用程序可以通过代码分割Code Splitting来将应用程序拆分为多个小块只在需要时加载特定的部分。这样不仅可以减小初始加载量还能提高缓存效率。
Webpack 动态导入结合 import() 语法和 Webpack 的魔法注释magic comments可以精确控制哪些部分应该被打包在一起以及如何异步加载。
// Webpack magic comment for splitting chunks
const moduleA module-a;
import(/* webpackChunkName: chunk-name */ ./${moduleA}).then(({ default: mod }) {console.log(mod);
});
9. 骨架屏Skeleton Screens
不是传统意义上的“延迟加载”但骨架屏是一种用户体验设计模式它在实际内容加载之前显示一个简化版的界面布局。这种方法可以让用户感觉页面加载速度更快即使实际上数据还在加载中。
div classskeletondiv classskeleton__image/divdiv classskeleton__text/div
/divscript
// Replace skeleton screen with actual content once loaded
fetch(/content).then(response response.json()).then(data {document.querySelector(.skeleton).innerHTML img src${data.imageUrl} altImagep${data.text}/p;});
/script
10. Service Workers
服务工作者Service Workers是运行在浏览器后台进程中的脚本它们可以在没有网络连接的情况下提供离线访问功能。通过预缓存静态资源并在请求时从缓存中提供这些资源可以有效减少对服务器的压力并加速页面加载。
注册 Service Worker 并缓存资源
if (serviceWorker in navigator) {window.addEventListener(load, () {navigator.serviceWorker.register(/sw.js).then(registration {console.log(Service Worker registered with scope:, registration.scope);}).catch(error {console.log(Service Worker registration failed:, error);});});
}
在 Service Worker 文件 (sw.js) 中定义缓存逻辑
const CACHE_NAME my-site-cache-v1;
const urlsToCache [/,/styles/main.css,/script/app.js
];self.addEventListener(install, event {event.waitUntil(caches.open(CACHE_NAME).then(cache cache.addAll(urlsToCache)));
});self.addEventListener(fetch, event {event.respondWith(caches.match(event.request).then(response response || fetch(event.request)));
});
总结
延迟加载不仅仅局限于图片和脚本还可以应用于各种类型的资源和场景。利用现代浏览器提供的新特性如 Intersection Observer、动态导入等结合传统的优化手段如 Prefetch 和 Preload可以构建出更加高效且响应迅速的 Web 应用。此外考虑到用户体验采用骨架屏或 Service Workers 等技术也能为用户提供更好的浏览体验。
