在 HTML 页面中插入一段 JavaScript:

这句话可能大家一开始根本不了解JavaScript,是什么?

在我的了解中JavaScript并不是用java语言开发的,人家用的是c语言和另外一种语言的结合体,就像印度和印度尼西亚根本不是同一个地方。

在页面中插入脚本,意味着页面可以实现更多的和用户交互的内容,更高级

<script type="text/javascript">
document.write("Hello World!")
</script>

这段代码在HTML中可以插入到你想要的指定位置,意味着页面执行时一行一行扫描下来的时候,到底是先执行脚本语句还是先执行html语句是由代码编写者来决定的。

<script></script> 标签用于定义客户端脚本,比如:上面的是这段代码,写在html 内部发挥作用,也可以通过 src 属性插入外部脚本文件(xxx.js)

延迟执行脚本

HTML的操作是单线操作的,当一行一行扫描代码的时候一旦触碰到脚本语句就会先去执行脚本语句的内容,执行结束后再解析下一行HTML内容。但是有时候,我们可能需要让HTML文档先完成解析,最后再执行脚本…,也就是说将整个网页的DOM对象执行一遍后,再执行中间嵌入的脚本,因此我们只需要在<script type="text/javascript" src="xxx.js" defer ></script> 属性中引入defer属性对其延迟执行即可,不过需要注意的一点是,defer属性只能用于外部脚本文件,对文档直接内嵌根本不起作用

异步执行脚本

上面说到HTML的操作是单线操作的,如果说为了执行脚本就暂停加载对用户的体验无疑使非常差的,因此可以<script type="text/javascript" src="xxx.js" async ></script> 引入async属性,用于告诉浏览器该脚本可以异步执行,因此HTML的解析就不会停下来等待,因为HTML解析的过程是怎么的呢?先是获取脚本,CPU再执行脚本,但是获取脚本的时候CPU并没有执行,相当于空闲出来了。同样async属性只能用于外部脚本文件,对文档直接内嵌根本不起作用

当浏览器不支持JavaScript的时候

HTML <noscript></noscript> 标签,因为有些老老老版本的确不支持JavaScript,或者不小心在浏览器设置中关闭了

<body>......<script type="text/javascript"><!--document.write("Hello World!")//--></script><noscript>Your browser does not support JavaScript!</noscript>......
</body>

在谷歌浏览器的 高级–>内容设置/网站设置–>JavaScript–>屏蔽


HTML的script标签相关推荐

  1. HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim ...

  2. Script标签的async和defer

    之前有写过HTML页面渲染过程,知道了JavaScript是会阻塞DOM解析的,所以我们会把script标签放到底部防止阻塞HTML解析.其实script还有两个属性,async和defer,也是可以 ...

  3. script标签的defer属性

    defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了. 如果您的脚本不会改变文 ...

  4. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...

  5. vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例

    VUE渲染后端返回含有script标签的html字符串示例 发布时间:2020-09-14 23:37:52 来源:脚本之家 阅读:207 作者:冷幽悠 在接入支付宝支付模块的时候,支支返回的是一个f ...

  6. html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 1 2 3 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Contr ...

  7. script标签属性sync和defer

    <script src="a.js" defer></script> 加了defer属性script标签的页面,运行流程如下: 1.浏览器开始解析HTML页 ...

  8. 面试小记---外部脚本必须包含 script 标签吗?

    外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...

  9. script标签中的async和defer

    在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...

  10. 用手动创建新的script标签的方式,实现JavaScript脚本的异步加载

    代码第四行里新建一个script标签页,在第8行的回调函数onreadystatechange里,根据属性readyState判断当前标签页的状态,如果为loaded或者complete,说明脚本加载 ...

最新文章

  1. 2022-2028年中国输配电设备全产业链投资分析及前景预测报告
  2. Linux上程序调试的基石(1)--ptrace
  3. spring之Environment
  4. Android培训翻译_允许其他应用程序启动你的Activity
  5. 崛起于Springboot2.X之Mysql读写分离(6)
  6. 应届毕业生到底签不签三方协议好?
  7. 思科软件服务器怎么作用,TFTP 服务器的选择和使用
  8. axure rp10安装教程,axurerp10安装步骤
  9. CentOS7系统中:安装tree命令的问题
  10. python round用法_Python round 函数
  11. android 华为 imei,华为手机EMUI系统查看S/N IMEI/MEID 产品识别码的方法
  12. 什么东西能帮助睡眠?曾经五年睡不好觉的朋友在用几个东西
  13. 有关Android导览(Android Navigation component)
  14. Graphics Layer Tree创建
  15. ERP-项目笔记—Day—08
  16. CMMI 3级18个过程域
  17. 2022已加载100%,请查收!
  18. poi操作ppt图表史上最完整示例演示
  19. Chrome OS与Windows
  20. 赵小楼《天道》《遥远的救世主》深度解析(73)你认为的玄幻不可描述的事物都是有其理法可循,认识了理法,玄也就不玄了

热门文章

  1. Linux部署Apache ActiveMQ 5.14.1
  2. java实现 阿拉伯数字转换为汉字数字 算法
  3. UVa 1225 Digit Counting
  4. 利用JasperReport+iReport进行Web报表开发
  5. autotools入门笔记(一)
  6. 金山笔试题-字符串排序 : 写一个函数,实现对给定的字符串(字符串里面包括:英文字母,数字,符号)的处理...
  7. dubbo-快速入门-分布式RPC框架Apache Dubbo
  8. 操作系统学习笔记目录(暂时不全223)
  9. php task todolist,Todolist--(4)登录
  10. 计算机涉及数学知识点,初二数学知识点归纳