在使用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. 洛谷P3926 SAC E#1 - 一道不可做题 Jelly【模拟/细节】

    P3926 SAC E#1 - 一道不可做题 Jelly [链接]:https://www.luogu.org/problem/show?pid=3926 题目背景 SOL君(炉石主播)和SOL菌(完 ...

  2. HDU 1236 排名（结构体+排序）

    今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完成的题数排序,没有考虑 每题的分值,所以并不是最后的排名.给定录取分数线,请你写程序找出最后通过分数线的 考生,并将他们的成绩按降序打 ...

  3. POJ 1970 The Game (DFS)

    题目链接:http://poj.org/problem?id=1970 题意: 有一个19 × 19 的五子棋棋盘,其中“0”代表未放入棋子,“1”代表黑色棋子,”2“代表白色棋子,如果某方的棋子在横 ...

  4. ZOJ 3380 Patchouli's Spell Cards

    方案数,$dp$. 总的方案数有$n^m$种,符合要求的直接算不好算,可以算反面,即不符合要求的. 设$dp[i][j]$表示前$i$种等级填了$j$个位置,那么$dp[i][j]=sum(dp[i- ...

  5. ( 转 ) 优秀REST风格 API的设计原则

    设计优秀的REST风格API非常困难!API是服务提供方和使用方之间的契约,打破该契约将会给服务端开发人员招来非常大的麻烦,这些麻烦来自于使用API的开发人员,因为对API的改动会导致他们的移动app ...

  6. 【DFS序】【莫队算法】【权值分块】bzoj1803 Spoj1487 Query on a tree III

    基本等同这个,只是询问的东西不大一样而已. http://www.cnblogs.com/autsky-jadek/p/4159897.html #include<cstdio> #inc ...

  7. 【动态规划】【最长上升子序列】【贪心】bzoj1046 [HAOI2007]上升序列

    nlogn求出最长上升子序列长度. 对每次询问,贪心地回答.设输入为x.当前数a[i]可能成为答案序列中的第k个,则若 f[i]>=x-k && a[i]>ans[k-1] ...

  8. jdk8中Spliterator的作用

    文章前半部分转自:https://blog.csdn.net/lh513828570/article/details/56673804 之前的时候看集合部分源码没看完,今天又翻了一下,看到了个东西sp ...

  9. redis命令行清缓存

    任务管理器-服务-redis 右击打开详细信息--右击打开文件位置 在这个位置cmd 输入命令redis-cli 在输入命令:flushall 出现ok即清除缓存成功

  10. display：block什么时候使用

    所有的块级元素不需要再在使用display:block定义,块级元素本身的默认属性就是block display:block:比较常用于<a><span>这两个标签,因为他们不 ...