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

一、同步加载
  平常默认用的都是同步加载。如:<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 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成,很多可能暂时不用或根本就没用到。
就像图片的延迟加载,在图片出现在可视区域内时(在滚动条下拉)才加载显示图片

四、预加载

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

时间: 2024-12-18 00:40:01

同步加载、异步加载、延迟加载的相关文章

【转】【玩转cocos2d-x之二十三】多线程和同步03-图片异步加载

原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/15334159 cocos2d-x中和Android,Windows都 一样,如果在主线程中处理一些耗时操作,那么主线程就会出现阻塞现象,表现在界面上就是卡住,未响应等情况.为了避免这种情况的出现,我们需要在后台开辟 工作线程进行数据的处理,再采用消息传递或者其他形式来通知主线程进行UI变化.最常见的情况就是游戏进入前的loading. 1.图片的异步加载 在多线程和同步的第

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

前端性能优化-异步加载

异步加载的方式1:动态脚本加载 异步加载方式2:defer HTML 4 为script标签定义了一个扩展属性:defer. defer是在HTML解析完成之后就会执行,如果有多个,按照加载的顺序依次执行 Defer 属性指明本元素所含的脚本不会修改 DOM,因此代码能安全地延迟执行.defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持,所以它不是一个理想的跨浏览器解决方案.在其他浏览器中,defer 属性会被直接忽略,因此script标签会以默认的方式处理,也就是

js的异步加载及promise的三种状态

---恢复内容开始--- js异步加载 同步加载 <script src="http://baidu.com/script.js"></script>  --->  我们平时经常使用的就是这种同步加载的形式 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. js 之所以要同步执行,是因为 js 中可能有输出 document 内容.修改dom.重定向等行为,所以默认同步执行才是安全的.

Unity中场景异步加载

引入命名空间 using UnityEngine.UI; using UnityEngine.SceneManagement; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; //引入命名空间 using UnityEngine.SceneManagement;//引入命名空间 public class S2Manager : MonoBeha

AssetBundle异步加载被中断的问题

刘 刘泰言创建于 1 年前 在使用异步接口 yield return AssetBundle.ASyncLoad的时候,难免会想到:这个异步处理完之前如何Cancel掉这个任务?也就是一个AssetBundle加载到一半,现在要放弃加载,应该怎么处理? UnityAssetBundle 赞同 0评论 分享 10条回复 曾 曾毅回答于 1 年前 无法CANCEL 赞同 1评论 分享 Walker回答于 1 年前 Unity的接口里没有中断操作,但是可以在自己项目的ABMgr模块给业务逻辑层提供一个

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

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

[转载]Javascript 同步异步加载详解

http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/ 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yo

异步加载和延迟加载

异步加载的方案 1.动态插入script标签 2.通过ajax去获取js代码,然后通过eval执行 3.script标签上添加defer或者async属性 4.创建并插入iframe,让它异步执行js 延迟加载 有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的.