一、浏览器中输入网址到浏览器获取到数据
以下内容以我的掘金网址juejin.cn/user/259919… 为例，首先分析
- https是协议
- juejin.cn是域名
- juejin.cn后面省略了默认端口443（https默认端口是443，http默认端口是8080）
- user是路径
- 259919159760141为携带的可变信息 在浏览器中输入一个网址后经历了以下几个过程，
- 根据输入的域名找到对应的ip地址
- 首先找浏览器缓存中是否有域名对应的ip地址
- 如果没有找到就去找系统缓存即本地hosts文件中是否有对应的ip地址
- 如果还没有找到，就去DNS服务器查找，下面的过程就不再细分了，总之DNS缓存如果没有找到就会分级找，先找根域名服务器（cn），然后找一级域名服务器（juejin.cn），找到对应的ip地址后返回给浏览器。
- 根据ip地址找到对应的服务器
- 建立TCP连接(三次握手)
- 发出https请求
- 服务器根据请求作出响应
- 浏览器得到响应内容进行解析与渲染并显示
- 关闭连接(四次挥手) 3-7就是tcp连接的三次握手、传输确认和四次挥手，详细见我以前的文章tcp和udp 以上过程就叫一次http事务
二、浏览器渲染
下面我们来解释上面所说的“7.浏览器得到响应内容进行解析与渲染并显示”，首先，浏览器通过网络请求拿到要渲染的页面之后，从上到下开始解析。例如下面页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
-
浏览器开一个选项卡，就是一个进程，操作系统就会给进程分配cpu和内存，进程中有多个线程
-
从上到下，UI线程解析HTML生成DOM树
-
解析中遇到link标签，发现css文件，UI线程解析css生成css规则树（CSSOM树），注意：DOM树和CSS规则树可以一起进行
-
UI线程将DOM树和css规则树合并在一起生成渲染树
-
遍历渲染树开始布局，计算每个节点的位置大小信息，也就是布局
-
将渲染树每个节点绘制到屏幕，也就是绘制
那么问题来了，页面中如果存在script标签，怎么渲染呢？
其实，只需要多加一步，当解析Html的时候碰到script标签，构建DOM树这个过程将会暂停，浏览器会在生成CSSOM树之后，执行JS代码，然后接着构建DOM树，之后再进行布局、绘制这就意味着，我们在编写代码的时候，要把script标签放在css的link标签下面
-
回流 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树
-
重绘 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，则称为重绘
回流和重绘的关系:回流一定会引起重绘，重绘不一定会引起回流
