JS代码引用位置问题-转

看到很多JS代码全部放在head中的情况,其实这是个细节问题。转载一个知乎用户于江水的答案:

作者:于江水
链接:https://www.zhihu.com/question/34147508/answer/63469443
来源:知乎

浏览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候,会阻塞其他资源的加载。这是因为 JS 可能会有 DOM 、样式等等操作,所以浏览器要先加载这段 JS 并执行,再加载放在它后面的 HTML、CSS。

因此,加入一段巨大的 JS 放在最上面,浏览器首先要下载并执行,这段时间里面,页面是空白的。相比于加载了部分 HTML 和 样式 但是没有 JS 交互功能,显然是后者对于浏览者体验要好。

然而,是否所有 JS 都要放在最下面呢?并不是。

举实际的例子:

html5shiv是一段 JS 脚本,用来是早期 IE 兼容 HTML5 新增标签的支持。

这个 JS 脚本,必须要放在上面 head 部分,为什么呢?因为在老 IE 浏览器下面,不支持 <section> 这样的标签,所以用 JS 来兼容。如果放在底部,等 IE 浏览器先报错了,才会执行这块 JS 没多大用。

jQuery 这类的库,也是建议放在最上面的。首先最大的疑问可能是 jQuery 这么大,放在上面岂不是阻塞的很厉害?

不过 jQuery 通常引用的是 CDN 地址,而且经过 gzip 压缩之后并不是很大,而且引用公共 CDN 上面的 jQuery 话,很大几率早已被用户缓存下来了。所以可以不需要考虑阻塞产生的性能问题。

而我们都知道,JS 是按顺序执行下来的。也就是你没运行 jQuery 之前,先运行了调用 jQuery 函数的代码,就会报错。你可以控制你自己写的 JS 放在页面最下面,放在 jQuery 下面,但是你无法保证页面上其他地方会不会有人图省事直接在 HTML 代码里面输出 JS。如果有,那么就会报错。

所以我建议,类库放在上面加载,其余代码尽可能放在最底下加载。

时间: 2024-10-12 08:45:05

JS代码引用位置问题-转的相关文章

JS代码的位置与事件响应代码块的封装问题

JS代码的位置 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分.   放在<body>部分JavaScript代码在网页读取到该语句的时候就会执行. ? 注意 Javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后

JS代码的位置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 外部JS--> <script type="text/javascript" src="test.js"> alert('内部JS'); //引人了外部JS

1在html中添加js代码的三种方式

1.第一种方式:在时间句柄后太假js代码: 例如浏览器弹出对话框; 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content=&qu

JS代码存放的位置

方式一:直接在HTML网页中编写JS代码,直接使用<script></script>标签包裹起来,可以放在html里面的任何位置,推荐放在<head></head>区域中.该方式JS代码冗余,不利于程序的维护 方式二:单独编写一个js文件(.js),在使用的html/jsp中通过<script src="index.js"> </script>标签引入该技术文件,该方式实现了js代码和HTML页面的分离,有利于程序

JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面

js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

一.想要实现eCharts线状图表的断点效果,如图 这种效果,在设置数据的时候应该是这样: data:[, 2, 3, , 5, 6, 7]:但是想要动态添加数据,实现方式有两种 1.拼接字符串法:var str='[, 2, 3, , 5, 6, 7]';var arr=eval(str); 2.改变数组长度法: var arr=[]; for(var i=1;i<8;i++){ if(i==1||i==4){ arr.length=arr.length+1; continue; }arr.p

JS 代码调试经验总结(菜鸟必读)

前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug. 在长期解答 zTree 相关问题时,也的确发现很多的问题其实不算什么问题,仅仅是编程者不会调试造成的,通过自己日常工作观察,这里

JS代码大全 (都是网上看到 自己整理的)

原文 JS代码大全 (都是网上看到 自己整理的) 事件源对象 event.srcElement.tagName  event.srcElement.type 捕获释放 event.srcElement.setCapture();   event.srcElement.releaseCapture(); 事件按键 event.keyCode  event.shiftKey  event.altKey  event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event

百度判断手机终端并自动跳转uaredirect.js代码及使用实例

百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你想跳转的位置. js代码如下: function uaredirect(f) { try { if (document.getElementById("bdmark") != null) { return } var b = false; if (arguments[1]) { var e = window.location.host; var a = window.location.