面试题2020/4/2

输入一个url发生了什么

  1. DNS解析
  2. TCP连接
  3. 发送http请求
  4. 服务器处理请求
  5. 浏览器解析渲染页面
  6. 连接结束

 

1DNS解析

 

什么是DNS?

DNS是一种组织成域层次结构的计算机和网络服务命名系统，他用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换成IP地址的工作。DNS就是这样的一位"翻译官"，它的基本工作原理可以用下图来表示。

http://mail.163.com/index.html
1）http://:这个是协议，也就是HTTP超文本传输协议，也就是网页在网上传输的协议。
2）mail：这个是服务器名，代表着是一个邮箱服务器，所以是mail。
3）163.com：这个是域名，是用来定位网站的独一无二的名字。
4）mail.163.com：这个是主机名（网站名），由服务器名+域名组成。
5）/：这个是根目录，也就是说，通过网站名找到服务器，然后在服务器存放网页的根目录
6）index.html：这个是根目录下的默认网页（当然，163的默认网页是不是这个我不知道，只是大部分的默认网页，都是index.html）
————————————————

2.TCP三次握手

TCP三次握手的目的防止已经失效的连接请求报文段突然有传送到了服务端，因而产生错误

1.客户端发送一个带SYN=1，Seq=X 的数据包到服务器端
//(第一次握手，由浏览器发起，告诉服务器我要发送请求了)
2.服务器发挥一个带SUN=1,ACK=Y的响应包以示传达确认信息
//(第二次握手，由服务器发起，告诉浏览器我准备接收了，可以发送了)
3.客户端再传回一个带ACK=Y+1,Seq=Z的数据报，代表握手结束
//(第三次握手，由浏览器发送，告诉服务器，我准备发送了)

 

快递小哥：你好，你的快递到了，你在家没？
小明：在家呢，送过来吧。
快递小哥：好的，马上送到。

3.发送http请求

4.服务器响应http请求

5.浏览器解析渲染页面

  1. 解析HTML生成DOM树
  2. 解析CSS生成CSSOM规则树
  3. 将DOM树与CSSOM规则树合并在一起生成渲染树
  4. 遍历渲染树开始布局，计算每个节点的位置大小信息
  5. 将渲染树每个节点绘制到屏幕

构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。需要注意的是，DOM树生成过程中可能会被CSS和JS的加载执行阻塞。

构建CSSOM规则书

浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被解析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象

渲染阻塞

当浏览器遇到一个script标记时，DOM构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行Js脚本都会严重阻塞DOM树的构建，如果js脚本还操作的CSSOM,而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。

所以script标签的位置很重要。实际使用时，可以遵循下面两个原则：

  1. CSS优先：引入顺序上，CSS资源先于JS资源。
  2. JS置后：通常我们把JS代码放到页面底部，且JS应尽量少影响DOM构建

构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。

渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应的规则的样式。这也是渲染树与DOM树最大的区别。渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

渲染树布局

布局阶段会从渲染树的根节点开始遍历，然后确定每个接待你对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，他会精确的捕获每个元素在屏幕内的确切位置与大小。

渲染树绘制

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成

回流与重绘

根据选安然树布局，计算CSS样式，即每个节点在页面中的带线啊哦和位置等几何信息。HTML默认是流式布局的，CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。这时就会触发回流和重绘

重绘

屏幕的一部分重绘，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

常见引起重回的属性

  • color
  • border-style
  • box-shadow
  • background
  • background-size
  • border-radius
  • background-position

回流

当元素的大小位置改变，需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。

常见引起回流的属性和方法

  • 添加或者删除可见的DOM元素
  • 元素尺寸改变--边距、填充、边框、宽度和高度
  • 内容变化，比如用户在input中输入文字
  • 浏览器窗口尺寸改变
  • 计算offsetWidth和offsetHeight

从上面可以看出：回流必将引起重绘，而重绘不一定会引起回流。

浏览器的渲染队列机制(有点异步的味道 但不是异步 而是一个特殊处理  减少reflow)

 

posted @ 2020-04-02 14:24  容忍君  阅读(223)  评论(0)    收藏  举报