从输入url到页面显示发生了什么
1. DNS，其实也是网络协议
2. TCP 不容易丢包
3. Http/SSL 缓存etag在这个协议、 header变大
4. 响应解析 （SPA,SSR(同构渲染)， 宏观框架 ）
5. 浏览器渲染 howbrowserwork 前端优化
url->dns获取ip->建立tcp->解析响应-》l浏览器渲染
tcp(可靠) udp（dns，不可靠， 发出去不管了）
websocket就是tcp中间件抽象层
udp有telnet 发图片SMTPHTTPRPC室内门票TFTP
浏览器进行问询， 无需dns解析。 <link rel="dns-prefetch" href="//g.tcdn.cn"/>
1、输入URL
2、查找DNS缓存获取ip地址，存在直接读取，反之发起DNS解析请求
3、读取http缓存，如果存在强缓存，直接读取，状态码为200，如果缓存过期或者缓存类型为协商缓存，则需要发起http请求
4、建立TCP连接
5、发送http请求，如果资源无更新，返回状态码304，告知浏览器继续从缓存读取，反之，服务端返回最新资源，状态码为200
6、解析html 生成DOM Tree
7、解析过程中如果遇到js、css、img等资源，则继续发起请求，过程同步骤3 4 5
8、html解析过程中如果遇到js，则执行js会阻塞解析，如果是script获取资源，会根据script 是否有defer async属性具体分析：
8.1 如果没有属性，则请求js并执行，会阻塞html解析
8.2 如果有async，则请求js和html解析并行执行，js请求回来，阻塞html解析，执行js
8.3 如果有defer，则请求和解析并行，请求完成继续解析html，等dom加载完成，再执行js
9. 解析css 生成styleSheets（以前叫CSSOM Tree）
10. DOM Tree 和 styleSheets合并成layout Tree
11、layout tree 生成图层树
12、绘制图层，生成绘制列表
13、合成图层（栅格化）
14、合成图片，提交给浏览器进程、显示
5.浏览器渲染：
1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。
DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。
6.回流和重绘
回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了.重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color....
7. script defer async