精华内容
下载资源
问答
  • 本文将介绍javascript 文件的同步加载与异步加载实现原理,需要了解的朋友可以了解下
  • javascript中的同步加载、异步加载、延迟加载和预加载 欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 同步加载 常默认的是同步加载 <script src="...

    欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

    1 同步加载

    常默认的是同步加载

    <script src="http://yourdomain.com/script.js"></script>
    

    同步模式又称阻塞模式,会阻止浏览器的后续操作,相当于阻止了后续的文件的解析,执行等。

    流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向输出document等默认行为,所以同步才是最安全的。

    通常加载js文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后面,当页面结构和样式全部渲染完成再执行js,提升用户体验

    2 异步加载

    异步加载又称非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式

    2.1 async、await

    这个是 ES7 中的特性,async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成

    详细可以参考这篇文章大佬的文章

    2.2 onload

    把插入script的方法放在一个函数里面,然后放在window.onload方法里面执行,这样就解决了阻塞onload事件触发的问题

    2.3 H5 async

    当浏览器解析到script脚本,没有defer或async时,defer在延迟加载中会说到

    <script src="main.js"></script>
    

    浏览器会立即加载并执行指定的脚本,“立即”指在渲染该script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行

    当浏览器解析到script脚本,有async时

    <script async src="main.js"></script>
    

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

    3 延迟加载

    有些代码在某种特定情况下才需要,并不是一股脑子都加载出来了,这个时候就需要延迟加载

    这里也是 H5 的内容

    3.1 H5 defer

    当浏览器解析到script脚本,有defer时

    <script defer="defer" src="main1.js"></script>
    
    <script defer="defer"  src="main2.js"></script>
    
    1. 此时单纯看这两个需要被加载的js文件和其他HTML的渲染,CSS的加载,图片的加载等是同时进行的,是异步操作

    2. 但是单看main1.jsmain2.js又和同步的执行是一样的,当加载main1.js的时候,main2.js会等待main1.js加载完毕再加载

    3. 这就是defer的作用了,当有defer的时候,先架加载第一个延迟脚本

    3.2 async VS defer

    相同点:异步加载文件

    不同点

    async:虽然是异步加载,但当有多个脚本异步加载的时候,不一定先加载哪一个,加载顺序不一定

    defer:加载顺序由第一个延迟脚本到最后一个延迟脚本

    4 预加载

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

    展开全文
  • 同步加载和异步加载

    2018-10-18 18:23:27
    同步加载 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。用同步加载时一般建议把script标签放在页面末尾body之前,这样尽可能减少阻塞...
    1. 同步加载
      同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。用同步加载时一般建议把script标签放在页面末尾body之前,这样尽可能减少阻塞行为,而先让页面展示出来。
    • 为什么有的网页引入的script放在头部
      大家有注意到在头部引入的script标签,一部分都添加了async属性。这个属性是HTML5给script新添加的属性,而且只适用于外部的JavaScript文件。如果在script标签上添加了这个属性,那么表明这个脚本资源就不再是同步加载的了,而是异步加载的(存在兼容性问题)。
      但是还是有一些script标签没有添加async属性,那就表示这些资源是同步加载执行的。是因为这些脚本需要在浏览器渲染页面之前就执行的。
    1. 异步加载
      异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
    2. 区别
      同步加载的timeline是瀑布模型,异步加载的timeline是并发模型
    3. async 和 defer 属性
      defer
      defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
      浏览器将会并行下载 file.js 和其它有 defer 属性的script,而不会阻塞页面后续处理。
      注:所有的defer 脚本保证是按顺序依次执行的。
      async
      async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
    展开全文
  • 同步加载、异步加载、延迟加载 一、同步加载  平常默认用的都是同步加载。如:http://yourdomain.com/script.js">   同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像...
     
    

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

    四、预加载

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

    展开全文
  • 版权声明:本文为CSDN博主「做做游戏而已」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载...同步加载 读取新关卡后立即切换,其参数为所读取新关卡的名称或索引。Application.LoadLevel ("关卡名或者加载场景的序...

    版权声明:本文为CSDN博主「做做游戏而已」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_30585525/article/details/92436694

    同步加载

    读取新关卡后立即切换,其参数为所读取新关卡的名称或索引。Application.LoadLevel ("关卡名或者加载场景的序号")

    这个方法对于场景小,资源少的情况可以,要是遇到资源大的场景,就会卡,这种情况就要用到异步加载了

    异步加载

    Application.LoadLevelAsync("关卡名或者加载场景的序号") 一般会有 进度条

    异步 优点:速度快,与主线程无关

    缺点:调用比较麻烦,不确定什么时候资源准备完成,最好的做法也是使用回调,这样回调就会很多,很乱。

    同步 优点:管理起来方便,而且资源准备好了是可以及时返回的,

     缺点:是没有异步快

    同步就是指一个进程在执行某个请求时,若该请求需要一段时间返回数据,那么这个进程就会一直等下去,直到成功返回数据后再进行下一步操作

    异步相反,不需要等待,不管其他进程的状态,继续执行下一步操作,当有数据返回时,就会通知这个进程处理,这样就能提高执行的效率
     

    展开全文
  • JavaScript同步加载和异步加载

    千次阅读 2017-11-24 15:34:40
    一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: script src="http://yourdomain.com/script.js">/script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,...
  • 同步加载、异步加载、延迟加载和预加载 欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 同步加载 常默认的是同步加载 1<script src="http://yourdomain.com/script.js"></script> ...
  • 在传统采煤机加载技术的基础上提出双电牵引部同步加载方案,可同时完成对采煤机左右电牵引部的同步加载试验,极大地提高了试验效率、解决了电牵引采煤机变濒控制系统与双行走部试验的匹配试验技术,具有巨大的经济价值...
  •   同步加载: 同步模式,又称阻塞模式,就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;   即同步加载会阻止浏览器的...
  • 兽人永不为奴!!!联盟狗们,拔剑吧!...值得注意的是:异步加载虽然在后台加载,但是,因为程序对内存进行大量的操作,所以依然会有一定的卡顿(例如:我叫MT2进入画面)同步加载比较简单 调用函数即可Applicatio
  • Unity 工具类 之 简单的异步场景加载(包含加载进度和同步加载方法)类 LoadSceneManager 实现 1、单例类,保证整个场景中只有一个类管理场景加载; 2、LoadSceneManager.Instance.LoadSceneAsync 即可异步加载...
  • 关于同步加载和异步加载

    千次阅读 2018-01-30 17:16:08
     1.同步针对于处理信息量很小的情况,也...2.java中有同步的概念,Android中目前没有同步加载数据这种做法,Android中一般都是异步加载,操作一些网络数据,加载大图片等耗时的操作,必须要异步加载,就是另开一个
  • ztree 同步加载例子

    千次阅读 2016-08-31 21:47:25
    因为数据量比较小,想用ztree 做个同步加载的下拉树,网上一查都是异步加载的,这里给大家一个简单的同步例子 首先说下ztree 同步加载的json格式 [  {  "id": "1",  "name": "高额话费",  "pid": "0"  }...
  • 关于同步加载与异步加载的区别 同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。 异步加载:异步加载又叫非阻塞,浏览器在...
  • 为了充分发挥牵引部自身的调速稳定性以及工作可靠性,提高工作面产量,设计了一套以LabVIEW为基础的采煤机双牵引部同步加载方案,包括数据采集系统设计、程序框图设计与界面设计。通过实验数据分析可知各个参数之间的...
  • 用VHDL语言实现同步加载左右移位寄存器
  • SyncLoaderBitmapDemo, 同步加载位图 int listview演示 同步从Android的Url加载图像一个简单的演示,显示来自Android的url 。 图像正在异步下载线程。 图像被缓存在SD卡和内存上。 让用户体验更流畅 代码 fragment...
  • 行业资料-电子功用-制动电动机及电动同步加载器.zip
  • Requirejs高级应用(三):同步加载

    千次阅读 2016-11-29 17:40:28
    1. 同步加载要求在requirejs中,执行同步加载必须满足两点要求: 1. 必须在定义模块时使用,亦即define函数中; 2. 引用的资源必须是在同一个模块异步加载过的;满足了上面那么两个苛刻的条件,那同步加载还能引用...
  • unity 场景的同步加载和异步加载

    千次阅读 2018-06-26 16:13:29
    同步加载,两种书写形式: public static void LoadScene(int sceneBuildIndex, SceneManagement.LoadSceneMode mode = LoadSceneMode.Single);public static void LoadScene(string sceneName, ...
  • 无论是同步加载还是异步加载最好使用文件路径名称作为参数,防止重名的时候加载错。 同步加载:SceneManager.LoadScene("Scenes/Scence02"); 线程是阻塞的 异步加载:SceneManager.LoadSceneAsync("Scenes/...
  • Requirejs高级应用(三) 同步加载

    千次阅读 2019-04-15 09:11:27
    Requirejs高级应用(三) 同步加载
  • 行业资料-电子功用-制动电动机及电动同步加载器的介绍分析.rar
  • 同步加载: 缺点:当场景很大的时候,会阻塞主线程,就会出现卡顿现象 异步加载:当场景很大的时候 优点:不会阻塞主线程,不会出现卡顿 缺点:加载时间会很长 异步累加加载:当场景很大的时候,我们选择先加载...
  • extjs store ajax同步加载数据

    千次阅读 2018-12-05 17:52:02
    extjs store ajax支持同步加载数据  Ext.define('Ext.ux.data.proxy.Ajax', {   extend: 'Ext.data.proxy.Ajax',   async:true,   doRequest: function(operation, callback, scope) {   va...
  • 行业分类-物理装置-一种静载下高频循环荷载同步加载的三轴仪.zip
  • 同步加载JS文件Demo

    2017-04-05 16:37:16
    随着项目功能越来越完善,js文件多了又多,如何通过一个init.js去管理项目所需要的js(重点:解决js文件顺序加载的问题),本demo为你揭秘。
  • async,defer 属性 同步加载,异步加载,延迟执行1.异步加载 和 延迟执行 存在的意义 : 避免影响 页面渲染/显示2. 同步 加载和执行 (影响 页面解析/渲染/显示)3. async 属性: 异步加载 (不是 异步执行,搭配 src 属性,仅...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 454,031
精华内容 181,612
关键字:

同步加载