在使用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. Undefined index: validate（thinkphp）

    今天在用thinkphp3.23时发现错误 NOTIC: [8] Undefined index: validate  此处是thinkphp核心目录\Think\Model.class.php 第 ...

  2. IntelliJ IDEA 常用设置/快捷键

    经常用到 IntelliJ IDEA 编写java,由于不时需要重装系统,所以Mark一下一些基本的设置选项,以便查询,这篇帖子会一直更新,只要有常用的新的设置或者快捷键 一.常用设置 显示代码行号 ...

  3. 差分数组 and 树上差分

    差分数组 定义 百度百科中的差分定义 //其实这完全和要讲的没关系 qwq 进去看了之后是不是觉得看不懂? 那我简单概括一下qwq 差分数组de定义:记录当前位置的数与上一位置的数的差值. 栗子 容易 ...

  4. Java里的浅复制与深复制

    1．浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不 复制它所引用的对象. ...

  5. sdoi2018酱油鸡

    ruand1滚粗啦,然后过来写游记 四月是你の省选... day -1 老师突然告诉我们说 day2 回来参加月考,心态爆炸. day0 坐车,颓,和队爷zpd补了b站翻唱2017top100,晚上收 ...

  6. [Contest20180323]King

    跳蚤国王要召开第二届内阁会议,所以把所有跳蚤都召集到了会议室.所有跳蚤在会议室的圆桌前坐成了一个圈,从$1$到$n$标号,每人的面前都有一盏明灯. 就在会议就要开始的时候,国王突然发现,并不是所有的灯 ...

  7. 【动态规划】【记忆化搜索】CODEVS 3415 最小和 CodeVS原创

    f(l,r,i)表示第i段截第l位到第r位时,当前已经得到的价格最小值,可以很显然地发现,这个是没有后效性的,因为对之后截得的段都不造成影响. 注意水彩笔数=1的特判. 递归枚举当前段的r求解(∵l是 ...

  8. 【后缀数组】【二分答案】poj3261

    注意:对整型数组求sa时,s[n]请置成-1. 请离散化. 可重叠的 k 次最长重复子串(pku3261)给定一个字符串,求至少出现 k 次的最长重复子串,这 k 个子串可以重叠.算法分析:先二分答案 ...

  9. Java高级架构师（一）第13节：Spring MVC实现Web层开发

    package com.sishuok.architecture1.customermgr.web; import org.springframework.beans.factory.annotati ...

  10. Scala实战高手****第11课：Scala面向接口彻底实战和Spark源码鉴赏

    第一点: scala的接口trait中所有方法可以都被实现!! 这种情况一般会是一种工具方法的集合,例如接口 Logging! scala 多种继承用extends ... with  .... 在老 ...