在使用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. (2)创建发布Maven

    一.创建maven项目 (1)命令行 mvn archetype:generate (2)选择模板默认是7 (3)输入组织号.项目名称及版本号.包名 回车确认 创建成功 二.转成idea项目 进入跟目 ...

  2. 用JDBC操作MySQL——获取表的大小

    JDBC中获取MySQL我们有时需要获得表的大小,这包括了表的行数和列数,我们可以分别用以下的方法得到: 假设我们得到了一个ResultSet对象rs,则操作如下: 读取结果集前获取行数: rs.la ...

  3. 1、Django实战第1天：建立项目mxonline

    工具版本: python3.6.3 django1.9.8 安装工具 mkvirtualenv --python="C:\Python36\python.exe" mxonline ...

  4. 算法-插入排序(Insertion sorting)

    本文由@呆代待殆原创,转载请注明出处. 简介:这是一个比较算法,形象的描述插入算法就和我们玩扑克的时候我们排列手牌的方式是一样的,最开始我们手上什么都没有,然后我们每摸一张牌就把它插入到正确的位置,直 ...

  5. 【kruscal】【最小生成树】【离线】洛谷 P2266 爱的距离

    建图:每个点向它四周的点连边权为两点点权的差的绝对值的边. 由于有多个需要“施法”的点,所以相当于对每个这样的点,询问与它的距离在T以内的最长边的最小值,即多次询问. 最长边最小之类的,肯定是最小生成 ...

  6. openresty的ngx.timer.at

    openresty的ngx.timer.at真是个强大的方法. 例如某些函数不可以在一些NGINX的执行阶段使用时,可以ngx.timer.at API 创建一个零延迟的timer,在timer中去处 ...

  7. React Native 让组件做到局部刷新

    利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...

  8. C#测试程序运行时间

    一.用C#自带的StopWatch函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 using System; usi ...

  9. FindFirstVolume系列函数遍历驱动器，获取驱动器信息

    什么是“卷”?卷,又称为“逻辑驱动器”,是 NTFS, FAT32 等文件系统组织结构的最高层.卷是存储设备(如硬盘)上由文件系统管理的一块区域,是在逻辑上相互隔离的存储单元.一个磁盘分区至少包含一个 ...

  10. 我的vim配置---jeffy-vim-v2.3.tar

    http://files.cnblogs.com/pengdonglin137/jeffy-vim-v2.3.rar 使用方法: 在Linux下,解压后,进入解压后的目录,执行./install.sh ...