HTML中的script标签--读书笔记

在HTML中使用JavaScript

• 浏览器执行JavaScript代码几个现象

  1. 在代码执行完成前，页面中的其余内容不会被浏览器加载或者显示，会阻断页面显示

     <script>
       alert("hello");
     </script>
     <p> Testing</p>
     

     通过上面代码发现，只有按下确定后,弹框关闭，才会显示Testing

  2. 浏览器遇到字符 " ",时候，会认为是结束标签

     <script>
       console.log("Hello </script>");
     	//使用转义
     	console.log("</script>");//script
     </script>
     

     我们发现显示页面显示了，“）；.明显JavaScript代码被截断了。

• script中的异步和延迟

  1. async 表示不让页面等待脚本的下载和执行，从而异步加载页面的其他内容，但不妨碍页面中的其他操作。不保证其原来的排列顺序执行，哪个先加载完就先执行。
  2. defer 脚本延迟到文档被解析和显示后再执行，触发DocumentContentLoaded后才执行。立即下载，但是延迟执行。执行顺序按照排列顺序

• script的相关应用

  1. 可以借用defer , async 的特性异步或者延迟加载js代码，优化用户体验

  2. <noscript>
       	<h1>
           Hello World！
       </h1>
     </noscript>
     当浏览器关闭js功能的时候，这里面的标签内容会显示。