电脑连入互联网之后,会获得一个ip地址,百度的服务器接入互联网也会获得一个ip地址,访问的过程就是从你的ip到他的ip
通过tcp/ip协议进行连接,从浏览器到www.baidu.com属于http请求, http请求属于应用层提供的协议,通过http协议发送数据到传输层,再通过tcp协议附加源端口和目标端口等信息,继续发送到网络层,通过ip协议给数据加上原ip地址和目标ip地址,再发送给数据链路层,数据链路层会把数据转换成网络信号,在通过猫,路由器,交换机等等传输到目标ip地址上,,再把网络信号层层转化最原始的数据包,发给百度的服务器获取到数据,再通过这种方式,传递回我们的电脑.这就完成一次请求.
www.baidu.com不是ip地址, 输入它能访问到百度服务器的ip地址,中间通过dns做了一系列操作俗称域名解析,我们通过浏览器搜索www.baidu.com会先发送到dns服务器上, 查询到www.baidu.com对应的ip地址, 然后把这个ip地址返回给我们电脑, 在通过tcp/ip协议进行连接, 最终获得页面数据.
获得页面数据之后, 浏览器会对数据进行一系列操作, 最终会把页面渲染出来, 就是我们最终看到的效果.
以chrome浏览器为例 谷歌浏览器中有, 浏览器进程, GPU进程, 插件进程, 缓存进程, 网络进程, 渲染器进程
浏览器进程: 负责除标签页外的用户界面, 包括地址栏, 书签, 后退前进按钮, 以及负责与浏览器的其他进程协调工作
网络进程: 负责发起接受网络请求
GPU进程: 负责整个浏览器界面的渲染
插件进程: 负责控制网站所有使用的插件(不包括chrome市场的扩展工具)
渲染器进程: 负责控制显示tab标签内的所有内容 这一系列操作是:
当在地址栏输入地址时, 浏览器进程的UI线程会捕捉你的输入内容, 如果访问的是一个网址, 则UI线程会启动一个网络线程来请求DNS进行域名解析, 接着开始连接服务器获取数据, 如果搜索的是关键词, 则会通过默认搜索引擎进行搜索
当网络线程获取到数据后, 会通过SafeBrowsing来检查站点是否可信, 如果不可信,则提示警告页面, 当然, 你也可以继续浏览, 确认数据安全后, 会把数据交给UI线程, 然后UI线程会创建一个渲染器进程来渲染页面, 浏览器进程通过IPC管道将数据传递给渲染器进程, 进入渲染流程, 渲染器的核心任务就是把收到的数据,渲染成可供我们使用的交互页面, 接下来开始进行html解析, 首先通过tokeniser标记化, 通过词法分析将输入的html内容解析成多个标记, 根据识别后的标记进行dom树构造, 构造dom树的过程中, 会创建document对象, 然后以document对象为根节点的dom树不断进行修改,向其中添加各种元素, 当遇到script标签是, 会停止解析, 执行js脚本, 在html解析完成后, 获得dom树, 然后主线程解析css 确定每个dom节点的计算样式, 接下来需要知道每个节点需要放到页面的那个位置上, 也就是节点的坐标和占用多大的区域, 这个阶段为layout布局, 主线程通过遍历dom和计算好的样式, 来生成layout树, layout树上的每个节点都记录了x,y坐标和边框尺寸, 接下来需要知道按什么样的顺序来绘制, 主线程遍历layout树创建一个绘制记录表, 这个表记录了绘制的顺序, 这个阶段被称为绘制, 然后主线程将layout树和绘制表传给合成器线程, 合成器线程将得到的信息分图层很小的图块, 发送给栅格线程, 将更小的图块进行栅格化，返还给合成器线程, 图块信息存储在GPU中, 根据这些信息,合成器将栅格线程返回的图块生成合成器帧通过IPC交给浏览器进程, 浏览器进程收到合成器帧的传给GPU进行渲染
期间过程可能会发成重排或重绘
重排： 当改变dom的属性时，会重新进行样式计算，会重新布局和绘制 重绘： 当改变颜色时，只会发生样式计算和绘制(layer) requestAnimationFrame() 会将主线程的任务分散到每一帧的间隔，从而不影响动画的流程 Fiber react利用浏览器的空闲时间做优化 Transform 会直接运行合成器线程，所以不会感染主线程的渲染
