phpstudy集成环境

 首页 > javascript标签到底是应该放在头部还是尾部

javascript标签到底是应该放在头部还是尾部

按照我们的书写习惯，我们通常把javascript标签放到头部，比如这样

<html>
    <head>
        <script type="text/javascript" src="http://s..com/js/jquery.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

但是也有一说，由于html中的js是按顺序加载的，如果js没有加载就会阻塞后面的html加载，所以考虑到网页载入流畅，应该把javascript放到最后面。

那么应该按照什么原则来放置js标签的位置呢?

视具体情况而定吧，有关网页加载性能的细节因素。
不是必须放在前面的尽量放在后面，这样让页面元素先加载完成。用户体验好一点。

你这个问题啊，我的印象笔记录过相关资料，复制过来给你看看，忘了是那本书摘录的
按照惯例，所有<script>元素都要放在页面的<head>元素中。如：

<html>
<head>
    <script type="text/javascript" scr="example.js"></script>
</head>
<body>
</body>
</html>

这种做法就是把所有的外部文件（包括CSS和JS）的引用都放在相同的地方。可是文档的<head>包含所有JavaScript文件则意味着必须等到所有JavaScript代码下载、解析、执行完以后才呈现网页的内用，这无疑会导致浏览器在呈现页面时出现明显的延迟，为了避免这个问题，现代Web应用程序一般全部JavaScript放到<body>元素中。

<html>
<head>
</head>
<body>
    <script type="text/javascript" scr="example.js"></script>
</body>
</html>

HTML4.0.1（垃圾的IE6也支持）为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响也页面的构造。也就是说脚本会延迟到整个页面都解析完才执行。



<html>
<head>
</head>
<body>
    <script type="text/javascript" defer="defer" scr="example.js"></script>
</body>
</html>

使用requireJS,在head里面添加一个标签。剩下的由requireJS完成异步加载。

Good Question，我一般都放底部，原因同你所说。
但在某种情况下我也觉得放在头部比较好，比如一个给页面中的某个元素添加了事件的js脚本。页面出来了但是js没加载完的那段时间，用户对此元素做事件操作的时候就出不来应该有的效果。
我现在是比较倾向于放在头部，做一些优化的工作尽量让js加载快一点。
再听听其他人怎么说吧

立即||交互性优先的顶部..
延迟||交互性稍后的尾部..

放在前面后面看自己习惯吧~
优化的话主要是根据js内容决定。
关于解析中阻塞的问题，这里有个个人认为介绍的比较清楚的资料。感兴趣可以看一下。http://www.everbox.com/f/r63bxelyxY9L...
由李晶(拔赤) 大牛制作的ppt，来源：淘宝北京UED共享

最近的做法是写个 load.js 放在最上面
需要立即执行的就直接扔在 html 结构后面
通用的脚本引用统一放在页脚由 js load 载入

一个示例如下

GLOBAL_VAR.load(['require.js', 'function1.js', 'fn2.js'], callback);

load 这个方法其实就是在 domReady 之后很挫的往 head 里插 <script src="require.js"> 这样就不会有脚本阻塞了
再根据约定(require.js 内必须为 GLOBAL_VAR['require'] = ... 唔, 其实有一个 GLOBAL_VAR.add 专门来处理 )来检查 GLOBAL_VAR.require 对象是否存在之后再去调用 callback

【热门文章】
【热门文章】