在使用js展开式菜单时,发现只有加载完页面包含的js文件时,展开菜单才能折叠起来。

查找了一下原因:是因为js页面加载使用的是同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。

(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://localhost/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
应用该方法,便可以很好的避免页面必须加载完所有js文件才能响应菜单折叠的事件。

JS的同步加载、异步加载的更多相关文章

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

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/15334159 cocos2d-x中和Android,Windows都 一样, ...

  2. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  3. JS的同步和异步加载

    引言 JS的“加载”不能理解为下载,它是分为两个部分:下载,执行.默认的JS加载是同步的,因为浏览器需要一个稳定的DOM结构,而执行JS时可能会对DOM造成改变,所以在执行JS时一定会阻塞HTML的渲 ...

  4. javascript 同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...

  5. Javascript 文件的同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...

  6. angularJS1笔记-(19)-angular异步加载包的方式

    我们平时写的导入包的方式都是同步方式,有时候会显得过于卡顿,这样我们就可以使用异步加载的方式. script.js方式: 执行结果为: 异步加载还可以加载多个即为script([,,,],functi ...

  7. Unity中场景异步加载

    引入命名空间 using UnityEngine.UI; using UnityEngine.SceneManagement; using System.Collections; using Syst ...

  8. AssetBundle异步加载被中断的问题

    刘 刘泰言创建于 1 年前 在使用异步接口 yield return AssetBundle.ASyncLoad的时候,难免会想到:这个异步处理完之前如何Cancel掉这个任务?也就是一个AssetB ...

  9. QFramework 使用指南 2020(九):Res Kit(3)异步加载 与 异步队列加载

    在上一篇我们了解了 Res Kit 的一些背后设计原理,讲解了一些概念,比如:开发阶段.真机阶段等. 在这一篇,我们回到 Res Kit 使用细节上. 在 Res Kit 的第一篇,我们介绍了 Res ...

  10. js 异步加载和同步加载

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

随机推荐

  1. php获取rl完整地址

    /** * 获取url完整地址 * @author 梁景 * @date 2017-04-27 * @return */ function getUrlInfor() { $sys_protocal ...

  2. Codeforces Gym100952 A.Who is the winner? (2015 HIAST Collegiate Programming Contest)

      A. Who is the winner?   time limit per test 1 second memory limit per test 64 megabytes input stan ...

  3. ( 转 ) UML 类图

    在UML类图中,常见的有以下几种关系:泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Compositi ...

  4. luogu P1107 最大整数

    题目描述 设有n个正整数 (n<=20), 将它们连接成一排, 组成一个最大的多位整数. 例如: n=3时, 3个整数13, 312, 343连接成的最大整数为: 34331213 又如: n= ...

  5. 【权值分块】bzoj3570 DZY Loves Physics I

    以下部分来自:http://www.cnblogs.com/zhuohan123/p/3726306.html 此证明有误. DZY系列. 这题首先是几个性质: 1.所有球质量相同,碰撞直接交换速度, ...

  6. 关于SQL优化方面的一些总结

    在sql查询中为了提高查询效率,我们常常会采取一些措施对查询语句进行sql优化,下面总结的一些方法,有需要的可以参考参考. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ord ...

  7. [CodeChef-LVGFT]Lovers Gift

    题目大意: 给定一个$n(n\le10^5)$个结点的树,初始全为白点.$m(m\le10^5)$次操作,每次将点$x$染成黑色或询问从$x$出发至少经过一个黑点能到达的点中,编号次大的点. 思路: ...

  8. Mac Screen Capture Shortcuts

    Here's How:   To capture the entire desktop, press Command-Shift-3. The screen shot will be automati ...

  9. Matlab与神经网络入门

    第一节.神经网络基本原理  1. 人工神经元( Artificial Neuron )模型  人工神经元是神经网络的基本元素,其原理可以用下图表示: 图1. 人工神经元模型 图中x1~xn是从其他神经 ...

  10. coco2dx-2.2.2 win32启动过程(opengl 和 窗口大小初始化部分) - 学习笔记 1

    因为最近要做不同分辩率的适配,所于看了下引擎这方面的代码,记录一下当是学习笔记,cocos2d-x 版本 2.2.2 , 例子是samples\Cpp\TestCpp下的 TestCpp. 先看下ma ...