目前绝大部分的浏览器都是采取阻塞方式(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. paip.hibernate save 失败的解决

    paip.hibernate save 失败的解决   打开log  debug  level,,看不见insert 代码...     Hibernate select max(ID).txt   ...

  2. 聊聊 App Store 的产品和推广运营攻略

    在这个工匠的时代,越来越多开发者投入了手机应用的开发圈子.如何才能在激烈的竞争中脱颖而出,少走弯路呢?我们跟空中网负责iPhone游戏的运营和推广的洪亮进行了一次交流,得到了不少经验和诀窍,值得分享给 ...

  3. Hibernate入门6.Hibernate检索方式

    Hibernate入门6.Hibernate检索方式 20131128 代码下载 链接: http://pan.baidu.com/s/1Ccuup 密码: vqlv Hibernate的整体框架已经 ...

  4. 曲率已驱动了头发——深度分析谷歌AlphaGo击败职业棋手

    这篇是我们自开设星际随笔以来写得最长的一篇.我们也花了不少力气.包括把那5盘棋各打了两遍的谱,包括从Nature官网上把那篇谷歌的报告花了200元下载下来研究它的算法(后来发现谷 歌网站上可以免费下载 ...

  5. WHY翻写NEHE与红龙的3D图形程序 [开源]

    个人认为学习3D图形程序开发,有两套经典教程.D3D的<D3D游戏开发编程基础>也就是红龙那本书.OpenGL的NEHE教程.为向经典致敬,将我之前翻写他们的程序开源. 我所做的工作是将其 ...

  6. 使用Dezender对zend加密后的php文件进行解密

    在开发中需要修改一些php文件,部分是通过zend加密的,记事本打开之后是这样的: 此时需要使用Dezender进行解密,下载链接如下: Dezender.7z 下载后解压到C盘(路径不要带有中文), ...

  7. JSP 处理汉字信息

    request 对象获取客户端提交的汉字字符时,会出现乱码问题,所以对含有汉字字符的信息必须进行特殊处理.将获取的字符串用 ISO-8859-1 进行编码,并将编码存放到一个字节数组中,再将这个数组转 ...

  8. Javascript 严格模式

    简介 严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,你无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象等. 声明严格模式 可以通过在文件.程序或函数的开头添加 ...

  9. [Scheme]一个Scheme的Metacircular evaluator

    这个解释器可以用来跑前面两篇文章的例子,所以一并扔出来,三部曲哈哈. Lisp内置的S-expression相当于解析好的语法树,而借助quasiquote和unquote又很容易进行语法树层面的变换 ...

  10. LCLFramework框架之Service模式

    Service模式介绍 领域中的一些概念不太适合建模为对象,即归类到实体对象或值对象,因为它们本质上就是一些操作,一些动作,而不是事物.这些操作或动作往往会涉及到多个领域对象,并且需要协调这些领域对象 ...