• 售前

  • 售后

热门帖子
入门百科

js中延迟加载和预加载的具体利用

[复制链接]
浓茶人生 显示全部楼层 发表于 2021-10-25 19:30:53 |阅读模式 打印 上一主题 下一主题
延迟加载(懒加载)和预加载是常用的 web 优化的本领。。
一、延迟加载(懒加载)


原理: 当在真正需要数据的时间,才真正执行数据加载操作。
目的: 延迟加载机制是为了制止一些无谓的性能开销而提出来的

实现延迟加载的几种方法


1. 让 js 末了加载


利用方法: 把 js 外部引入的文件放到页面底部
用途: 让 js 末了引入,从而加快页面加载速率
分析:
流览器之所以会采取同步模式,通常加载 js 文件或者放<script>标签都在结构最背面,也是由于它会制止浏览器后续操作的缘故原由,所以放在背面,当页面结构和样式全部渲染完成再执行 js,提升用户体验

2. defer 属性


利用方法: 为 <script>标签订义了 defer属性。
用途: 让脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都剖析完毕之后再执行
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="test1.js" defer="defer"></script>
  5.   <script src="test2.js" defer="defer"></script>
  6. </head>
  7. <body>
  8. <!-- 这里放内容 -->
  9. </body>
  10. </html>
复制代码
分析:
      
  • 固然<script>元素放在了<head>元素中,但包含的脚本将延迟浏览器碰到</html>标签后再执行。  
  • 当浏览器剖析到 script 脚本,有 defer 时,浏览器会并行下载有 defer 属性的 script,而不会壅闭页面后续处理。  
  • 所有的 defer 脚本保证是按顺序依次执行的。(但现实上延迟脚本并不愿定会按照顺序执行,因此最好只包含一个延迟脚本)  
  • defer 属性只实用于外部脚本文件。
3. async 属性


利用方法: 为 <script>标签订义了 async属性。
用途: 不让页面等待脚本下载和执行,从而异步加载页面其他内容。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="test1.js" async></script>
  5.   <script src="test2.js" async></script>
  6. </head>
  7. <body>
  8. <!-- 这里放内容 -->
  9. </body>
  10. </html>
复制代码
浏览器会立即下载脚本,但不妨碍页面中的其他操作,好比下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行举行,这个过程是异步的。它们将在 onload 事故之前完成。

分析:
      
  • 浏览器会立即下载脚本,但不妨碍页面中的其他操作,加载和渲染后续文档元素的过程和脚本的加载与执行并行举行。  
  • 这个过程是异步的,它们将在 onload 事故之前完成。  
  • 所有的 defer 脚本不能控制加载的顺序。。  
  • asyncr 属性只实用于外部脚本文件。
4. 动态创建 DOM 方式

  1. //这些代码应被放置在</body>标签前(接近HTML文件底部)
  2. <script type="text/javascript">
  3.   function downloadJSAtOnload() {
  4.     varelement = document.createElement("script");
  5.     element.src = "defer.js";
  6.     document.body.appendChild(element);
  7.   }
  8.   if (window.addEventListener)
  9.    window.addEventListener("load",downloadJSAtOnload, false);
  10.   else if (window.attachEvent)
  11.    window.attachEvent("onload",downloadJSAtOnload);
  12.   else
  13.    window.onload =downloadJSAtOnload;
  14. </script>
复制代码
5. 利用 jquery 的 getScript 方法


利用方法:
  1. Query.getScript(url,success(response,status))
复制代码
      
  • url(必写):将要哀求的 URL 字符串  
  • success(response,status)(可选):规定哀求乐成后执行的回调函数。
其中的参数
response - 包含来自哀求的效果数据
status - 包含哀求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

用途: 通过 HTTP GET 哀求载入并执行 JavaScript 文件。
  1. //加载并执行 test.js:
  2. $.getScript("test.js");
  3. //加载并执行 test.js ,成功后显示信息
  4. $.getScript("test.js", function(){
  5. alert("Script loaded and executed.");
  6. });
复制代码
6.利用 setTimeout 延迟方法的加载时间


用途: 延迟加载 js 代码,给网页加载留出时间
  1. <script type="text/javascript">
  2. function A(){
  3.   $.post("/lord/login",{name:username,pwd:password},function(){
  4.    alert("Hello World!");
  5.   })
  6. }
  7. $(function (){
  8.   setTimeout("A()",1000); //延迟1秒
  9. })
  10. </script>
复制代码
常用实例 - 图片懒加载


原理: 一张图片就是一个<img>标签,浏览器是否发起哀求图片是根据<img>的 src 属性,所以实现懒加载的关键就是,在图片没有进入可视地区时,先不给<img>的 src 赋值,这样浏览器就不会发送哀求了,等到图片进入可视地区再给 src 赋值。
  1. <img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
  2. <img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >
复制代码
  1. function lazyload(){
  2. var visible;
  3. $('img').each(function () {
  4. if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判断图片是否需要懒加载
  5.   visible = $(this).offset().top - $(window).scrollTop(); //图片距离顶部的距离
  6.   if ((visible > 0) && (visible < $(window).height())) {// 判断图片是否在可视区域
  7.     visible = true;// 图片在可视区域
  8.   } else {
  9.     visible = false;// 图片不在可视区域
  10.   }
  11.   if (visible) {
  12.     $(this).attr('src', $(this).attr('lazy-src'));
  13.   }
  14. }
  15. });
  16. }
  17. // 打开页面触发函数
  18. lazyload();
  19. // 滚屏时触发函数
  20. window.onscroll =function(){
  21. lazyload(imgs);
  22. }
复制代码
二、 预加载


原理: 提前加载图片,当用户需要查看时可直接从本地缓存中渲染
目的: 牺牲前端性能,调换用户体验,利用户的操作得到最快的反映。

实现预加载的几种方法


1. css 实现


原理: 可通过 CSS 的background 属性 将图片预加载到屏幕外的配景上。只要这些图片的路径保持不变 ,当它们在 Web 页面的其他地方被调用时,浏览器就会在渲染过程中利用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。
  1. #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
  2. #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
  3. #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
复制代码
2. js 预加载图片


原理: 通过写函数举行预加载。将该脚本封装入一个函数中,并利用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。
  1. function preloader() {
  2.   if (document.images) {
  3.     var img1 = new Image();
  4.     var img2 = new Image();
  5.     var img3 = new Image();
  6.     img1.src = "http://domain.tld/path/to/image-001.gif";
  7.     img2.src = "http://domain.tld/path/to/image-002.gif";
  8.     img3.src = "http://domain.tld/path/to/image-003.gif";
  9.   }
  10. }
  11. function addLoadEvent(func) {
  12.   var oldonload = window.onload;
  13.   if (typeof window.onload != 'function') {
  14.     window.onload = func;
  15.   } else {
  16.     window.onload = function() {
  17.       if (oldonload) {
  18.         oldonload();
  19.       }
  20.       func();
  21.     }
  22.   }
  23. }
  24. addLoadEvent(preloader);
复制代码
3. 利用 ajax 实现预加载


原理: 利用 Ajax 实现图片预加载的方法,利用 DOM,不仅仅预加载图片,还会预加载 CSS、JavaScript 等相关的东西
  1. window.onload = function() {
  2.   setTimeout(function() {
  3.     // XHR to request a JS and a CSS
  4.     var xhr = new XMLHttpRequest();
  5.     xhr.open('GET', 'http://domain.tld/preload.js');
  6.     xhr.send('');
  7.     xhr = new XMLHttpRequest();
  8.     xhr.open('GET', 'http://domain.tld/preload.css');
  9.     xhr.send('');
  10.     // preload image
  11.     new Image().src = "http://domain.tld/preload.png";
  12.   }, 1000);
  13. };
复制代码
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000 毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能题目。

三、 懒加载与预加载的对比


1、概念


延迟加载也叫懒加载: 当在真正需要数据的时间,才真正执行数据加载操作。
预加载:提前加载,当用户需要查看时可直接从本地缓存中渲染

2、区别

      
  • 两种技能的本质:两者的举动相反,一个是提前加载,一个是迟缓甚至不加载。  
  • 懒加载会对前端有肯定的缓解压力作用,预加载则会增加前端的压力。
3、意义


懒加载的主要目的是优化前端性能,减少哀求数或延迟哀求数。
预加载是牺牲前端性能,调换用户体验,利用户的操作得到最快的反映。

四、 参考资料


【1】https://www.jb51.net/article/154930.htm
【2】https://www.jb51.net/article/57579.htm

到此这篇关于js中延迟加载和预加载的具体利用的文章就先容到这了,更多相关js中延迟加载和预加载内容请搜索脚本之家从前的文章或继续浏览下面的相关文章盼望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作