JavaScript 基础（一）：页面生命周期、脚本加载、跨源资源共享
2023-10-14 00:37:44
JavaScript 在 HTML 中的运作机制：开发人员必读
对于网页开发者来说，了解 JavaScript 在 HTML 页面中运作的原理至关重要。本文将深入探讨 JavaScript 的关键概念，包括<script>元素、<noscript>元素、页面生命周期、脚本加载以及跨源资源共享。
HTML 中的 JavaScript
在 HTML 中，<script>元素负责包含 JavaScript 代码。通常，它被放置在<body>元素的末尾，以避免影响页面的加载速度。<script>元素可以通过src属性指定外部 JavaScript 文件的 URL，或者直接在<script>元素内编写 JavaScript 代码。
<script>元素
<script>元素具有几个关键属性：
src属性： 指定外部 JavaScript 文件的 URL。type属性： 指定 JavaScript 文件的 MIME 类型（通常为"text/javascript"）。defer属性： 允许浏览器在解析 HTML 文档后加载脚本，同时不阻塞其他内容的渲染。async属性： 允许浏览器在页面加载过程中异步加载脚本，即使它会阻塞后续内容的渲染。
<noscript>元素
<noscript>元素用于在浏览器禁用 JavaScript 时显示内容。它的内容在 JavaScript 启用时会被隐藏。
页面生命周期
页面生命周期了浏览器从加载页面到完全渲染页面的一系列阶段：
- 加载阶段： 浏览器开始加载页面。
- 解析阶段： 浏览器解析 HTML 代码并构建 DOM 树。
- 执行阶段： 浏览器执行 JavaScript 代码。
- 渲染阶段： 浏览器将 DOM 树和 CSS 样式应用到页面中，并在浏览器窗口中显示它。
脚本加载
JavaScript 脚本可以同步或异步加载：
同步加载： 脚本在 HTML 页面加载完成之前加载，可能会阻塞其他内容的渲染。
异步加载： 脚本在 HTML 页面加载完成之后加载，不会阻塞其他内容的渲染。
动态加载
动态加载允许在页面加载完成之后通过document.write()方法加载 JavaScript 脚本。
跨源资源共享 (CORS)
CORS 是一种机制，允许来自不同源的脚本访问彼此的资源。没有 CORS，脚本将无法跨域访问数据。
示例代码
以下代码示例演示了同步加载<script>元素：
<head>
<script src="script.js"></script>
</head>
<body>
...
</body>
以下代码示例演示了异步加载<script>元素：
<head>
<script async src="script.js"></script>
</head>
<body>
...
</body>
结论
理解 JavaScript 在 HTML 页面中运作的原理是网页开发者必不可少的技能。本文概述了关键概念，包括<script>元素、<noscript>元素、页面生命周期、脚本加载和跨源资源共享。通过掌握这些知识，开发者可以有效地编写和管理 JavaScript 脚本，从而增强他们的网页应用。
常见问题解答
-
JavaScript 是如何影响页面加载时间的？
同步加载的 JavaScript 脚本会阻塞页面加载，而异步加载的脚本不会。 -
<defer>和<async>属性有什么区别？
<defer>属性允许浏览器在解析 HTML 文档后加载脚本，<async>属性允许在页面加载过程中异步加载脚本。 -
CORS 是如何工作的？
CORS 涉及浏览器与服务器之间的一系列请求和响应，以确定是否允许跨源脚本访问。 -
我可以动态加载 JavaScript 脚本吗？
是的，可以使用document.write()方法动态加载 JavaScript 脚本。 -
<noscript>元素有什么作用？
<noscript>元素用于在 JavaScript 禁用的情况下显示内容。
