共计 1561 个字符，预计需要花费 4 分钟才能阅读完成。
1、输出 URL
-
在地址栏输出网址后回车，浏览器对输出内容进行判断：查看输出内容是否为非法的 URL 连贯。
- 非法，判断输出的 URL 是否残缺。如果不残缺，浏览器智能补齐地址前缀或者后缀。
- 不非法，将输出内容作为搜寻条件，应用搜索引擎进行搜寻。
2、DNS 解析
- 把 URL 地址解析为 ip 地址这一过程就是 DNS 解析。
- 操作系统查看浏览器缓存和本地 hosts 文件是否有这个网址所对应的 ip 地址。有则实现 DNS 解析，否则进行下一步。
- 查看本地 DNS 服务器（路由器）是否缓存有该网址对应的 ip 地址，没有则进行下一步。
- 本地 DNS 服务器发送查问报文到根 DNS 服务器进行查问，实现域名解析。
1）优化：dns-prefetch
- 当浏览器从（第三方）服务器申请资源时，必须先将该跨域域名解析为 IP 地址，而后浏览器能力发出请求。
-
dns-prefetch(DNS 预获取 ) 是前端网络性能优化的一种措施。它依据浏览器定义的规定，提前解析 之后可能会用到的域名，使解析后果 缓存到零碎缓存 中，缩短 DNS 解析工夫，进而进步网站的访问速度。<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
3、TCP 三次握手
- 当浏览器失去服务器的 ip 地址后，浏览器通过随机端口号向服务器 80 端口发动 TCP 连贯申请。
- 客户端发送 SYN 包，示意申请连贯；
- 服务端收到 SYN 包，回复 SYN+ACK 包，表示同意连贯；
- 客户端收到 SYN+ACK 包，回复 ACK 包，示意胜利连贯。
4、发送 HTTP/HTTPS 申请
（1）HTTP
- 建设连贯后，浏览器向服务器发送一个初始的 HTTP GET 申请，申请指标通常是一个 HTML 文件。
（2）HTTPS
- 如果应用 HTTPS，会在 TCP 与 HTTP 之间增加一层协定作为加密及认证的服务，该层协定个别为 SSL 和 TLS 协定
- SSL 协定和 TLS 协定的作用是认证客户端和服务器，加密数据避免数据中途被窃取，并且保护数据的完整性，确保数据在传输过程中不被扭转。
5、响应申请
- 服务器收到申请后，发送一个 HTTP 响应报文，内容蕴含响应头和 HTML 注释。
6、页面渲染
- link 不会阻塞渲染
- script 可能会阻塞渲染
1）构建 DOM 树
- 解决 HTML 标记并构建 DOM 树。
2）构建 CSSOM 树
- 解决 CSS 标记并构建 CSSOM 树。
- 在匹配一个节点对应的 CSS 规定时，是依照从右到左的程序的，例如：
div p {font-size :14px}会先寻找所有的p标签而后判断它的父元素是否为div。 - 所以咱们写 CSS 时，尽量用 id 和 class，千万不要适度层叠。
3）合并渲染树
- 将 DOM 树和 CSSOM 树合并成一个渲染树。
- 渲染树会疏忽那些不须要渲染的节点，比方设置了
display:none的节点。
4）布局与绘制
- 依据渲染树布局，计算每个节点的几何信息。
5）回流与重绘
display:none会触发回流，而visibility:hidden只会触发重绘。
（1）回流
- 当浏览器发现某个局部发现变动影响了布局时，须要倒回去从新渲染，会从
html标签开始递归往下，从新计算地位和大小。 - reflow 根本是无奈防止的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变动。
（2）重绘
- 扭转了某个元素的背景色、文字色彩等等不会影响四周元素的地位变动时，就会产生重绘。
- 每次重绘后，浏览器还须要合并渲染层并输入到屏幕上。
- 回流的老本要比重绘高很多，所以咱们应该尽量避免产生回流。
7）优化
（1）首屏渲染 FCP
- 第一次渲染的工夫点，产生在 head 标签加载实现后。
- 将要害款式放在 head 标签中。
- 尽量把 script 标签放在 body 标签开端，因为 script 可能会阻塞渲染。
7、断开连接
- 实现渲染后就能够断开 TCP 连贯了。
- 然而当初浏览器为了缩小申请耗时，默认开启了长久连贯，只有标签页敞开的时候，TCP 连贯才敞开。
正文完