按照我们的书写习惯,我们通常把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标签的位置呢?
Good Question,我一般都放底部,原因同你所说。
但在某种情况下我也觉得放在头部比较好,比如一个给页面中的某个元素添加了事件的js脚本。页面出来了但是js没加载完的那段时间,用户对此元素做事件操作的时候就出不来应该有的效果。
我现在是比较倾向于放在头部,做一些优化的工作尽量让js加载快一点。
再听听其他人怎么说吧
最近的做法是写个 load.js 放在最上面
需要立即执行的就直接扔在 html 结构后面
通用的脚本引用统一放在页脚由 js load 载入
一个示例如下
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>
元素中。如:这种做法就是把所有的外部文件(包括CSS和JS)的引用都放在相同的地方。可是文档的
<head>
包含所有JavaScript文件则意味着必须等到所有JavaScript代码下载、解析、执行完以后才呈现网页的内用,这无疑会导致浏览器在呈现页面时出现明显的延迟,为了避免这个问题,现代Web应用程序一般全部JavaScript放到<body>
元素中。HTML4.0.1(垃圾的IE6也支持)为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响也页面的构造。也就是说脚本会延迟到整个页面都解析完才执行。
视具体情况而定吧,有关网页加载性能的细节因素。
不是必须放在前面的尽量放在后面,这样让页面元素先加载完成。用户体验好一点。