我们平时在页面上写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. [译]ava 设计模式之构造器

    (文章翻译自Java Design Pattern: Builder) 构造器模式的关键之处在于它使用一步接招一步的流程去构建东西,例如:尽管构建的每一步是不相同的但是每一个产品还是遵循相同的流程. ...

  2. avalonJS入门（一）

    前端神器avalonJS入门(一) posted @ 2014-10-31 17:44 vajoy 阅读(1665) 评论(32) 编辑 收藏   avalonJS是司徒正美开发和维护的前端mvvm框 ...

  3. nagios 安装和配置（含有nrpe结束）所有 （两）

    二.ndoutils 安装: 1.mysql安装(若未安装) #apt-get install mysql-servermysql-client 2.DBI安装(若未安装) #cd /usr/loca ...

  4. 【转】android动画之Tween动画 (渐变、缩放、位移、旋转)

    原文:http://blog.csdn.net/feng88724/article/details/6318430 Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的 ...

  5. NServiceBus 概况

    NServiceBus 概况 NServiceBus 概况 NServiceBus 被设计用来组合面向业务的服务,它并不是用来替代诸如 WCF 一类的RPC技术. NServiceBus 不只包含通信 ...

  6. ShopEx4.8.5.55328破解版

    ShopEx4.8.5.55328最新版完美破解版 http://club.1688.com/article/30369057.html?domainid=lhy16868 ShopEx4.8.5.5 ...

  7. [置顶] android调用第三方库——第四篇——调用多个第三方库

    0:前言: 在前面三篇中我们介绍了android调用第三方库的形式,在这一篇中我们介绍调用多个第三方库的Android.mk的写法,由于其他三篇介绍的很详细,这里只给出Android.mk的内容. ［ ...

  8. mongo查询某个字段是否存在，并删除记录里的这个字段

    查询course表中,存在lectures_count字段的记录信息 db.course.find( { "lectures.lectures_count": { $exists: ...

  9. 使用Entity Framework 4进行代码优先开发

    [原文地址]Code-First Development with Entity Framework 4   .NET 4随带发布了一个改进版的Entity Framework(EF)- 一个位于Sy ...

  10. 大IT公司笔试

    都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...