我们平时在页面上写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. Android Studio之同一应用创建多个Activity（一）

    1. 2. 3. 4. 本文主要是构建多个Activity的过程.

  2. Mike and Feet（CF 547B）

    Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. android gps开发必备资料(含测试demo下载)

    入门资料参考: How accurate is Android GPS? Part 1: Understanding Location Data How accurate is Android GPS ...

  4. .net平台下socket异步通讯（代码实例）

    你应该知道的.net平台下socket异步通讯(代码实例) 1,首先添加两个windows窗体项目,一个作为服务端server,一个作为客户端Client 2,然后添加服务端代码,添加命名空间,界面上 ...

  5. Ajax+Ashx实现以及封装成控件的实现

    asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现) 工作好长时间了,这期间许多功能也写成了不少的控件来使用,但是,都只是为了代码的结构清析一些而已.而这 ...

  6. ps -aux中的time 的意思

    ps -aux 显示所有包含其他使用者的行程 aux 输出格式 : USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND USER: 行程拥有者 ...

  7. 圆形头像以及一些常见需求形状自定义ImageView组件

    在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,lib和demo下载地址:https://github.com/mapl ...

  8. sql 通过存储过程和自定义类型批量新增数据

    1,建立存储过程 create PROCEDURE [dbo].[p_Company_Insert] @CompanyCollection [CompanyTableType] READONLY AS ...

  9. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  10. C# 操作 Excel 常见问题收集和整理

    C# 操作 Excel 常见问题收集和整理(定期更新,欢迎交流) 经常会有项目需要把表格导出为 Excel 文件,或者是导入一份 Excel 来操作,那么如何在 C# 中操作 Excel 文件成了一个 ...