从HTML、CSS和JavaScript开始了解前端

了解浏览器的渲染原理是我们在通往更深层次的前端开发中不可缺少的，它可以让我们从更深层次、角度去考虑性能优化等～

下面进入正文～

进程、线程

浏览器会分配一个线程“自上而下，从左到右”依次解析和渲染代码，那么进程和线程是什么，它们之间有着怎样的关系呢？

进程

一个进程就是一个程序运行的实例。当启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码，运行中的数据和一个执行任务的主线程，这样的一个运行环境就叫进程

线程

线程不能单独存在，它是由进程来启动和管理的。线程依附于进程，进程中使用多线程并行处理能提升运算效率

两者之间的关系

1、进程中的任意一线程执行出错，都会导致整个进程的崩溃

2、线程之间可以共享数据

3、当一个进程关闭后，操作系统会回收进程所占用的内存

4、进程之间的内容相互隔离

渲染机制

从HTML、CSS和JavaScript开始

了解浏览器的渲染原理，我们就要从理解 HTML 、 CSS 和 JavaScrip 开始，我们先来看一张图

HTML (超文本标记语言)，顾名思义，由标记（标签）和文本组成，每个标签都有自己的语意，浏览器会根据标签和文本展示对应的内容。

CSS (层叠样式表)，由选择器和属性组成，它可以改变 HTML 的样式，比如上图中，我们改变了 span 的颜色由蓝色为绿色。

JavaScript ，我们可以通过 JS 完成很多事情，例如上图中修改样式。

下面开始分析渲染的原理

渲染流水线

渲染模块由于渲染的机制的复杂，被划分为了很多子阶段，输入的 HTML 经过这些子阶段，最后会输出为像素。这样的处理流程就叫做 渲染流水线

<