使用<script>元素有两种方式 一种是在页面嵌入JavaScript代码 ，一种就是包含外部JavaScript文件

包含在<script>标签内部的JavaScript代码将被从上至下依次解释

<script type="text/javascript">

var h = "hello";

function sayh(params) {

alert(h);

}

sayh();

</script>

按这个例子来说，解释器会解释一个函数的定义，然后将定义保存在自己环境里，在解释器对<script>标签内部的

所有代码求值前，页面其余内容不会被浏览器显示

所以 虽然<script>标签可以head ，body ，body 后面。但是没有必要需求的话，

因为html是顺序执行，所以放在head里面 如果JavaScript脚本很大，会影响网站打开速度

如果放在body里面 效果是先把网站内容展现后，再加载JavaScript脚本，所以用户会感觉网站加载很快

而放在body后面是把页面内容全部加载后再运行JavaScript脚本，这样如果JavaScript需要改变DOM的话，就会出现一瞬间的闪烁，

所以一般都把全部JavaScript引用放在<body>元素中页面内容的后面。但是我更推荐使用async属性

异步下载JavaScript脚本

使用方法是

<script type="text/javascript" src="脚本路径" async></script>

这样使用意味着不会阻塞页面的正常渲染

JavaScript脚本很小的情况下，放哪里都无所谓的.

所以 async>body>head

还有在使用<script>标签时需要正确的使用闭合标签，这样是防止xss 跨站脚本

2.对于script标签的放置位置的更多相关文章

  1. 【JavaScript性能优化】------理解Script标签的加载和执行

    1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...

  2. javascript标签放置位置

    首先:放置位置哪里都能放 但是js代码很有可能不起作用:例如:往id为span的标签中定时插入数字 var time=document.getElementById("span") ...

  3. script标签的位置

    1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...

  4. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  5. script标签引入脚本的引入位置与效果

    用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...

  6. 关于css,js放置位置的问题

    一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...

  7. JS函数动作分层结构详解及Document.getElementById 释义 js及cs数据类型区别 事件 函数 变量 script标签 var function

    html +css 静态页面 js     动态 交互   原理: js就是修改样式, 比如弹出一个对话框. 弹出的过程就是这个框由disable 变成display:enable. 又或者当鼠标指向 ...

  8. <script>标签应该放到</body>标签之前

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:贺师俊 链接:http://www.zhihu.com/question/20027966/answer/13727164 ...

  9. JS之script标签

    1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...

  10. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

随机推荐

  1. flask-基础篇03 RESTful

    一.起步: Flask-RESTful 是用于快速构建REST API 的Flask扩展 1.安装RESTful pip install flask-restful 2.Hello World示例 f ...

  2. PHP_工厂模式

    实例化类,先需要引入类文件,但是有时候我们并不知道可能要用到那些类,如果将所有类文件全部引入,会造成资源浪费,这时候可以采用工厂模式,专门用于 自动加载.实例化 类. 实例代码: 注:案例中假设有一个 ...

  3. android defaluthttpclient timeout 整理

    android defaulthttpclient 超时无效的相关解放方式记录: With the marked solution I am still getting a UnknownHostEx ...

  4. 新装Eclipse运行Java程序报错Exception in thread "main" java.lang.UnsupportedClassVersionError

    错误现象:   Exception in thread "main" java.lang.UnsupportedClassVersionError: views/LoginFram ...

  5. Linux命令-df

    场景: df -h查看磁盘信息 /dev/mapper/rl-root 96% du -h --max-depth=1 命令代表寻找当前目录,哪个文件夹占用空间最大,进入根目录: [root@loca ...

  6. 004 jmeter断言、集合点、函数、分布式

    1.断言 *定义:断言就是让程序代替人工去判断程序响应数据是否达到预期结果. *断言可以检查返回数据的正确性与完整性 *常见的断言 *响应断言(断言状态码+断言文本值)哪个接口需要断言就在哪一个接口后 ...

  7. 《__cplusplus修饰符的作用：C和CPP接口互相调用时候，编译没问题，链接提示未定义问题》

    关于__cplusplus修饰符说明如下: __cplusplus是cpp中的自定义宏,那么定义了这个宏的话表示这是一段cpp的代码,也就是说,上面的代码的含义是:如果这是一段cpp的代码,那么加入e ...

  8. 问题记录_IDEA版本2021.2.3_debug时变量显示不全(只显示线程附近部分)

    问题记录_IDEA版本2021.2.3_debug时变量显示不全(只显示线程附近部分) 起因 把IDEA的版本从2019升级到了2021.2.3,在debug的时候发现变量的值能看到的很少,并不像20 ...

  9. [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')

    相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把  <head />  ...

  10. [部署日记]Android Studio在安装完后，sdk依旧提示SDK emulator directory is missing

    问题起源: 今天在闲着没事搞了个go的rest-api,用postman测试了一下可行,于是一拍大腿决定写一个安卓手机程序,于是一拍大腿重新下载了卸载没多久因为没空间放原神的Android Studi ...