1.用搜索百度地址例子来解释浏览器的渲染原理
当用户在浏览器地址栏输入一个 URL 并回车，直到页面被完全渲染展示在屏幕上，这整个过程就是“浏览器的页面加载与渲染流程”
我们这里输入url之后,浏览器中的网络线程开始工作，解析url
协议https:（协议决定通信规则（HTTP / HTTPS））
域名：www.baidu.com（域名需要 DNS 解析）
端口：默认省略 443（端口号：HTTPS 默认 443，HTTP 默认 80）
路径 /（告诉服务器请求的是哪个页面或资源（如 /index.html））
解析完之后，浏览器通过DNS（DNS 解析域名后，得到服务器的 IP 地址）用解析出来的地址找服务器
浏览器主线程--》网络线程找到服务器---》https加密请求（浏览器通过 IP 地址发起 HTTPS 请求），通过网卡转换数字信号为物理信号（
在以太网或局域网中确实是通过 MAC 地址通信，但在广域网中，数据通过一系列路由器中转，不是直接根据 MAC 地址找服务器
所以“最终找到服务器的 MAC 地址”这句话适用于局域网通信，在公网传输中则是通过 IP + 路由转发实现的
）
然后百度的服务器，收到请求，找到对应的index.html css js 然后打包响应返回给浏览器中的网络线程---》网络线程检查内容（
浏览器网络线程会先根据响应头判断内容类型，然后再交给渲染引擎。
），然后交给渲染引擎。
现在浏览器的渲染就开始了。
渲染引擎通常由主线程调度，但确实包含多个子线程如：样式计算线程、合成线程、栅格化线程等。
渲染引擎（主线程）开始按照顺序分为多个线程开始渲染。
首先解析html构建DOM树，然后解析css，构建CSSOM树，然后合并成渲染树（Render Tree：结合了 DOM 可见元素 + 样式的渲染树）---》计算布局（layout计算元素的大小和位置）
---》生成渲染清单（每个元素的绘制命令例如drawText('Hello',30,40)"]）
解析html遇到js先解析js在解析html（
js可能会改变html内容，
如果是同步的 标签，HTML 解析会暂停，直到 JS 下载并执行完毕；
如果是带有 defer 或 async 属性的脚本，行为会不同；
）
渲染清单交给合成线程---》然后页面分图层（包括滚动图片定位图层等等区域）-》开始栅格化，把每层切成小块转换成像素--》--》GPU加速处理--》展示出了页面。
这个流程为
URL → DNS → TCP/TLS → HTTP → 资源获取（html js css） → DOM/CSSOM → Render Tree → Layout → Paint → GPU 合成 → 展示
2.网络
我们上面的例子提到第一步就是网络流程。那么网络具体是什么呢？
首先网络的前提我们需要知道计算机的概念。
计算机本质上是处理电信号的电子设备，通过高电平（比如 5V ）和低电平（比如 0V ）来表示二进制的 1 和 0，从而记录和处理数据。
计算机通过将二进制数据转化为文本图像音频供我们使用。
假如你的计算机和我的计算机，我们希望可以进行数据的传输，也就是我想要给你发送信息或者数据进行通讯，那么就需要网络了。
最简单的通信方式就是通过一根网线（如以太网线）将两台计算机直连，通过发送电信号（代表0/1）完成数据传输。这就是构建网络。
但是这种数据传输如果是2台计算机我们只需要一根网线，但是如果多个设备的话就会几何性增长。因为必须两两相连。
这时候我们就需要一个中转站，去存储所以的计算机传过来的数据，然后分享给其他计算机。这就是Hub的产生背景。
编辑
为了减少网线数量，引入了Hub （集线器） ，每台设备只需要一根线连到 Hub 上。但是 Hub 无法区分目标设备，它采用广播方式将信息发给所有设备，导致带宽浪费、隐私性差。
此外，Hub 是半双工设备，不能同时发送和接收数据，类似于对讲机，实时性较差，容易出现冲突。
上面的缺点是我们不能容忍的，然后就会继续发展一种新的方式来方便我们构建网络。
这时候就使用了交换机新的转发设备
交换机（Switch）可以识别每台设备的 MAC 地址，并建立 MAC 地址表，实现点对点通信，不再广播；同时是全双工通信，支持同时发送和接收。
MAC 地址（硬件地址）
1.每台网卡出厂时就写死的唯一标识，形如：34:8A:12:EF:2C:78
2.只在局域网内部使用：比如交换机通过 MAC 地址知道该把数据包发到哪台设备。
3.MAC 地址 = “身份证”
编辑
交换机之间可以用线连接（桥接），互相学习地址，实现多设备、大范围连接。
每个交换机都有容量限制（如 MAC 地址表的大小），如果能各自存5万个 MAC 地址，并且通过桥接连接，那这些交换机就可以组成一个大的局域网（交换机之间连接一个网线），实现最多10万个设备互联。
编辑
路由器是连接不同网络的设备，它通过路由算法，选择最优路径传输数据。
IP 地址用于标识不同网络中的设备，帮助路由器定位目标设备所在的网络。
IP 地址（逻辑地址）
1.由网络管理员或路由器分配，可以改。形如：192.168.1.100
2.用于在更大范围内（比如整个互联网）标识设备
3.网络号（比如 192.168.1） → 表示你属于哪个“网段”
4.主机号（比如 .100） → 表示你是这个网段内的哪台设备
编辑
这张图中，默认网关就是路由器连接到网段A的IP,在网段A这个局域网中，如果我们希望访问网段B这个局域网中的设备，我们就需要发给网关，然后网关转发给网络B,网关起到了一个转发的作用，通过IP查看是否是在同一个网段也就是局域网中。如果是在一个网段中，通过交换机MAC地址，直接通讯。
如果是如例子一样访问百度，百度IP是外部网段，发给网关（192.168.1.1） → 路由器转发请求 → 出去上网
但在局域网内部，真正的数据传输仍通过 MAC 地址进行。IP 只是逻辑地址，MAC 是物理地址。
网段和网关用来判断数据怎么走，通过IP来判断是否是在局域网或者外部网段，用不用把数据给路由器的网关转发，还是直接在局域网内部用交换机直接同过MAC地址通讯。
再来2个例子演示图中的过程。
情况一：访问同网段设备（交换机负责）
你访问：192.168.1.20
你自己的 IP：192.168.1.10，网关：192.168.1.1
→ 比对网络号，发现同网段
→ 浏览器找系统 → 系统发 ARP 请求查目标的 MAC 地址
→ 交换机转发找到目标 MAC
→ MAC 直接通信
情况二：访问不同网段设备（路由器负责）
你访问：192.168.2.20（或 110.242.68.66 百度）
→ 比对网络号，发现不是一个网段
→ 系统说：我发不出去！交给默认网关处理
→ 查网关 192.168.1.1 的 MAC 地址
→ 数据包转发给网关 → 网关找下一跳 → 找目标网段 → 找目标设备
→ 一步步转发直到目标服务器收到
以上就是浏览器的渲染原理，以及网络的基本实现原理。
