流程
graph TD
a("dns解析")
b("建立tcp链接")
c("发送http请求")
d("nginx处理")
d1("无cdn")
d2("有cdn")
e("浏览器解析")
f("静态文件加载")
g("返回资源")
a -->b --> c --> d --> e
f -.-> d1 --"oss源站获取直接返回"--> g
f --> d2 --"无资源oss获取并缓存,有资源直接返回"--> g
subgraph nginx
d
d1
d2
end
页面加载过程
1.DNS解析：
- 浏览器一个域名，首先搜索浏览器自身缓存的DNS记录；
- 浏览器缓存中未找到或过期则搜索hosts文件和操作系统缓存；
- 未找到或过期则向域名解析服务器发送解析请求；
- 未找到则开始递归+迭代解析。
- 获取域名对应的IP后，一步步向上返回，直到返回给浏览器。
2.建立TCP连接(三次握手)
3.发起HTTP请求，若浏览器有该缓存则直接浏览器里获取，其本质是在建立起的TCP连接中，按照HTTP协议标准发送一个网页的请求。
4.nginx服务器处理请求，根据请求的文件后缀是html还是php判断是静态还是动态文件，静态文件直接返回html文件，动态文件交给php应用服务器（后端服务器）去处理，处理成静态html文件返回给浏览器，因为浏览器只能解析静态html文件。
5.浏览器解析html，会去加载很多静态文件：js/css/img等等，请求先发送到nginx上，通过修改nginx配置，location可以指定这些请求都转发到oss源站上。设置了cdn加速的话，在nginx上直接搭建cdn，nginx就是一个cdn节点服务器，第一次nginx上没有资源，会直接到oss获取，oss获取到资源返回给nginx节点服务器，同时在nginx上缓存一份静态资源，以后再次请求就可以直接到nginx上获取资源，不需要nginx转发请求，再到oss上获取资源。nginx在这里作为一个前端服务器，处理静态资源的。
6.解析到js中http请求，JavaScript 中调用 XMLHttpRequest 对象，通过 XMLHttpRequest 对象向服务器发送http请求，来请求数据，服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互，检索数据，服务器将 XML 数据或 JSON 数据发送到nginx服务器，再返回给客户端。浏览器渲染html模板和数据，最终显示出用户看到的画面。
