访问网址时浏览器做了什么

网络请求HTML+渲染

网络请求HTML

TCP概念：

TCP协议是一种连接导向的基于IP的传输层协议

一次完整的HTTP服务过程：

1.建立TCP连接(DNS解析：域名=》IP；再根据IP找到服务器，发起TCP三次握手建立TCP连接)

2.通信(HTTP请求=》服务器响应=》获取HTML=》请求HTML中资源(js,css,图片)=》渲染HTML)

3.关闭TCP连接(关闭TCP连接，四次挥手)

为什么HTTP协议要基于TCP来实现：

TCP是长连接导向的传输层协议，是在IP之间传输数据的；而HTTP是无状态的应用层协议，每一次会话都是全新的，并且是在浏览器与服务器之间传输数据的，HTTP报文通过TCP连接在IP之间传输，不必担心丢包，长连接可以保证传输数据的完整

DNS解析：

IP地址和域名之间具有映射关系，DNS解析将域名解析成IP地址，将URL中的域名先后与浏览器的DNS缓存、系统的DNS缓存、hosts文件比对，如果域名匹配就获取IP，如果缓存中没有实现域名匹配，就从根域服务器开始递归查找，一直向下级服务器查找，直到匹配上域名，获取IP。

DNS解析优化：

1.配置DNS缓存 0 2.DNS负载均衡(准备多台DNS服务器进行DNS解析)

TCP三次握手：

概念：建立一个 TCP 连接时，需要客户端和服务器总共发送3个报文。

图解：SYN、ACK是标志位，seq是序列号,ack是确认号，通过标志位匹配连接，通过确认号(ack = seq + 1)确认当前连接数据传输没问题

三次握手的必要性：假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。如果client已经关闭连接，就不会理睬server的确认，更不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。

TCP四次挥手：

概念：四次挥手即终止TCP连接，就是指断开一个TCP连接时，需要客户端和服务端总共发送4个包以确认连接的断开。

四次挥手的必要性：TCP连接是全双工模式，关闭连接需要双方都无待传输数据才可以。

补充：全双工（Full Duplex）是通讯传输的一个术语。 通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合。全双工指可以同时（瞬时）进行信号的双向传输（A→B且B→A）。指A→B的同时B→A，是瞬时同步的。单工 就是在只允许甲方向乙方传送信息，而乙方不能向甲方传送

图解：

渲染

浏览器的渲染是什么

将一段HTML字符串解析为屏幕上的像素信息

浏览器渲染流程

解析HTML字符串生成DOM树=>解析CSS生成CSS Object =>根据元素几何属性布局，生成布局树，因为某些不可见元素不会出现在布局树中，或者比如伪元素会出现在布局树中，所以布局树总是与DOM树不同=>根据z-index、transform、opacity等属性由浏览器来判断是否分层，分几层，分层后，某一层改变只会对当前层造成影响，提升效率，也可以使用will change 属性告知浏览器上述属性，鼓励浏览器做出分层决定=>主线程会为每个层单独产生绘制指令集，用于描述该层内容如何绘制=>完成绘制后，主线程将每个图层的绘制信息提交给合成线程,合成线程首先对每个图层进行分块=>光栅化，将每个块生成为一个一个的像素位图，优先处理靠近视口区域的位图=>合成线程拿到每层的每个位图，生成一个个指引(quad)，指引会标识每个位图应该在屏幕中出现的位置，并且考虑旋转缩放。

transform效率高的本质原因

transform不在渲染主线程中，不会影响到layout、layer、paint等渲染流程，不会造成重排重绘

为什么CSS不会阻塞渲染，而js会阻塞渲染

渲染在浏览器渲染进程的渲染主线程上进行，执行全局js代码部分在渲染主线程上进行，部分在预解析线程上进行，因为渲染与解析js都在渲染主线程上线性执行，所以会阻塞，而CSS解析完全在渲染进程的预解析线程上进行，所以不会阻塞。

解决JS加载阻塞渲染(js运行仍旧阻塞渲染)：

1.如果js代码没有更改DOM树，有两种方法：1.可以把script放到body最后面 2.script前置，添加defer属性，加载完毕不会立刻执行，会等待页面结构渲染完毕执行script；如果js代码更改了DOM树，同样有两种方法：1.script放到head中2.scrpit放到head并且添加async属性，js代码加载完毕立刻执行