目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)加载Javascript文件的;javascript在头部会阻止其他元素并行加载(css,图片,网页);这种机制的好处就是我们可以随意在页面上使用那种JS库中的函数,因为页面肯定是在JS加裁之后呈现的,但是缺点也非常明显:一旦此Javascript文件过大,或网络连接不稳定,整个页面就会被阻塞一段时间,甚至空白。javascript放在底部,这样就可以和图片几乎同时下载,让图片尽快的下载下来。也可以:立即--交互性优先的在顶部;延迟--交互性稍后的尾部。

另外一般大型的网站都会采取非阻塞方式加载Javascript来提高性能(降低页面加载时间),Steves 在他的博文中提到了几种方法,如使用iframe, 动态添加script节点等来并行下载javascript文件。不过目前用得最多的应该还是动态添加script节点的方法。

JS文件放在头还是尾的更多相关文章

  1. js文件如何最后加载

    总结一下,大概有三种方式 1.最简单粗暴的:将js文件放在最后写 2.window.onload当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而 ...

  2. springmvc web-info目录下无法引入的js文件无效

    今天在联系spring的时候而然遇到了个不起眼的问题.那就是在html或者说jsp页面中引用js文件的时候总是提示找不到路径.eclipse更是抛出 No mapping to aa.js. 我就奇怪 ...

  3. ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径

    在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示:

  4. HTML中引用外部JS文件失效原因

    今天在练习中碰到“引用外部的一个js文件但是却失效”的情况,实在不懂,百度后才知是引用的位置不对,错误的代码如下: <head> <meta charset="UTF-8& ...

  5. 由js文件中引入另外的js文件想到的

    1. html中,使用<script src="../static/js/xxx.js"></script>引入js文件.   2. 在js文件中,引入js ...

  6. 详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...

  7. 浏览器输入一个url的过程,以及加载完html文件和js文件的标志

    简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...

  8. flask-bootstrap 模版中所需的CSS/JS文件实现本地引入

    Flask-Bootstrap默认是加载CDN的css与js文件,每次刷新页面都要访问到外网的cdn来获取css与js文件; 模版扩展来自于bootstrap/base.html,就以bootstra ...

  9. C++-模板的声明和实现为何要放在头文件中

    源: http://blog.csdn.net/lqk1985/archive/2008/10/24/3136364.aspx 如何组织编写模板程序 发表日期: 1/21/2003 12:28:58 ...

随机推荐

  1. android mvvm初探

    目前google的databinding library还处在rc版,其中编译器发挥了主要作用.目前也只是在android studio开发环境中支持. mvvm能够大大降低模块间的耦合度,在开发过程 ...

  2. Visitor模式,Decorator模式,Extension Object模式

    Modem结构 Visitor模式 对于被访问(Modem)层次结构中的每一个派生类,访问者(Visitor)层次中都有一个对应的方法. 从派生类到方法的90度旋转. 新增类似的Windows配置函数 ...

  3. Leetcode 165 Compare Version Numbers

    题意:比较版本号的大小 有点变态,容易犯错 本质是字符串的比较,请注意他的版本号的小数点不知1个,有的会出现01.0.01这样的变态版本号 class Solution { public: int c ...

  4. AngularJS(一)

    什么是AngularJS[双向数据绑定:从界面的操作能实时反映到数据,数据的变更能实时展现到界面.]?1.AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Appl ...

  5. Java web实时进度条整个系统共用(如java上传进度条、导入excel进度条等)

    先上图: 这上文件上传的: 这是数据实时处理的: 1:先说说什么是进度条:进度条即计算机在处理任务时,实时的,以图片形式显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间,显示方式 ...

  6. solr python客户端 - solrpy

    solrPy 基础使用: 1)与solr建立连接 import solr s = solr.Solr('http://host:ip/solr/collectionName') 2)查询 r = s. ...

  7. Ubuntu 汉化及kate汉化和使用自带终端的解决方式

    汉化方法:1,打开屏幕上方的“system”(系统),里面有个“Administration”(系统管理),选择“Snaptic Package Manager”(软件包管理器),打开,输入密码后进入 ...

  8. Javascript 固定表格表头

    遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...

  9. 使用sphinx生成Python文档

    发现找不到matplotlib.sphinxext.mathmpl: 可以直接easy_install matplotlib,也可以去这里下载安装包 发现exception: matplotlib r ...

  10. Openvswitch原理与代码分析(3): openvswitch内核模块的加载

      上一节我们讲了ovs-vswitchd,其中虚拟网桥初始化的时候,对调用内核模块来添加虚拟网卡.   我们从openvswitch内核模块的加载过程,来看这个过程.   在datapath/dat ...