在浏览器输入URL到页面呈现发生了什么

在浏览器输入URL到页面呈现发生了什么

技术杂谈小彩虹2021-08-17 12:42:13160A+A-

DNS查询

DNS查询顺序如下,若其中任何一步成功则直接跳到建立链接部分:

  1. 浏览器自身DNS
  2. 操作系统DNS
  3. 本地hosts文件
  4. 向域名服务器发送请求

建立链接

TCP三次握手(three-way handshaking)

  • 发送方:SYN(synchronize)
  • 接收方:SYN/ACK(acknowledgement),确认信息传达
  • 发送方:ACK - 确认接收方在线可收消息,握手结束
  • Accept

TCP三次握手的的好处在于:发送方可以确认接收方仍然在线,不会因为白发送而浪费资源。

发送HTTP请求

  • 报文首部(GET /index.html HTTP/1.1)

方法 URL HTTP版本

  • 空行(CR+LF)
  • 报文主体

注意:

  1. HTTP是无连接、无状态的,即HTTP在传输完成后就会断开,并且下一次登录时不会记录上次的登录状态。

从HTTP/1.1开始才支持持久连接,即通信一次以后连接不中断。

正常为请求一次响应一次:

请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3 若采用持久连接请求管线化方式: 请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3

使用管线化的条件:

  • 服务端需要支持管线化
  • 只有GET和HEAD可以进行管线化,POST请求有所限制
  • 管线化不会影响响应到来的顺序
  1. 关于CR(Carriage Return,回车)和LF(Line Feed,换行)

Dos和Windows采用CR/LF表示下一行

UNIX/Linux采用LF表示下一行 MAC OS系统则采用CR表示下一行

服务器发送响应

  • 报文首部(HTTP/1.1 200 OK)

HTTP版本

响应状态码 状态码信息

  • 空行(CR+LF)
  • 报文主体

客户端收到页面,浏览器渲染页面

执行以下过程:

解析HTML

  • 根据DOCTYPE来确定文档类型(注意HTML4中有严格和宽松模式)
  • 构建DOM树(根据HTML构建类似于二叉树的结构树)
  • 下载资源

CSS - 构建CSSOM树

js - 等下下载并执行后解析

构建渲染树

根据DOM和CSSOM树渲染,不可见元素不被会渲染

浏览器布局渲染

  • 布局 - 根据渲染树布局(layout)
  • 绘制 - 通过GUI在屏幕上绘制每个点

扩展:

  • repaint:

repaint发生更改时,元素外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构

虽然在业务中我们无法避免repaint,但是我们也应尽量减少repaint:利用fragment来插入多个节点。

  • reflow:

与repaint区别就是他会影响dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素

这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

reflow常见情况:

  • 增删改DOM节点
  • 移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
  • 修改width、display等CSS样式
  • resize窗口或是滚动的时候
  • 修改网页默认字体(不建议)

如:display:none会触发reflow和repaint,而visibility:hidden只会产生repaint

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们