Blazor带我重玩前端(二)
概览
Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式。官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版VS2019。 小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究,所以本系列文章只会对Server-Side模式做简要说明。
WebAssembly
WebAssembly模式(也可叫做Client-Side模式),WebAssembly前文已经说了很多了,本文不再做额外讨论。我们主要来看一下ASP.NET Core Blazor是如何实现WebAssembly模式的。Blazor启动后,会将依赖项、.NET运行时以及应用组件下载浏览器,应用将在浏览器上直接运行。其交互如图所示:
同时其UI更新和事件处理也在统一进程中进行,如下图所示:
WebAssembly优点
- Web 程序集在客户端、浏览器内运行,因此可以作为静态文件进行部署。
- 相对于Server-Side模式,当与服务器连接断掉时,依然可以连接,但是涉及到数据库查询等后台功能时,肯定是无法正常工作的。
- 可以减少服务器负载压力。
WebAssembly缺点
- 首次加载时间会比较长,因为它需要下载应用的依赖项、运行时以及 WAT 文件。
- Blazor WebAssembly 仅适用于较新的浏览器,并且对搜索引擎并不友好。
Server-Side
Server-Side模式于2019年9月发布,其目的是使得ASP.NET Core 应用中在服务器上执行应用。 其交互如图所示:
UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接进行处:
Server-Side优点
- Blazor 服务器端已经先于客户端呈现了HTML内容。相对于WebAssembly模式要下载很多的文件,Server-Side的启动速度更快,也对搜索引擎更加友好。
- 由于浏览器端只需要专注于HTML相关内容的展示,这意味Server-Side几乎不会遇到什么兼容性。
Server-Side缺点
- 由于其每个交互HTML由服务器端预呈现,这意味Server-Side无法使用静态化方案。同时其往返流程所涉及到的时间消耗,这也只能使得Server-Side模式可能会有更高的延迟。
- 需要始终与服务器建立活动连接,一旦服务器关闭,应用也将立即停止工作。
- 服务器压力会较大。
Blazor带我重玩前端(二)的更多相关文章
- Blazor带我重玩前端(一)
写在前面 曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,而现在这一切正变得真实…… 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript ...
- Blazor带我重玩前端(三)
写在前面 需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目. WebAssembly 搜索Blazor模板 ...
- Blazor带我重玩前端(四)
布局 Blazor中的布局和MVC中的布局是类似的. 创建布局 新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
- Blazor带我重玩前端(五)
概述 本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...
- Blazor带我重玩前端(六)
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定 概述 如图所示 当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变 ...
- 重学前端 --- Promise里的代码为什么比setTimeout先执行?
首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...
- 「kuangbin带你飞」专题二十 斜率DP
layout: post title: 「kuangbin带你飞」专题二十 斜率DP author: "luowentaoaa" catalog: true tags: mathj ...
- 「kuangbin带你飞」专题二十二 区间DP
layout: post title: 「kuangbin带你飞」专题二十二 区间DP author: "luowentaoaa" catalog: true tags: - ku ...
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
随机推荐
- CentOS7搭建Pacemaker高可用集群(1)
Pacemaker是Red Hat High Availability Add-on的一部分.在RHEL上进行试用的最简单方法是从Scientific Linux 或CentOS存储库中进行安装 环境 ...
- 温故知新-java虚拟机
文章目录 java虚拟机是什么? jvm的体系结构 第一个类加载子系统 类的生命周期 加载器分类 类加载机制 第二个运行时数据区(内存结构) GC算法和收集器 如何判断对象可以被回收? 如何判断一个常 ...
- input常用限制
1.自动过滤空格 onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" onafterpaste="this.va ...
- 线性表 & 散列表
线性表: 数据排成一条线一样的机构,每个线性表上的数据最多只有前后两个方向, 包括 数组,链表,队列,栈. 非线性表 : 数据之间并不是简单的前后关系,有二叉树.图等. 散列表(基于 数组支持按照下标 ...
- 如何向这些CA来申请数字证书呢?
申请的过程大致是: 1.自己本地先生成一对密匙,然后拿着自己的公匙以及其他信息(比如说企业名称啊什么的)去CA申请数字证书. 2.CA在拿到这些信息后,会选择一种单向Hash算法(比如说常见的MD5) ...
- 用Springboot干掉IBM的WAS-为公司省点钱
1 那一夜,你伤害了我 今夜的雨下得凉快,小南睡得正香,突然收到远洋运维小周的电话:Hello, Are you OK? WAS有issue,快起来help me! 只见小南登陆WAS机,查看了机器日 ...
- Jmeter(十) - 从入门到精通 - JMeter逻辑控制器 - 中篇(详解教程)
1.简介 Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”. 意思 ...
- cb42a_c++_STL_算法_替换_replace
cb42a_c++_STL_算法_替换_replacereplace(b,e,ov,nv),ov,old value, nv,new valuereplace_if(b,e,p,v) 根据p的条件,全 ...
- 01 . ELK Stack简介原理及部署应用
简介 ELK并不是一款软件,是一整套解决方案,是由ElasticSearch,Logstash和Kibana三个开源工具组成:通常是配合使用,而且先后归于Elastic.co公司名下,简称ELK协议栈 ...
- 手机U盘制作成系统启动盘后在手机端无法识别
本人最近用手机U盘做了个系统启动盘,突然发现U盘再次插到手机的时候,手机无法识别出U盘了,于是百度了一下,百度结果大概是跟U盘的格式有关.结果我想起了之前用的DiskGenius可以看到u盘的隐藏盘符 ...