我们平时在页面上写JS 是放在头部<head>中呢 还是放到body 最下面 能更优化？

查了一番资料，推荐 放在页面底部如：

<html>

    <head>

        <title>My awesome page</title>

        <!-- CSS -->

        <link rel="stylesheet" type="text/css" href="...">

        <link rel="stylesheet" type="text/css" href="...">

        <link rel="stylesheet" type="text/css" href="...">

        <link rel="stylesheet" type="text/css" href="...">

    </head>

    <body>

        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script type="text/javascript" src="..."></script>

        <script type="text/javascript" src="..."></script>

        <script type="text/javascript" src="..."></script>

    </body>

</html>

WHY？

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. More...

CSS

A little bit off-topic, but... Put stylesheets at the top.

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. More...

参考：

http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file

https://developer.yahoo.com/performance/rules.html#js_bottom=

JS 脚本应该放在页面哪个位置 head body foot的更多相关文章

  1. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  2. 不支持javascript的浏览器将JS脚本显示为页面内容

    不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...

  3. js脚本语言在页面上不执行

    转换原理:// 编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.(将脚本编码) // 解码原理是将字符串赋給容器的innerHTML,再取innerText或text ...

  4. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  5. js脚本都可以放在哪些地方

    js脚本应该放在页面的什么地方 1.head部分 包含函数的脚本位于文档的 head 部分.这样我们就可以确保在调用函数前,脚本已经载入了. 2.body部分 执行位于 body 部分的脚本. 3.外 ...

  6. 无阻赛的脚本(js脚本延迟方法)

    js脚本的加载与执行 1.延迟脚本(defer属性) 带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(on ...

  7. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  8. 动态加载JS脚本的4种方法

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  9. selenium webdriver学习（三）------------执行js脚本

    selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver   在用selenium 1.X的时候常常会用到getEval() ...

随机推荐

  1. Nancy学习

    Nancy学习 一.认识Nancy 今天听讲关于Nancy框架的培训,被Nancy的易用性所吸引.故晚上回来梳理了一下知识. 什么是Nancy呢?如标题所述,Nancy是一个轻量级的独立的框架: Na ...

  2. Spring IOC之依赖

    一个标准的企业级应用不只有一个对象组成.即使是最简单的引用也会有个相互作用的对象以使最终呈现 在用户面前的是个连贯一致的引用. 1依赖注入 依赖注入(DI)是一个对象定义他们依赖的过程,也就是说他们一 ...

  3. 实例学习SSIS（三）--使用包配置

    原文:实例学习SSIS(三)--使用包配置 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SSIS(四)- ...

  4. 校验、AJAX与过滤器

    随笔- 65  文章- 1  评论- 343  ASP.Net MVC开发基础学习笔记:四.校验.AJAX与过滤器   一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations( ...

  5. android 背景图片的设置

    在java文件中对控件设置背景图片 layout.setBackgroundDrawable(getResources().getDrawable(R.drawable.bgimage)) 在设置中, ...

  6. 如何用VB获得Windows各类系统目录

    现在有很多关于如何用VB获得Windows目 录的文章,但大都只讲到如何获得Windows目录和System目录,有时候我们却需要获得像"我的文档"这样的目录("我的文档 ...

  7. JS中的prototype（转载）

    在研究别人写的js图像处理算法时,发现其中脚本中大量使用prototype,很难读明白,就网上查了下资料发现这篇文章很易懂,就转载如下: 1 原型法设计模式 在.Net中可以使用clone()来实现原 ...

  8. ASP.Net中应用百度编辑器（UEditor)上传图片和上传附件失败-解决方案

    第一步: 第二步: 第三步: 第四步:

  9. 用C++进行简单的文件I/O操作-转自VC知识库

    原文请见 http://www.vckbase.com/index.php/wv/1158 序论 我曾发表过文件输入输出的文章,现在觉得有必要再写一点.文件 I/O 在C++中比烤蛋糕简单多了. 在这 ...

  10. Effective C++(12) 复制对象时要复制每一个成员

    问题聚焦: 负责拷贝的两个操作:拷贝构造函数和重载赋值操作符. 一句话总结,确保被拷贝对象的所有成员变量都做一份拷贝. Demo   void logCall(const std::string&am ...