一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

加载的流程：

DNS解析 ：将域名地址解析为ip地址

1. 浏览器DNS缓存 
2. 系统DNS缓存
3. 路由器DNS缓存
4. 网络运行商DNS缓存
5. 递归搜索   blog.baidu.com

                .com域名下查找DNS解析

                .baidu域名下查找DNS解析

                blog域名下查找DNS解析

                出错了

TCP连接（ACK接收能力，SYN发送能力）：

        

                 客户端：“你好，在家不，有你快递。”
                 服务端：“在的，送来就行。”
                 客户端：“好嘞。”

发送请求

        请求报文，http协议的通信内容

接受响应

        响应报文

渲染页面

 遇见script标记，调用script解析器，处理script代码

• html结构
• 加载外部样式表和执行文件
• 解析执行脚本
• 构建dom模型（样式应用）     ready
• 加载图片文件
• 页面加载完毕        load

断开连接（四次挥手）

客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”
服务端：“收到，我看看我这边有木有数据了。”
服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”
客户端：“好嘞。

TCP和UDP

1.有无连接

假设现在有两台主机，它们是使用 UDP 协议进行通信，那么它们在发送数据之前，可以随机发送数据，而不需要进行连接，因此我们称 UDP 是无连接的（这里的连接是指逻辑连接关系）。
而如果两台主机是通过 TCP 协议进行通信的话，那么它们首先要通过“三次握手”进行连接，连接之后才可以发送数据，最后还需要使用“四次挥手”释放连接。
2.通信方式

UDP 支持单播、多播和广播的方式
而 TCP 仅支持单播。这里涉及到了网络中的单播、多播和广播的知识，看下面这张图你就明白了。
多播只将用户数据报传输到网络中的部分主机，广播则将用户数据报传输到网络中的 全部 主机。
3.对应用层报文的处理

发送方应用进程将应用层报文交付给应用层 UDP，UDP 直接给应用层报文添加一个首部，使之成为应用层用户数据报，然后进行发送。接收方 UDP 接收到该报文以后，只需将首部去掉，然后将报文交付给接收方的应用进程就行了。UDP 不会对报文进行拆分，因此它是面向报文的。

TCP 则会将发送方的数据块仅仅看作一连串无结构的字节流，将它们编号并存储在缓存中，然后根据自己的发送策略，提取一定量的字节，加上首部构建成 TCP 报文段进行发送。最后接收方的 TCP 一方面将 TCP 报文中提取出数据并存储在缓存，另一方面将接收缓存中的一些字节交付给接收方的应用进程。

4.是否提供可靠传输服务

对于 UDP，发送方会一门心思给接收方不断地发送数据报，没有可靠性保证、顺序保证和流量控制字段等，可靠性较差。但是正因为UDP协议的控制选项较少，在数据传输过程中延迟小、数据传输效率高，适合对可靠性要求不高的应用程序如果发送过程中出现了误码、丢包的情况，接收方不会做任何处理，只管接收就行了。保证了实时性，所以网络直播、视频会议等使用 UDP 的传输方式。

TCP 收到报文准确无误后，会向发送方发送一个确认的报文，这样一来，如果收到了误码或者遇到丢包的情况，由于发送端没有收到确认消息，会进行超时重发，直到收到接收端的确认报文。下载文件、浏览网页时，我们希望数据没有出现丢失，因此它们使用 TCP 协议进行数据传输。

通过滑动窗口机制来实现流量控制，通过动态改变窗口的大小进行拥塞控制

使用校验和，确认和重传机制来保证可靠传输

TCP 使用滑动窗口机制来实现流量控制，通过动态改变窗口的大小进行拥塞控制

归纳总结

类别	UDP	TCP
是否连接	无连接	面向连接
是否可靠	不可靠传输，不使用流量控制和拥塞控制	可靠传输（数据顺序和正确性），使用流量控制和拥塞控制
连接对象个数	支持一对一，一对多，多对一，	多对多交互通信    只能是一对一通信
传输方式	面向报文	面向字节流
首部开销	首部开销小，仅8字节	首部最小20字节，最大60字节
适用场景	适用于实时应用，如视频会议、直播	适用于要求可靠传输的应用，如文件传输

浏览器布局渲染

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了。

reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。

如何减少或避免

• 然后避免重排和重绘的话就需要减少或者和合并多次DOM操作为一次DOM操作
• 因为绝对定位可以让元素脱离文档流，只会出发局部重排而不会影响外界
• 样式集中改变