2.对于script标签的放置位置
使用<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标签的放置位置的更多相关文章
- 【JavaScript性能优化】------理解Script标签的加载和执行
1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...
- javascript标签放置位置
首先:放置位置哪里都能放 但是js代码很有可能不起作用:例如:往id为span的标签中定时插入数字 var time=document.getElementById("span") ...
- script标签的位置
1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...
- JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
- script标签引入脚本的引入位置与效果
用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...
- 关于css,js放置位置的问题
一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...
- JS函数动作分层结构详解及Document.getElementById 释义 js及cs数据类型区别 事件 函数 变量 script标签 var function
html +css 静态页面 js 动态 交互 原理: js就是修改样式, 比如弹出一个对话框. 弹出的过程就是这个框由disable 变成display:enable. 又或者当鼠标指向 ...
- <script>标签应该放到</body>标签之前
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:贺师俊 链接:http://www.zhihu.com/question/20027966/answer/13727164 ...
- JS之script标签
1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...
- js中的script标签
在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...
随机推荐
- MSSQL执行超大.sql脚本
1.打开mssql安装路径:找到Microsoft SQL Server Management Studio的图标,点击右键属性>打开文件位置 2.在安装路径下打开cmd控制台 3.输入命令: ...
- Python条件语句和基本数据类型
1.if基本语句 if 条件: 内部代码块 else: ...... 2.if支持嵌套 if 1 == 1: if 2 == 2: print('走一步') else: print('走两步') el ...
- version libcrypto.so.10 not defined in file libcrypto.so.10 with link time reference
I have installed IC618 latest version. But, after installation when I fire virtuoso I see following ...
- vi 自增
(1). 建立第一个列表项.确保它以数字开始.(2). qa - 用寄存器 'a' 开始记录(3). Y - 抽出这个列表项(4). p - 把该项的一个副本放置在下一行上(5). CTRL-A - ...
- Kubernetes--Pod节点选择器nodeSelector(标签)
Pod节点选择器是标签及标签选择器的一种应用,它能够让Pod对象基于集群中工作节点的标签来挑选倾向运行的目标节点. Kubernetes的kube-scheduler守护进程负责在各工作节点中基于系统 ...
- 存储单位bit、byte、KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB、CB、XB
bit(binary digit)比特,这是表示信息的最小单位,它只能表示 0 或 1. byte(字节),其表示的值范围是0~255(无符号) 或 -127~127(有符号),1 byte = 8 ...
- SQL Server FOR XML EXPLICIT 一步步学习
查看网址:https://www.itdaan.com/blog/2015/05/05/510cd42eb587c98bcd25ef0e5b687fd1.html
- Win10官方1909版本无法打开windows安全中心中病毒和威胁防护的实时保护解决方案。
进入手痒难耐,将电脑操作系统重新安装了win10 专业工作站版 1909版,但是装完软件激活后,发现windows安全中心的"病毒和威胁防护"中的所有项目都是关闭的,试着重新安装也 ...
- java常用开发学习网站列表
持续更新中 kettle国内镜像下载 版本 地址 7.1版本 http://mirror.bit.edu.cn/pentaho/Data%20Integration/ 8.2版本 http://mir ...
- 排查前端接受后端的map产生的字段错误
报错内容 [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateProcessingExce ...