我们平时在页面上写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. kvm与qemu

    载请注明出处: http://www.openext.org/2014/04/kvmqemu/ http://blog.csdn.net/muge0913/article/details/245577 ...

  2. 查询select

    --------------select查询-------------------查询所有信息(方法一)select * from stuinfo --*号代表所有列--查询所有信息(方法二)sele ...

  3. boost------signals2的使用1(Boost程序库完全开发指南)读书笔记

    signals2基于Boost的另一个库signals,实现了线程安全的观察者模式.在signals2库中,观察者模式被称为信号/插槽(signals and slots),他是一种函数回调机制,一个 ...

  4. C#线程池用法

    C#线程池用法 在C#编程语言中,使用线程池可以并行地处理工作,当强制线程和更新进度条时,会使用内建架构的ThreadPool类,为批处理使用多核结构,这里我们来看在C#编程语言中一些关于来自Syst ...

  5. [转]Native Java Bytecode Debugging without Source Code

    link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

  6. 序列化json对象，通过ajax传入asp.net mvc后台

    序列化json对象,通过ajax传入asp.net mvc后台 序列化json对象,通过ajax传入asp.net mvc后台   今天遇到一个问题,准备把组织好的json对象通过jquery.aja ...

  7. Web Api初试

    Web Api初试 前言 ASP.NET Web API 与之前的内建HTTP服务解决方案的不同之处在于,它一开始就是围绕HTTP协议及其消息语义构建起来的.与WCF REST或ASP.NET AJA ...

  8. ASP.NET Web API下的HttpController激活：程序集的解析

    ASP.NET Web API下的HttpController激活:程序集的解析 HttpController的激活是由处于消息处理管道尾端的HttpRoutingDispatcher来完成的,具体来 ...

  9. 一步一步深入spring(7)-- 整合spring和JDBC的环境

    1.配置数据源 (1).添加支持数据源的jar包commons-dbcp.jar .commons-pool.jar 当然也要添加其他的spring用到的jar以及这里用到的数据库mysql的jar ...

  10. Bitmap的读写

    Bitmap的读写和几个小儿科的滤镜效果~ 闲来玩玩图像处理,拿破仑说过:“不想自己实现滤镜的美工不是好程序员~~#@!*^...#&!@......”  因为在学校做过很多美工的工作,而且从 ...