javascript高级程序设计读书笔记-第二章

最新推荐文章于 2024-09-09 09:35:48 发布

adeehong1

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量417

点赞数

分类专栏： javascript高级程序设计，javascript 文章标签：读书笔记 javascript

本文链接：https://blog.csdn.net/adeehong1/article/details/70738797

版权

javascript高级程序设计，javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
  2.1<script>元素 
 
   分为嵌入式与外链式两种方式使用JavaScript。 
 
   嵌入式：直接写到HTML文件当中，以<script></script>标签对来实现，如下： 
 
   <script type="text/javascript"> 
 
   function sayHi(){ 
 
   alert("Hi!"); 
 
   } 
 
   </script> 
 
   采用嵌入式时需要注意的是，不能在<script></script>代码当中使用“</script>”字符串，如 
 
   <script type="text/javascript"> 
 
   function sayHi(){ 
 
   alert(" 
  </script>"); 
 
   } 
 
   </script> 
 
   就会产生错误。因为浏览器遇到"</script>"时，会认为那是结束的标签。如果真的需要，就在前面加转义字符“\”，如： 
 
   <script type="text/javascript"> 
 
   function sayHi(){ 
 
   alert(" 
  <\/script>"); 
 
   } 
 
   </script> 
 
   外部文件式（外链式）：通过<script>元素来包含外部JavaScript文件，且src字段是必须的，这个值是指向外部文件的链接，可以是相对路径，绝对路径以及URL。 
 
   使用外链式的时候需要注意，建议使用<script type="text/javascript" src="example.js"> 
  </script>这种方式而不是<script type="text/javascript" src="example.js" 
  />的方式来支持所有浏览器的兼容性。另外.js后缀也不是必须的，但是如果省略的情况下需要确保服务器返回正确的MIME类型。 
 
   无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中的先后顺序对它们一次进行解析。 
 
   此外，实际操作当中，type、defer、async之类的参数都是可选的，实际上只要有<script></script>就能运行javascript脚本。 
 
  2.1.1 标签的位置 
 
   嵌入式JS代码放在html中哪个标签的位置比较合适？答案是放在<body>内容页的后面。因为如果都放在<head>里面，意味着必须等到全部JS代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到body标签时才开始呈现内容）。 
 
  2.1.2 延迟脚本 
 
   defer:这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。 
 
   现实当中，最好只包含一个defer脚本，因为HTML5当中虽然已经明确规定包含defer的不同脚本会按照顺序执行，但实际上并不一定所有浏览器都按照规定来实现，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。 
 
   defer属性只适用于外部脚本文件，嵌入式脚本会省略这个属性。 
 
  2.1.3 异步脚本 
 
   async属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，只适用于外部脚本文件（外链式），并告诉浏览器立即下载文件。但与defer不同的是，同样标记了async的脚本并不保证他们的先后顺序执行。所以确保两个脚本之间不互相依赖相当重要。 
 
   指定async的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。 
 
   ----------------------------------------------------------网上的解释------------------------------------------------- 
 
  先来试个一句话解释仨，当浏览器碰到  
  script 
   脚本的时候： 
 
 <script src="script.js"></script>
 
  没有  
  defer 
   或  
  async 
  ，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该  
  script 
   标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 
 
 <script async src="script.js"></script>
 
  有  
  async 
  ，加载和渲染后续文档元素的过程将和  
  script.js 
   的加载与执行并行进行（异步）。 
 
 <script defer src="myscript.js"></script>
 
  有  
  defer 
  ，加载后续文档元素的过程将和  
  script.js 
   的加载并行进行（异步），但是  
  script.js 
   的执行要在所有元素解析完成之后， 
  DOMContentLoaded 
   事件触发之前完成。 
 
  然后从实用角度来说呢，首先把所有脚本都丢到  
  </body> 
   之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。 
 
  接着，我们来看一张图咯： 
 
  蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。 
 
  此图告诉我们以下几个要点： 
 
 defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
 async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

   ---------------------------------------------------------------------------------------------------------------------------- 
 
   所以对于async和defer，都是异步执行，只不过async是完全乱序的，而且下载完马上执行，而defer是有序的，并且下载完成之后，还要等待页面所有元素解析完成后，DomContentLoaded事件前再执行。 
 
   把所有<script>都丢到</body>之前是最佳实践。