介绍同步加载、异步加载、延迟加载[原创]
栏目: 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的打赏,我们会更加努力! 如果您想成为作者,请点我
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 基于echarts异步加载数据之多个series加载实例
- 使WPF图像加载异步
- CSS 异步加载技术 不影响页面渲染
- Vue异步组件处理路由组件加载状态
- 简单的算法-解决页面脚本异步加载顺序问题
- echarts3.0异步数据加载之series样式处理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
推荐系统与深度学习
黄昕、赵伟、王本友、吕慧伟、杨敏 / 清华大学出版社 / 2019-1-1 / 65.00元
本书的内容设置由浅入深,从传统的推荐算法过渡到近年兴起的深度学习技术。不管是初学者,还是有一定经验的从业人员,相信都能从本书的不同章节中有所收获。 区别于其他推荐算法书籍,本书引入了已被实践证明效果较好的深度学习推荐技术,包括Word2Vec、Wide & Deep、DeepFM、GAN 等技术应用,并给出了相关的实践代码;除了在算法层面讲解推荐系统的实现,还从工程层面详细阐述推荐系统如何搭建.一起来看看 《推荐系统与深度学习》 这本书的介绍吧!