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


Posted in Javascript onJanuary 14, 2021

延迟加载(懒加载)和预加载是常用的 web 优化的手段。。

一、延迟加载(懒加载)

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

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法: 把 js 外部引入的文件放到页面底部
用途: 让 js 最后引入,从而加快页面加载速度
说明:
流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后面,当页面结构和样式全部渲染完成再执行 js,提升用户体验

2. defer 属性

使用方法: 为 <script>标签定义了 defer属性。
用途: 让脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行

<!DOCTYPE html>
<html>
<head>
  <script src="test1.js" defer="defer"></script>
  <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

说明:

  • 虽然<script>元素放在了<head>元素中,但包含的脚本将延迟浏览器遇到</html>标签后再执行。
  • 当浏览器解析到 script 脚本,有 defer 时,浏览器会并行下载有 defer 属性的 script,而不会阻塞页面后续处理。
  • 所有的 defer 脚本保证是按顺序依次执行的。(但实际上延迟脚本并不一定会按照顺序执行,因此最好只包含一个延迟脚本)
  • defer 属性只适用于外部脚本文件。

3. async 属性

使用方法: 为 <script>标签定义了 async属性。
用途: 不让页面等待脚本下载和执行,从而异步加载页面其他内容。

<!DOCTYPE html>
<html>
<head>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行进行,这个过程是异步的。它们将在 onload 事件之前完成。

说明:

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

4. 动态创建 DOM 方式

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
  function downloadJSAtOnload() {
    varelement = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load",downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload",downloadJSAtOnload);
  else
   window.onload =downloadJSAtOnload;
</script>

5. 使用 jquery 的 getScript 方法

使用方法:

Query.getScript(url,success(response,status))
  • url(必写):将要请求的 URL 字符串
  • success(response,status)(可选):规定请求成功后执行的回调函数。

其中的参数
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

用途: 通过 HTTP GET 请求载入并执行 JavaScript 文件。

//加载并执行 test.js:
$.getScript("test.js");
//加载并执行 test.js ,成功后显示信息
$.getScript("test.js", function(){
 alert("Script loaded and executed.");
});

6.使用 setTimeout 延迟方法的加载时间

用途: 延迟加载 js 代码,给网页加载留出时间

<script type="text/javascript">
 function A(){
  $.post("/lord/login",{name:username,pwd:password},function(){
   alert("Hello World!");
  })
 }
 $(function (){
  setTimeout("A()",1000); //延迟1秒
 })
</script>

常用实例 - 图片懒加载

原理: 一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的 src 属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的 src 赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给 src 赋值。

<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >
function lazyload(){
 var visible;
 $('img').each(function () {
 if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判断图片是否需要懒加载
  visible = $(this).offset().top - $(window).scrollTop(); //图片距离顶部的距离
  if ((visible > 0) && (visible < $(window).height())) {// 判断图片是否在可视区域
    visible = true;// 图片在可视区域
  } else {
    visible = false;// 图片不在可视区域
  }
  if (visible) {
    $(this).attr('src', $(this).attr('lazy-src'));
  }
 }
 });
}
 // 打开页面触发函数
 lazyload();
 // 滚屏时触发函数
 window.onscroll =function(){
 lazyload(imgs);
 }

二、 预加载

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

实现预加载的几种方法

1. css 实现

原理: 可通过 CSS 的background 属性 将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变 ,当它们在 Web 页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }

#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

2. js 预加载图片

原理: 通过写函数进行预加载。将该脚本封装入一个函数中,并使用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。

function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);

3. 使用 ajax 实现预加载

原理: 使用 Ajax 实现图片预加载的方法,利用 DOM,不仅仅预加载图片,还会预加载 CSS、JavaScript 等相关的东西

window.onload = function() {
  setTimeout(function() {
    // XHR to request a JS and a CSS
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.css');
    xhr.send('');
    // preload image
    new Image().src = "http://domain.tld/preload.png";
  }, 1000);
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000 毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。

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

1、概念

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

2、区别

  • 两种技术的本质:两者的行为相反,一个是提前加载,一个是迟缓甚至不加载。
  • 懒加载会对前端有一定的缓解压力作用,预加载则会增加前端的压力。

3、意义

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

四、 参考资料

【1】https://3water.com/article/154930.htm
【2】https://3water.com/article/57579.htm

到此这篇关于js中延迟加载和预加载的具体使用的文章就介绍到这了,更多相关js中延迟加载和预加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
JS中箭头函数与this的写法和理解
Jan 14 #Javascript
JavaScript this关键字的深入详解
Jan 14 #Javascript
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
基于MySQL分区性能的详细介绍
2013/05/02 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
jquery iframe操作详细解析
2013/11/20 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JavaScript函数详解
2014/11/17 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Python 深入理解yield
2008/09/06 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python Pexpect模块的使用
2020/12/25 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
医院门卫岗位职责
2013/12/30 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
导游词之江南周庄
2019/12/06 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
SQLServer常见数学函数梳理总结
2022/08/05 MySQL