前言

学习一门语言，你要知道他能干什么，他为什么能这样干，这门语言是怎么和计算机沟通的。对于学习前端来说，我们要明白他是怎么和用户交互的。

I. 解释器

编程语言是怎么起作用的？

因为任何一门编程语言计算机都无法识别，计算机只能识别二进制的数据001001，二进制的数据流才是计算机的语言，这也是中文的操作系统（如Windows、macOS）难以打造的原因。所以任何一门语言都有专门的解释器去执行，（如Java的解释器.adk）将代码逐行转译为计算机能够理解的指令。

前端语言中的解释器

在前端开发中，HTML、CSS和JavaScript的解释器是浏览器内置的，分别被称为HTML渲染引擎、CSS解析器和JavaScript引擎。这些组件协同工作，将HTML文档解析为DOM（文档对象模型），应用CSS样式，并执行JavaScript代码，从而为用户呈现出生动且交互性强的网页。

II. 浏览器的作用

前端代码（HTML、CSS和JavaScript）主要在客户端（如用户的浏览器）上运行，负责处理用户界面、用户交互和与服务器端的通信。因为浏览器是用户与网页内容交互的主要界面，起到的作用非常重要。主要体现在以下几个方面：

一，解析和渲染：

解析HTML文档，将其转换为DOM（文档对象模型）树。这个树形结构代表网页的结构和内容。 CSS代码被解析为CSSOM（CSS对象模型），然后浏览器将DOM和CSSOM合并成渲染树（Render Tree），用于指导页面的渲染。浏览器渲染引擎负责根据渲染树绘制页面内容到屏幕上。

二，执行JavaScript：

在浏览器中，存在许多部门来执行我们的代码，其中就有内置的JavaScript引擎这个部门，如Chrome的V8引擎。以下是浏览器解析和执行JS代码的基本步骤：

1.加载HTML文档：

当浏览器加载一个HTML文档时，它会从上到下解析文档的内容。

2.遇到`<script>`标签

当浏览器解析到HTML文档中的<script>标签时，它会尝试获取并执行其中的JS代码。<script>标签可以指向外部的.js文件。

3.唤醒JavaScript引擎

浏览器会唤醒内置的JavaScript引擎（如Chrome的V8引擎）来处理<script>标签中的代码。

4.解析和执行JavaScript代码

预解析阶段

在这个阶段，JS引擎会扫描整个代码，查找所有的变量声明和函数声明，并将它们存储在内存中。这个阶段会进行一些预处理操作，如变量提升和函数提升。

逐行执行阶段

在预解析阶段之后，JS引擎会逐行执行代码。

5. 与DOM交互

6.异步处理

总之，浏览器通过内置的JavaScript引擎来读懂和执行JavaScript代码。

三，资源加载

浏览器负责加载网页所需的资源，如图片、视频、字体等，并缓存这些资源以加快后续访问速度。

四，安全沙箱

浏览器为网页提供了一个安全的环境（称为“安全沙箱”），限制网页代码对系统资源的访问权限，以保护用户数据和系统安全。

后端代码交给服务器运行，现阶段前端代码全部交给浏览器运行。浏览器为什么能读懂js的代码？因为浏览器通过js引擎，每个浏览器的js引擎性能不一样，谷歌的js执行引擎被称作V8引擎

III. 前端技术栈

编程语言在用户端的主要作用是通过前端技术栈来实现的。前端技术栈主要由HTML、CSS和JavaScript等构成，它们协同工作以构建出完整的网页。其中，HTML负责构建网页的结构，CSS用于美化网页的样式，而JavaScript则实现网页的交互功能。当用户访问网页时，浏览器会解析和渲染这些前端代码，展示给用户一个完整的、可交互的网页界面，同时响应用户的各种操作。

形成一个交互页面的基本条件

前言