同步加载、异步加载、延迟加载

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

二、异步加载

(function() {
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);
})();

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。

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

三、延迟加载（lazy loading）

前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片

四、预加载

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。

转载于:https://www.cnblogs.com/mylanguage/p/5635971.html

同步加载、异步加载、延迟加载相关推荐

div加载异步加载html,初始化页面，异步加载组件的问题
需求是这样的:希望第一次加载页面时候把红色箭头部分的组件require.ensure加载. 红色部分的代码(未改动之前): render:function(){ return( //这里就是需要异步 ...
轮播图插件Swiper的使用（懒加载+异步加载数据）
效果 HTML 引入swiper-bundle.css.swiper-bundle.js <head><link rel="stylesheet" href=&q ...
modprobe加载异步加载
分析 1.如果add x9, x9, x10 ---> x9 = 0x0000003dd2519e20+0xffffffc0ed9c3000 = 0xfffffffebfedce80 ---& ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
JavaScript script标签同步异步加载过程
同步加载同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作. <script src="http://xxx/script.js& ...
html 加载高德地图,vue异步加载高德地图
几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的 ...
js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原 ...
ajax异步加载延时问题,关于js延迟加载（异步操作）的方式
一.概述最近重新开始学习js,在第一章的一个小节里写到了"脚本调用策略",书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js ...
关于同步加载与异步加载的区别
关于同步加载与异步加载的区别同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. 异步加载:异步加载又叫非阻塞,浏览器在下 ...

同步加载、异步加载、延迟加载

三、延迟加载（lazy loading）

同步加载、异步加载、延迟加载相关推荐

最新文章

热门文章