JavaScript 简介

简介

JavaScript 是一种运行在客户端（浏览器）和服务器端（NodeJS）的解释型、弱类型的动态编程语言。可以用于制作网页特效、表单验证、数据交互和服务器端编程

解释型：代码无需编译直接运行，需要一个翻译器，一边翻译一边执行
弱类型：声明变量时无需指定类型，并在赋值或运算时数据类型可以随意转换
动态语言：在代码执行的过程中可以动态添加对象的属性

JavaScript 由ECMAScript和Web APIs两大部分组成

ECMAScript：JavaScript 基础语法核心知识，可以理解为官方标准版 JS 语法
Web APIs：包括DOM（文档对象模型）、BOM（浏览器对象模型）

通常，我们通过<script>标签来引入 JavaScript 代码，这也是最理想的引入方式。当然，也可以直接写在页面的<script>标签内，或者直接写在标签内部。在项目中，我们通过模块化的方式来引入 JavaScript 代码

页面解析顺序

页面的解析顺序指的是：浏览器如何加载和处理 HTML、CSS 和 JavaScript，以及这些资源是如何影响页面渲染

详细过程如下：

解析HTML文档：浏览器首先解析HTML文档，构建DOM（文档对象模型）
解析CSS样式：包括内联样式、内部样式表（<style>）和外部样式表（<link>引入）解析 CSS 后，浏览器构建 CSSOM（CSS对象模型）表示了页面的样式信息
构建渲染树（Render Tree）：将 DOM 和 CSSOM 结合起来，浏览器构建渲染树
布局（Layout）或重排（Reflow）：浏览器使用渲染树来计算每个元素在页面上的大小和位置
绘制（Painting）：浏览器将渲染树中的每个节点绘制到屏幕上
解析和执行JavaScript：在解析 HTML 和 CSS 的过程中，如果遇到 JS，浏览器会采取不同的策略：
- 内部 JS：
  - 没指定async或defer属性：浏览器会阻塞解析 HTML，直到脚本执行完毕
  - 指定defer属性：允许 HTML 继续解析，脚本的执行则延迟到文档解析完成之后，按脚本在文档中的顺序依次执行，适用于不依赖于文档内容的初始化脚本
  - 指定async属性：脚本加载与 HTML 解析并行进行，加载完毕后，脚本会在 HTML 解析的下一个适当时间点执行，不影响后续 HTML 的解析，但可能导致脚本执行顺序不确定，适用于相互独立的脚本文件
- 外部 JS：
  - 没指定async或defer属性：浏览器会暂停解析 HTML，下载 JS 文件，然后执行
  - 指定defer属性：浏览器会并行下载脚本而不阻塞 HTML 解析，所有defer脚本会在 DOM 构建完成后，按照脚本在文档中的顺序执行
  - 指定async属性，脚本异步下载，不阻碍 HTML 解析，下载完成后立即执行，可能打断 HTML 解析。此模式下，脚本的执行顺序无法保证，适合彼此之间无依赖关系的脚本
事件处理和交互：页面加载完成后，浏览器会处理用户交互，如点击、滚动等。JavaScript 可以添加事件监听器来响应这些交互

理想情况下，页面的结构和逻辑应该是分离的。HTML 负责定义页面的结构和内容，而 JavaScript 负责添加交互性和动态行为。这种分离使得代码更易于维护和重用

JavaScript 简介 ​

简介 ​

页面解析顺序 ​

JavaScript 简介

简介

页面解析顺序