1.前端语言的基本能力

前端语言最基本的为HTML,CSS,JavaScript，通俗来说也就是前端“三件套”，许多前端入门的同学都会从入手这三门语言学起。

HTML

HTML的全称为超文本标记语言，是一种标记语言它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。是构建网页的基石

CSS

CSS的全称为层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript

JavaScript的简称“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

浏览器引擎

简单介绍完三种语言，那么他们是怎么在浏览器工作的呢？首先浏览器一般都包括两种引擎，渲染引擎和JavaScript引擎。而渲染引擎还包含以下三个部分

classDiagram
Animal <|-- HTML解释器
Animal <|-- CSS解释器
Animal <|-- 布局
class HTML解释器{
+解释 HTML 文本，将 HTML 文本解释成 DOM（文档对象模型）树
}
class CSS解释器{
-解释 CSS 文本，为 DOM 中的各个元素对象计算出样式信息，从而为计算网页的布局提供基础设施
}
class 布局{
+DOM 创建之后，将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表达这些信息的内部表示模型。
}

工作机制

渲染引擎：渲染引擎主要用于加载页面，根据HTML结构生成DOM树，获取CSS的资源，构成CSSOM树，结合HTML的结构特性和CSS的样式特性，渲染引擎会计算最终的页面排版，并推断出其中哪些部分可以作为一个整体，并为一个图层，并把页面绘制出来

JavaScript引擎：JavaScript被Parser解析后，变成AST抽象语法树，经过Ignition转化树，将AST转为字节码，再由V8引擎将字节码转化成CPU需要的机器指令，进行执行。 TurboFan可以从Ignition搜集一些执行频率比较高的函数，把它们标记成hot函数，直接生成MachineCode(优化的机器码)，当下次碰到同样的函数时，直接执行MachineCode就行；但是当执行MachineCode时，发现执行操作不一样了，这时就会反向操作把机器码再转化成字节码，继续执行。

2.前端语言的协作配合

由上图我们可以知道，三种语言配合的作用在于，html构建网页的基础架构，css用于美化页面布局和外观，js则是为原本由html+css构建的静态页面增加功能，提高与用户的交互性。那么在开发中，我们是如何将三个语言在同一个编译器中联系起来的？

CSS in HTML

三种方式：①行内样式：将css写到元素的style属性中；②：内部样式：将css写到HTML的标签内；③外部样式：将css写入一个以".css"为后缀的文件中，然后使用或者@import url()引入到html，这也是开发中最常用的方式。

JavaScript in HTML

三种方式：①：行间事件：将JavaScript函数写到HTML元素的执行事件中，如click，对应onclick，mouseover，对应onmouseover；②：页面script 标签嵌入，脚本块的方式：以script标签包含JavaScript函数，直接写入HTML中；③：引入外部独立的js文件：即将JavaScript函数写在一个单独的页面，再在html头部将其引入，这也是开发中最常用的模式

JavaScript中的等号问题

在以前一次学校的工作室面试中，我遇到一道题，问了我JavaScript中一个，两个，三个等号分别代表什么问题，当时没答上来，以至于现在记忆尤新。

单等于号

赋值作用。比如var a = 1,var b = a

双等于号

比较基本数据类型的两个变量值是否相等。比如1 == true（若比较的数据类型不同，会提前作一个转换，这里将true转为1）

三等于号

在双等于号的基础上的严格判断，不作类型的转换。

1.如果类型不同，则不相等；

2.如果两个都是数值，并且是同一个值，那么相等；（有一个例外，如果其中至少一个是NaN，那么不相等）（判断一个值是否是NaN，只能用isNaN()来判断）；

3.如果两个都是字符串，每个位置的字符都一样，那么相等；否则不相等；

4.如果两个值都是true，或者都是false，那么相等；

5.如果两个值都引用同一个对象或函数，那么相等（浅拷贝）；否则不相等（深拷贝）；

6.如果两个值都是null，或者都是undefined，那么相等；

1 === “1” 返回false；1 === true 返回false

前端语言串讲 | 青训营笔记