-
让品牌有温度、有情感
专注品牌策划15年
render树（render树和dom树）
发布时间：2023-04-05 00:55:57
稿源：
创意岭 阅读：
64
大家好！今天让创意岭的小编来大家介绍下关于render树的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
官网：https://ai.de1919.com，如需相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、从浏览器输入url到显示内容都发生了什么？
从URL到显示内容简单来说可以分为以下6个步骤
在浏览器输入网址之后，首先要经过域名解析，因为浏览器不能直接通过域名找到相应的服务器,而是通过IP地址。
DNS协议提供通过域名查找IP地址，或者逆向从IP地址反查域名的服务，DNS是一个网络服务器，我们的域名解析简单的来说就是在DNS上记录一条信息记录
浏览器首先会通过浏览器的缓存来查找，因为浏览器会按照一定的频率缓存DNS记录。如果在浏览器中没有找到，则会到操作系统中查找，操作系统中没有找到会到到路由缓存中查找，然后在是ISP的DNS服务器中查找。ISP有专门的DNS服务器对DNS查询请求。如果在ISP的DNS服务器中没有找到，则会向根服务器中查找
浏览器通过向DNS服务器发送域名，DNS服务器查询到与域名想对应的IP地址，然后返回给浏览器，浏览器再将IP地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。
在客户端发送数据之前，会发起TCP三次握手用以同步客户端和服务端的序列号和确认号，并交互TCP窗口的大小信息
三次握手是保证双方互相明确对方能发能收的最小次数，也能够防止失效连接请求报文段突然又传送给服务器，因而产生错误
TCP三次握手结束后，开始发送HTTP请求报文。请求报文由请求行、请求头和请求体三部分组成
服务器是网络环境中的高性能计算机。它监听网络上其他计算机提交的服务请求，并提供相应的服务。监听请求主要是靠web server担任管控角色。
响应报文由响应行、响应头部和响应主体三个部分组成
浏览器渲染解析简单的来说分为以下四部，第一步把HTML解析成DOM Tree,第二步把样式生成渲染树(render tree),第三步组织render tree试图。第四步UI后台程序绘制。
具体的步骤如下
当数据传送完毕，需要断开tcp连接
二、从输入一个网址到浏览器显示页面经历的全过程笔记
浏览器会在用户输入url时查找历史信息对其补全或直接显示缓存在本地的网页。
用户发起请求后，浏览器会解析这个url，将其转换为ip地址。
第一步： 查看hosts文件，如果hosts文件里面配置了url和ip的关系，则直接使用里面的ip地址。hosts文件存储在操作系统的如下目录中，打开后可手动配置。下图的示例中，左边是ip地址，右边是url。
第二步： 浏览器向本地DNS服务器（用网络运营商提供，如中国移动等）发送一个DNS请求。DNS (Domain Name System)是域名系统，用来将域名解析成ip地址。
第三步： 本地DNS在收到请求后查询缓存，如果没有命中，还会向根DNS服务器发送请求。
第四步： 根DNS服务器不直接存储解析数据，而是返回一个域服务器地址，本地DNS服务器转而向域服务器发送查询请求。
第五步： 本地DNS服务器继续向域服务器（例如.com域服务器）发出请求，返回的是一个解析服务器的地址。
第六步： 本地DNS服务器向域名的解析服务器发出请求，获得域名与ip的映射关系。在返回数据时，本地DNS会进行缓存。
浏览器会首先与服务器依照三次握手和四次挥手建立TCP连接（根据OSI七层协议，低层次的协议需要率先建立连接，只有建立了TCP连接才能使用HTTP协议）。
一个典型的http request header一般需要包括请求的方法，例如GET或者POST等，不常用的还有PUT和DELETE、HEAD、OPTION以及TRACE方法，一般的浏览器只能发起GET或者POST请求。
HTTP的请求信息主要包含三部分内容：
一个完整的HTTP请求如下所示：
以Chrome浏览器为例，按F12打开控制台，选择标签页中的Network，然后选择一个请求。下图展示的就是一个Http Request Header和他发送给服务器的参数。
服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“ http://www.google.com/ ” 而非“ http://google.com/ ”。
重定向原因：
此时如果不进行重定向的话，用户会得到一个404报错信息。之后，浏览器根据服务器返回的重定向地址继续请求网站信息。
和HTTP请求一样，HTTP响应信息也主要包含三个部分：
网页是根据服务器返回的html文件显示的，显示过程中需要进行渲染。以webkit为例，渲染的过程包括：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。
渲染完成后，浏览器会发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等），这个过程和上面发送请求的过程是一样的。
是否关闭TCP连接可以通过参数配置（connection:keep-alive）。新版本的协议也会通过默认持久连接来节省带宽。TCP连接关闭后，一次浏览器显示页面的交互就结束了。
三、为什么js的加载会阻塞页面渲染
因为页面的渲染是从上到下的，比如下面HTML结构
<head><script src="..."></script>
</head>
<body>
</body>
页面从上到下渲染，当运行到script这个标签时，会把script内的代码进行解读，在没有解读完成之前，渲染不会继续向下进行，这时候head后的内容就无法解读，导致阻塞，所以我们有时会把script标签放到</body>标签前，让body以前的基本结构都渲染完成，再进行解读js。
四、Flutter Widget的渲染原理
抽象类Element 有mount方法
抽象类Widget 有createElement方法
RenderObjectWidget有createElement方法 和 createRenderObject方法
每一个Widget, 都有createElement方法，通过createElement方法 创建一个Element对象，
Element加入Element树中，它会创建三种Element ，每个Element 有个mount方法
第一种：RenderObjectElement（RenderObjectWidget的createElement方法）
mount方法中 调用
widget.createRenderObject(this) ，创建RenderObject对象，RenderObject对象加入Render树中
第二种：StatefulElement继承ComponentElement
第三种：StatelessElement继承ComponentElement
并不是所有的Widget都会被独立渲染！只有继承RenderObjectWidget的才会创建RenderObject对象！
以上就是关于render树相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
华为retailplatform最新（华为retail platform）
googletrends数据分析（google trends数据分析）
赣公网安备 50019002502384号
