介绍同步加载、异步加载、延迟加载[原创]

栏目: JavaScript · 发布时间: 5年前

内容简介:同步加载 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染。流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来简单的说js在网页中加载会阻塞到未加载的css,html的加载跟渲染

同步加载 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染。流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来

简单的说

js在网页中加载会阻塞到未加载的css,html的加载跟渲染

异步加载

•异步加载也叫非阻塞模式加载,浏览器在下载js的同时,同时还会执行后续的页面处理。

在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了。

•同步加载流程是瀑布模型,异步加载流程是并发模型。

简单的说

•异步加载不会阻塞未加载的css、html的加载,

延迟加载(lazy loading)

延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。

简单的说

•用的时候再执行,不用不执行

分享下封装好的代码

function loadScript() {
   var script = document.createElement("script");
   script.type = "text/javascript";
 //<script style = “text/javascript”>
   script.src = url;
 //<script style = “text/javascript” url = “”>
   if(script.readyState) {}
// readyState载入中
   (function() {
   function async_load() {
   var s = document.createElement('script');
   s.type = 'text/javascript';
   s.async = true;
   s.src = 'http://yourdomain.com/script.js';
   var x = document.getElementsByTagName('script')[0];
   x.parentNode.insertBefore(s, x);
// parentNode返回元素的父节点
 // insertBefore在当前子节点的旁边插入节点
   }
   if(window.attachEvent)
 //attachEvent将代码层跟ul层相分离
  window.attachEvent('onload', async_load);
   else
  window.addEventListener('load', async_load, false);
   })(); 

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25111.html

介绍同步加载、异步加载、延迟加载[原创]

介绍同步加载、异步加载、延迟加载[原创] 微信打赏

介绍同步加载、异步加载、延迟加载[原创] 支付宝打赏

感谢您对作者Bunny的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux程序设计

Linux程序设计

Neil Matthew、Richard Stones / 陈健、宋健建 / 人民邮电出版社 / 201005 / 99.00元

时至今日,Linux系统已经从一个个人作品发展为可以用于各种关键任务的成熟、高效和稳定的操作系统,因为具备跨平台、开源、支持众多应用软件和网络协议等优点,它得到了各大主流软硬件厂商的支持,也成为广大程序设计人员理想的开发平台。 本书是Linux程序设计领域的经典名著,以简单易懂、内容全面和示例丰富而受到广泛好评。中文版前两版出版后,在国内的Linux爱好者和程序员中也引起了强烈反响,这一热潮......一起来看看 《Linux程序设计》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器