html - javascript标签到底是应该放在头部还是尾部
PHP中文网
PHP中文网 2017-04-10 12:41:15
0
7
1151

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

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

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

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

PHP中文网
PHP中文网

认证0级讲师

모든 응답(7)
左手右手慢动作

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

洪涛

最近的做法是写个 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

左手右手慢动作

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

洪涛

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

阿神

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

巴扎黑

你这个问题啊,我的印象笔记录过相关资料,复制过来给你看看,忘了是那本书摘录的
按照惯例,所有<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>
刘奇

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿