访问网页的过程究竟发什么了什么

DNS查询得到IP

首先检查浏览器缓存 --> 检查本机缓存 --> 使用host --> 路由器缓存 --> DNS服务器递归查询

刷新Chrome缓存chrome://net-internals/#dns

修改host会导致本机缓存被刷新，而浏览器缓存不刷新。

清理本地缓存: sudo dscacheutil -flushcache

TCP/IP请求

http的本质就是 tcp/ip请求

连接过程：三次握手四次挥手

三次握手：

客户端：hello，你是server么？

服务端：hello，我是server，你是client么

客户端：yes，我是client

四次挥手：

主动方：我已经关闭了向你那边的主动通道了，只能被动接收了

被动方：收到通道关闭的信息

被动方：那我也告诉你，我这边向你的主动通道也关闭了

主动方：最后收到数据，之后双方无法通信

五层因特网协议栈

从应用层的发送http请求，到传输层通过三次握手建立tcp/ip连接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。服务端的接收就是反过来的步骤。

五层因特尔协议栈其实就是： 1.应用层(dns,http) DNS解析成IP并发送http请求 2.传输层(tcp,udp) 建立tcp连接（三次握手） 3.网络层(IP,ARP) IP寻址 4.数据链路层(PPP) 封装成帧 5.物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）

其实也有一个完整的OSI七层框架: 表示层：主要处理两个通信系统中交换信息的表示方式，包括数据格式交换，数据加密与解密，数据压缩与终端类型转换等 会话层：它具体管理不同用户和进程之间的对话，如控制登陆和注销过程

服务器接收到请求到对应后台接收到请求

请求过程

1、浏览器组装好Request发送给WEB服务器 2、Nginx接受到Request之后根据请求资源类型进行分类,如果请求静态资源,Nginx会检索静态资源,并直接返回,如果是请求动态资源,会交给应用服务器.当然这其中会有请求缓冲,负载均衡等步骤. 3、实现了wsgi网管接口的应用服务器接收到http请求后,利用Werkzeng等网络编程工具实现的python程序(flask框架等)会根据request内容生成Response并返回给Nginx 4、Nginx缓冲Response,并将其返回给浏览器

web服务器

Nginx Apache 之类的叫做服务器软件，顾名思义，这是一个软件，用于运行web 服务的软件。也常被称作web服务器， HTTP服务器，其作用是用来处理HTTP协议的，且只能处理静态内容。也就是把服务器文件系统中的每一个资源对照成URI，然后通过HTTP协议把这些已经存在的资源传给发起HTTP请求的客户端。 他将动态资源交给应用服务器处理，静态资源则由web服务器直接返回浏览器，这样就减轻了应用服务器压力。

应用服务器

仅仅响应静态内容是不够的，人们还需要动态的处理内容，返回动态的信息给客户端。 这就用到了服务器脚本。人们为了统一服务器脚本和web服务器之间的信息交互方式，提出了CGI，统一化标准。 WSGI规定了web服务器与web应用程序之间的标准接口，以确保web应用程序在不同的web服务器之间具有可移植性，在python web开发中，主流的选择是Gunicorn，uWSGI等实现WSGI的容器。

两者的区别

web服务器负责处理HTTP协议，应用服务器既可以处理HTTP协议，也能处理其他协议。 web服务器处理静态页面内容，动态内容通过WSGI接口交给应用服务器来处理。

负载均衡

用户发起的请求都指向调度服务器（反向代理服务器，譬如安装了nginx控制负载均衡），然后调度服务器根据实际的调度算法，分配不同的请求给对应集群中的服务器执行，然后调度器等待实际服务器的HTTP响应，并将它反馈给用户。

一些协议中间件对比

WSGI:Python Web Server Gateway Interface python 定义的web服务器与web应用程序之间的简单而通用的接口 Werkzeng: Werkzeug是Python基于WSGI协议写的函数库，它的应用很广泛 flask: 基于Werkzeng实现的轻量级web框架 Gunicorn: wsgi容器,可以用Gunicorn跑用flask等Werkzeng框架实现的程序,这样就实现了一个应用服务器

解析页面流程

解析HTML，构建DOM树

解析CSS，生成CSS规则树

合并DOM树和CSS规则，生成render树

布局render树（Layout/reflow），负责各元素尺寸、位置的计算

绘制render树（paint），绘制页面像素信息

浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

参考资料: https://www.jianshu.com/p/b5f58e5bed15 https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651553818&idx=1&sn=3ce840113d28ee2b2cafe4c7fc48ef91&chksm=802557dbb752decd2118e3ad7a3ea803a0c41c6594f539fc54830dae9bbc2242b2fc03e7fb1c&scene=21#wechat_redirect