由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：

🐼按照渲染的时间顺序，流水线可分为如下几个子阶段：

1. 构建 DOM 树
2. 样式计算
3. 布局阶段
4. 分层
5. 绘制
6. 分块
7. 光栅化
8. 合成。

我们可以把渲染流水线当作一个车间流水线，我们只关注输入输出，中间的处理当作黑盒即可；不去关注过程

把数据包送达目的主机

数据包要在互联网上进行传输，就要符合网际协议（Internet Protocol，简称 IP）标准。计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。互联网上不同的在线设备都有唯一的地址，相当于我们的身份证号，有且仅有一个。

如果要想把一个数据包从主机 A 发送给主机 B，那么需要携带一下信息：

• 主机 B 的 IP 地址信息
• 主机 A 本身的 IP 地址

什么是并行处理

在了解进程和线程之前，先来看一下什么是并行处理；

计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这两个表达式的值，并显示出结果

1
2

A = 1+2
B = 2+3

在编写代码的时候，我们可以把这个过程拆分为三个任务：

• 任务 1 是计算 A=1+2；
• 任务 2 是计算 B=2+3；
• 任务 3 是显示最后计算的结果;

1、什么是重定向

重定向技术通常可以用来确定报文是否终结于某个代理，缓存或服务器集群中某台特定的服务器. —— HTTP权威指南

感觉很绕口，举个栗子🌰🙋‍简单理解起来相当于你拿着一个地址从家里出发（浏览器发送请求）去找一个亲戚，到了后发现他已经搬家了，邻居告诉了你一个新的地址（新的请求），此时天已经晚了，你回家休息一晚上（又回到了浏览器），第二天拿着新的地址去找（浏览器再次发送请求），终于找到了。

1、摘要

JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本质就是一个字符串书写规范，作用是用来在用户和服务器之间传递安全可靠的信息。

2. JWT是什么

根据维基百科的定义，JSON WEB Token（JWT，读作 [/dʒɒt/]），是一种基于JSON的、用于在网络上声明某种主张的令牌（token）。JWT通常由三部分组成: 头信息（header）, 消息体（payload）和签名（signature）。

📚一. 什么是模块化

📣模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 ——维基百科

这是维基百科对模块化的介绍，简单理解就是：

• 将代码拆分成独立的块，然后把这些块连接起来可以通过模块模式来实现。

• 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

📢📢📢url就是因特资源网的标准化名称。URL指向一条电子信息片段，告诉你它们位于何处，以及如何与之进行交互 ——《http权威指南》

📚 1、URL和URI

说起URL,我们不得不提起URI。URI是一类更通用的资源标识符，URL实际上是它的一个子集。URI包含URL和URN，URL是通过资源位置来标识资源的，而URN是通过名字来识别资源的。那么这三者的关系，就类似我我们身份证上的身份证号、家庭住址、姓名。

虽然规范的做法是URI作为统一资源标识符，但是在http中只处理了URL，那么我们就来看看我们熟悉的URL

📢📢如果说http是因特网的信使，那么http报文就是他用来送信的包裹了

(1)📚什么是报文

在度娘的介绍中

📣报文(message)是网络中交换与传输的数据单元，即站点一次性要发送的数据块。报文包含了将要发送的完整的数据信息，其长短很不一致，长度不限且可变。

也就是说http报文是在http应用程序之间发送的数据块，，它包裹着我们进行请求数据交换的信息✔。

再看react ssr 之前，我们先来看一个使用react ssr 实现的应用，感受一下它飞一般的渲染速度 https://m.xin.com/ 看过之后我们再来看文章。

📚导读

关于服务端渲染（SSR）、客户端渲染（CSR）和 同构渲染，我在next.js从入门到实战这篇文章中开头有详细的介绍，还不了解这三种渲染方式的可以简单了解一下。

但只实现 SSR 没什么意义，技术上没有任何改进，否则 SPA 技术就不会出现😀。
但是单纯的 SPA 又不够完美，所以最好的方案就是这两种技术和体验的结合。但是要实现两种技术的结合，同时可以最大限度的重用代码（同构），减少开发维护成本，那就需要采用 react 或者 vue 等前端框架和node(ssr)相结合的方式来实现。

如果我们使用react ssr 来实际开发项目，我们就需要一个完整的开发框架，next.js其实就是这种框架，类似的还有nuxt.js。那这种框架的实现原理是什么呢？

设计模式是我们在 解决问题的时候针对特定问题给出的简洁而优化的处理方案，这里我跟大家简单聊一下前端中常用的三个设计模式

每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的解决方案的核心。这样，你就能一次又一次地使用该方案而不必做重复劳动。 —— Christopher Alexander

设计模式的核心思想

设计模式出现的背景，是软件设计的复杂度日益飙升。软件设计越来越复杂的“罪魁祸首”，就是变化。比如我们写一个应用，这个应用以后完全不会发生迭代和优化，那么我们可以随便写，反正实现功能就行了，根本不用去考虑它的维护和升级。

但在实际开发中，不发生变化的代码可以说是不存在的。我们能做的只有将这个变化造成的影响最小化 —— 将变与不变分离，确保变化的部分灵活、不变的部分稳定。

这个过程，就叫“封装变化”；这样的代码，就是我们所谓的“健壮”的代码，它可以经得起变化的考验。而设计模式出现的意义，就是帮我们写出这样的代码。