Blazor University (14)渲染树

原文链接:https://blazor-university.com/components/render-trees/

渲染树

当浏览器呈现内容时,它不仅绘制 HTML 中定义的元素,还必须根据页面大小(元素流)计算绘制它们的位置。例如,以下 Bootstrap HTML 将在调整浏览器窗口大小时将元素放置在不同的位置。

<div class="jumbotron text-center"><h1>Responsive layout</h1>
</div><div class="container"><div class="row"><div class="col-sm-6 col-xs-12 btn btn-default">Column 1</div><div class="col-sm-6 col-xs-12 btn btn-default">Column 2</div></div>
</div>

5a7ef3812cb47f9b0e69f5e752e94658.gif

布局随着浏览器调整大小而变化

每当 HTML 元素的属性发生变化(宽度、高度、内边距、边距等)时,浏览器必须在呈现它们之前重排页面上的元素。更新浏览器的文档对象模型 (DOM) 可能会占用大量 CPU,因此速度很慢,尤其是在执行大量更新时。

虚拟 DOM

其他客户端工具(例如 React 和 Angular)通过实现虚拟 DOM 和增量 DOM 方法来规避这个问题。

虚拟 DOM 是组成 HTML 页面的元素的内存表示。此数据创建 HTML 元素树,就好像它们已由 HTML 标记页面指定一样。Blazor 组件通过名为 BuildRenderTree 的虚拟方法在其 Razor 视图中创建此虚拟 DOM。例如,标准 Pages/Index.razor 页面的 BuildRenderTree 如下所示。

protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder)
{builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");builder.OpenComponent<MyFirstBlazorApp.Client.Shared.SurveyPrompt>(1);builder.AddAttribute(2, "Title", "How is Blazor working for you?");builder.CloseComponent();
}

构建表示要呈现的视图的数据树有两个显著的好处:

  1. 在复杂的更新过程中,这些虚拟 HTML 元素的属性值可以在代码中多次更新,而浏览器不必重新渲染和重排其视图,直到该过程完成。

  2. 可以通过比较两棵树并构建一个新树来创建渲染树,该树是两者之间的差异。这使我们能够利用增量 DOM 方法。

增量 DOM

增量 DOM 是一种技术,可以最大限度地减少更新浏览器视图中的元素所需的工作量。

能够创建差异树使我们能够使用更新 DOM 所需的尽可能少的更改来表示对视图的更改。这可以在更改显示时节省时间(因此用户体验更好),并且在服务器端 Blazor 应用程序中,这意味着网络上的字节数更少 - 使 Blazor 应用程序在慢速网络或非常偏远的位置更有用。

示例 1 – 添加新列表项

假设我们的用户正在使用显示项目列表的 Blazor 应用程序。他们单击一个按钮将一个新项目添加到列表中——自动给出文本“3”。

浏览器中视图的当前虚拟 DOM 由一个包含两个项目的列表组成。

1813267a25aedc35d08016c12b7058a1.png

应用程序将一个新项目添加到列表中。Blazor 在新的虚拟 DOM 中表示这一点。

0f84ee4bea84a501c46fc9f2dc2c96f2.png

以下差异树被确定为所需的最少更改次数。在本示例中,是一个新的 <li> 和一个新的文本元素“3”。

cf61e4b23ea148a1d54cf0a410913479.png

然后使用差分渲染树来更新浏览器中的实际 HTML DOM。

示例 2 – 更改显示文本

用户看到列表“One”、“Two”、“3”并决定他们更愿意看到数字。他们单击另一个按钮,该按钮将每个列表项的文本更改为其在列表中的索引。

浏览器中视图的当前虚拟 DOM 由一个包含三个项目的列表组成。

cc4bf679b4edfb9b72872a46a059810a.png

应用程序更改列表中所有项目的文本。同样,Blazor 在新的虚拟 DOM 中表示这一点。

c91e273f322076b330e05154e46618af.png

以下差异树被确定为所需的最少更改次数。在本示例中,只需对现有文本元素进行两次更改。

a8ba403c39ed87083d73af930c5bb093.png

然后使用差分渲染树来更新浏览器中的实际 HTML DOM。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

思科加强生成树性能的属性(Portfast /Uplinkfast/BackboneFast)与RSTP的关系

思科加强生成树性能的属性&#xff08;Portfast/Uplinkfast/BackboneFast&#xff09;与RSTP的关系本文截自于博主CCNP交换技术稿件内容4.2.6思科加强生成树性能的属性&#xff08;Portfast/Uplinkfast/BackboneFast&#xff09;与RSTP的关系首先说明一下&#xff0c;为什么笔者…

数据结构(java语言描述)顺序栈的使用

&#xff11;&#xff0e;声明Istack接口&#xff1b; package stack;public interface Istack { public void clear(); public boolean isEmpty(); public int length(); public Object peek(); public void push(Object x) throws Exception; public Objec…

sql LEFT JOIN RIGHT JOIN(左连接)(mysql)

我们首先来看我们的两个表&#xff1a; table1: table2: 在这里&#xff0c;LEFT JOIN&#xff08;内连接,或等值连接&#xff09;&#xff1a;取得左表&#xff08;table1&#xff09;完全记录&#xff0c;即是右表&#xff08;table2&#xff09;并无对应匹配记录。 …

linux shell之xargs 、tr、sha1sum、head、tail一般使用

1 xargs命令 有点类似-exec命令 1&#xff09;删除当前目录下面的c文件 find . -name "*.c" | xargs rm 2&#xff09;统计当前c文件里面的代码行数 find . -name "*.c" | xargs wc -l 2 tr命令 替换命令 1&#xff09;把大小替换成小写 echo &quo…

php的_auto,AutoPHPCheck下载

AutoPHPCheck官方版是一款相当优秀的php开发人员专用PHP验证工具&#xff0c;AutoPHPCheck官方版功能全面&#xff0c;便捷好用&#xff0c;支持执行快速验证来帮助您确保代码的安全性&#xff0c;并且软件还附带了一个基本的语法检查器&#xff0c;可以查找并帮助您处理错误。…

python0表示剪刀_石头,纸,剪刀Python代码。帮助简化

我是Python新手&#xff0c;只写过几个程序。这是我最近为一个“石头剪子”游戏编写的代码。我已经测试过了&#xff0c;效果很好。有什么方法可以简化它吗&#xff1f;谢谢&#xff01;import randomwins0losses0ties0rounds0r1 #rockp2 #papers3 #scissorsy "The compu…

Google图片加载库Glide的简单封装GlideUtils

Google图片加载库Glide的简单封装GlideUtils

【ArcGIS遇上Python】Python实现点转栅格(PointToRaster)

在ArcGIS中提供了点转栅格(PointToRaster)的工具,如下所示: 参数说明: (1)file:点图层(.shp) (2)data:值字段 (3)outFile:转换后的栅格图层 (4)9660.848118:空间分辨率 python批处理代码: import arcpy arcpy.gp.overwriteOutput=1 arcpy.env.workspace=&…

ASP.NET Core认证授权方案

前言在前面我讲过基于token的权限认证&#xff0c;然后前几天有小伙伴私信我&#xff0c;怎么做一个身份认证也就是授权。在Asp.net Core常见的授权方式有:基于角色的授权&#xff0c;有基于声明的授权&#xff0c;有基于策略的授权&#xff0c; 这三种授权我就不做过多介绍了,…

linux基础知识个人总结

linux基础知识个人总结第一章&#xff1a;1. Linux发展史略&#xff0c;有代表性的Linux发行版&#xff1a;Suse、slackware、ubuntu、RedHat、CentOS2. GNU是Richard Stallman在1983年发起的一项自由软件运动&#xff0c;目标是为了创建一套完全自由的操作系统&#xff0c;它要…

linux shell之pushd、popd、dirs

1 问题 我们有时候需要保存多个路径&#xff0c;上下键切换不方便&#xff0c;用cd-只能到上个目录&#xff0c;我们可以用dirs和pushd和popd 2 dirs、pushd、popd dirs: 这个命令显示栈里面所有的路径&#xff0c;一定会包含当前路径,常用参数如下 dirs -v 显示栈里面的所有…

插入排序—直接插入排序(Straight Insertion Sort)

基本思想: 将一个记录插入到已排序好的有序表中&#xff0c;从而得到一个新&#xff0c;记录数增1的有序表。即&#xff1a;先将序列的第1个记录看成是一个有序的子序列&#xff0c;然后从第2个记录逐个进行插插入到已入&#xff0c;直至整个序列有序为止。 要点&#xff1a;设…

SQL UNION 和 UNION ALL 操作符(mysql)

首先看两个表&#xff1a; table1: table2: 如果我们要查询table1表和 table2表中的 name1的值&#xff0c;但是不存在重复的值一起输出出来&#xff0c;那么就可以用union操作符&#xff1a; SELECT name1 FROM table1 UNION SELECT name1 FROM table2 结果我们会查…

redis php方案,Redis三种部署方案图文详解

standaloan(单机模式)standaloan 是redis单机模式&#xff0c;及所有服务连接一台redis服务&#xff0c;该模式不适用生产。如果发生宕机&#xff0c;内存爆炸&#xff0c;就可能导致所有连接改redis的服务发生缓存失效引起雪崩。(推荐&#xff1a;redis视频教程)ssentinel(哨兵…

【ArcGIS遇上Python】Python版的ArcGIS栅格计算器模板

python编写的栅格计算器&#xff0c;用于批处理。 import arcpy from arcpy.sa import * arcpy.CheckOutExtension("spatial") arcpy.gp.overwriteOutput1#custom arcpy.env.workspace"G:\\Phenology of 30 Years\\GIMMS 3g\\15Length\\1Length\\" #custo…

抛开flash,自己开发实现C++ RTMP直播流播放器

众所周知&#xff0c;RTMP是以flash为客户端播放器的直播协议&#xff0c;主要应用在B/S形式的场景中。本人研究并用C开发实现了RTMP直播流协议的播放器&#xff0c;结合之前做的RTMP直播采集端&#xff0c;可以将RTMP协议完全扩展到C/S形式的应用场景中&#xff0c;这将对之后…

python用户输入若干个分数_编写一个程序,要求用户输入五个测试分数。与字母grad对应...

Determine_grade-接受单个数字作为参数&#xff0c;并根据以下评分标准显示分数的字母等级&#xff1a;Score 90-100 80-89 70-79 60-69 Below 60Letter Grade ABCDFcalc_average-以分数列表作为参数&#xff0c;显示分数的平均值&#xff0c;以及与该平均值相等的字母分数。ma…

.NET 程序读取当前目录避坑指南

前些天有 AgileConfig 的用户反映&#xff0c;如果把 AgileConfig 部署成 Windows 服务程序会启动失败。我看了一下日志&#xff0c;发现根目录被定位到了 C:\Windows\System32 下&#xff0c;那么读取 appsettings.json 配置文件自然就失败了。var builder new Configuration…

linux之sed命令

1 sed命令(stream edit) 我们一般用来替换文件内容 2 常用方法 1)、比如一般用sed命令替换文件内容&#xff0c;这里参数-i的意思是操作后直接保存在file里面去了 sed -i s/pattern/replace_str/ file 比如我们把sed.txt文件里面的chenyu替换成chen cat sed.txt chenyu ch…

Liststring[] 如何去重

List<string[]> 如何去重&#xff0c;代码如下: static void Main(string[] args){List<string[]> list new List<string[]>();list.Add(new string[] { "1", "2", "3" });list.Add(new string[] { "1" });list.Ad…