Java教程

JavaScript高级程序设计（第四版）读书笔记-第二章

本文主要是介绍JavaScript高级程序设计（第四版）读书笔记-第二章，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

2.1 <script>元素

将JavaScript 插入HTML 的主要方法是使用<script>元素，包括如下属性：

  • async：表示应该立即开始下载脚本，但不能阻止其他页面动作。只对外部脚本文件有效。
  • defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • charset：不常用。使用src 属性指定的代码字符集。
  • crossorigin：配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
    • crossorigin="anonymous"配置文件请求不必设置凭据标志。
    • crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
  • integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。
    • 如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。
    • 这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
  • src：可选。表示包含要执行的代码的外部文件。
  • type：可选。表示代码块中脚本语言的内容类型（也称MIME 类型）。

<script>元素的一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的JavaScript文件。<script>元素的src 属性可以是一个完整的URL，而且这个URL 指向的资源可以跟包含它的HTML 页面不在同一个域中。在包含外部域的JavaScript 文件时，要确保该域是自己所有的，或者该域是一个可信的来源。

现代Web 应用程序通常将所有JavaScript 引用放在<body>元素中的页面内容后面.

考点：defer和async区别

当浏览器碰到 script 脚本的时候：

  1. <script src="script.js"></script>
    没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

  2. <script async src="script.js"></script>

    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。async 是乱序执行，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行

  3. <script defer src="myscript.js"></script>

    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。 它是按照加载顺序执行脚本的。

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）,它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。

2.2 行内代码与外部文件

文档模式：混杂模式，严格（/标准）模式（准标准模式）。

  • 混杂模式和严格模式的主要区别只体现在通过CSS 渲染的内容方面；

  • 准标准模式和标准模式的主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。非常接近，不区分。

考点：Doctype作⽤? 严格模式与混杂模式如何区分？

<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型规范来解析这个⽂档

  • 严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
  • 在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现
这篇关于JavaScript高级程序设计（第四版）读书笔记-第二章的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航