当前位置: 首页 > news >正文

理解框架的编译时与运行时

首先我们需要先理解一下什么事编译时和运行时

在语言层面,先来聊一下前端开发者最常遇见的两种语言JavaScriptJava

  • Java的代码就是被编译为.class 文件才能运行,这个编译过程就是编译时,运行 .class 文件就是运行时
  • 我们在浏览器直接输入一些JavaScript代码,就可以执行,并没有经过编译成某个文件。所以我的理解是解释型语言是没有编译时,只有运行时。

JavaScript的编译时和运行时

JavaScript的编译时或运行时,一般指的是现代框架(reactvue)是采用那种思路来实现的。

运行时

一个纯运行时框架就是在我们将DOM的数据结构传入到渲染函数时,就可以直接渲染出真实的DOM结构元素。在我们的项目开发中,假设提供一个被叫做renderAPI,通过给该render函数传入源数据并调用,就可以得到真实的DOM结构,那么我们可以认为该render函数就是一个运行时。
现在有以下数据需要生成dom并挂载到body上

// node是一个虚拟DOM树
// tag为元素的标签
// children为数组时表示子元素,为字符串时表示文本
const node = {tag: 'div',children: [tag: 'h1',children: '运行时']
}

现在需要一个render函数来处理上面的数据

const render = (node, root) => {const el = document.createElement(node.tag);if (typeof node.children === 'string') {// 如果子元素是文本节点,则创建文本节点。const text = document.createTextNode(node.children)el.appendChild(text)} else if (Array.isArray(node.children)) {node.children.forEach(child => {render(child, el)});}root.appendChild(el);
};

有了render函数,我们就可以调用并传参,来实现dom的渲染

const div = document.createElement('div')
render(node, div)
console.log(div)
// 最后打印的结果
/* 
<div><div><h1>运行时</h1></div>
</div>
*/

观察上面的代码,其实在Vue的框架中已经提供了类似的API供我们使用,可以使你利用JavaScript的丰富表达力来完全编程式地声明组件最终的渲染输出。不过为什么我们在使用单文件组件的时候,大多都使用模版语法,这是因为较运行时的render函数的数据,模板语法更直观、书写更方便、语义化更强。

编译时

Vue项目的单文件组件中,我们一般使用的是template模版语法,例如

<div><h1>编译时</h1>
</div>

现在要想将以上模板代码编译成正在的dom结构,就需要先解析上面的模版结构,这里就需要实现一个compiler方法去解析代码,关于compiler的实现稍微较为复杂,其原理可以参考编译器核心原理这篇文章

运行+编译时

现在有了运行时、编译时的简单示例,那么上面的代码可以这样使用:

const html = 
`
<div><h1>编译时 + 运行时</h1>
</div>
`
// 编译,先将模板字符串编译成虚拟DOM树状结构
const compilerData = compiler(html);
// 在使用render函数生成真正的dom结构并挂载
render(compilerData, document.body)

上面就变成了一个简单的编译时+运行时的框架。它既支持运行时,用户可以直接提供数据对象从而无须编译;又支持编译时,用户可以提供 HTML字符串,我们将其编译为数据对象后再交给运行时处理。
如果上面的代码稍微做一下修改,将render的工作直接放到compiler里面去实现,这样我们就省去了调用render的步骤,这样就变成了一个纯粹的编译时框架,我们不需要提供任何数据,只需要提供模版代码就行。

总结

现在我们已经大概了解了什么是运行时编译时编译+运行时、纯编译时等框架的区别,其实在我们使用的现代框架中Vue就是一个编译+运行时的框架。由于它没有编译的过程,因此我们没办法分析用户提供的内容,但是如果加入编译步骤,可能就大不一样了,我们可以分析用户提供的内容,看看哪些内容未来可能会改变,哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信息,然后将其传递给Render函数,Render函数得到这些信息之后,就可以做进一步的优化了。然而,假如我们设计的框架是纯编译时的,那么它也可以分析用户提供的内容。由于不需要任何运行时,而是直接编译成可执行的JavaScript代码,因此性能可能会更好,但是这种做法有损灵活性,即用户提供的内容必须编译后才能用。

另外,Vue的文件名中带有runtimeVue构建版本未包含模板编译器,例如 vue.runtime.esm-bundler.js

相关文章:

理解框架的编译时与运行时

首先我们需要先理解一下什么事编译时和运行时 在语言层面&#xff0c;先来聊一下前端开发者最常遇见的两种语言JavaScript和Java Java的代码就是被编译为.class 文件才能运行&#xff0c;这个编译过程就是编译时&#xff0c;运行 .class 文件就是运行时我们在浏览器直接输入一…...

推挽电路---采用二极管消除交越失真----克服交越失真的互补推挽输出电路图

交越失真产生的原因及消除方法 由于晶体管的门限电压不为零&#xff0c;比如一般的硅三极管&#xff0c;NPN型在0.7V以上才导通&#xff0c;这样在00.7就存在死区&#xff0c;不能完全模拟出输入信号波形&#xff0c;PNP型小于-0.7V才导通&#xff0c;比如当输入的交流的正弦波…...

day11_面向对象

今日内容 零、 复习昨日 一、一日一题(数组,OOP) 二、面向对象练习&#xff08;方法参数返回值&#xff09; 三、局部变量&成员变量 四、this关键字 五、构造方法 六、重载 七、封装 小破站同步上课视频: https://space.bilibili.com/402601570/channel/collectiondetail?…...

大数据处理学习笔记1.1 搭建Scala开发环境

文章目录零、本讲学习目标一、Scala简介&#xff08;一&#xff09;Scala概述&#xff08;二&#xff09;函数式编程&#xff08;三&#xff09;Scala特性1、一切都是对象2、一切都是函数3、一切都是表达式&#xff08;四&#xff09;在线运行Scala二、选择Scala版本三、Window…...

VSCODE C++ 调用matplotlibcpp画图

使用VSCODE编写C程序&#xff0c;想在调试过程中看中间数据的波形&#xff0c;于是找到了python的matplotlibcpp库&#xff0c;参考文章链接是&#xff1a;https://blog.csdn.net/weixin_43769166/article/details/118365416&#xff1b;按照他的步骤配置好之后&#xff0c;跳出…...

面对“开门红”,跨境支付如何寻求新增长曲线?

易观&#xff1a;2022年是第三方支付行业洗牌加剧的一年&#xff0c;在部分机构选择退出的过程中&#xff0c;也有机构开始瞄准跨境业务&#xff0c;成为了支付机构转型的重要方向之一。跨境支付是指两个或及其以上的国家或地区进行国际贸易、国际投资或其他经济活动&#xff0…...

MySQL入门篇-MySQL MHA高可用实战

MHA简介 MHA&#xff08;Master High Availability&#xff09;目前在MySQL高可用方面是一个相对成熟的解决方案&#xff0c;它由日本DeNA公司的youshimaton&#xff08;现就职于Facebook公司&#xff09;开发&#xff0c;是一套优秀的作为MySQL高可用性环境下故障切换和主从提…...

C语言文件操作

目录1.文件指针2.文件的打开和关闭3.文件的读写3.1文件的顺序读写fgetc和fputcfgets和fputsfscanf和fprintffread和fwrite3.2文件的随机读写fseekftellrewind4.文本文件和二进制文件5.文件读取结束的判定6.文件缓冲区1.文件指针 在文件操作中&#xff0c;一个关键的概念是文件…...

Flink中核心重点总结

目录 1. 算子链 1.1. 一对一&#xff08;One-to-one&#xff0c; forwarding&#xff09; 1.2. 重分区&#xff08;Redistributing&#xff09; 1.3. 为什么有算子链 2. 物理分区&#xff08;Physical Partitioning&#xff09; 2.1. 什么是分区 2.2. 随机分区&#xff…...

gismo中NURBS的相关函数的使用---待完善

文章目录 前言一、B样条的求值1.1 节点向量的生成1.2 基函数的调用1.3 函数里面的T指的是系数类型二、以等几何两个单元12个控制点为例输出的控制点坐标有误1.4二、#pic_center <table><tr><td bgcolor=PowderBlue>二维数2.12.22.32.4三、3.13.23.33.4四、4.…...

5.数据共享与持久化

数据共享与持久化 在容器中管理数据主要有两种方式&#xff1a; 数据卷&#xff08;Data Volumes&#xff09;挂载主机目录 (Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录&#xff0c;它绕过UFS&#xff0c;可以提供很多有用的特性&#xff1a; 数据…...

RabbitMQ-客户端源码之AMQCommand

AMQCommand不是直接包含Method等成员变量的&#xff0c;而是通过CommandAssembler又做了一次封装。 接下来先看下CommandAssembler类。此类中有这些成员变量&#xff1a; /** Current state, used to decide how to handle each incoming frame. */ private enum CAState {EXP…...

linux设置登录失败处理功能(密码错误次数限制、pam_tally2.so模块)和操作超时退出功能(/etc/profile)

一、登录失败处理功能策略 1、登录失败处理功能策略&#xff08;服务器终端&#xff09; &#xff08;1&#xff09;编辑系统/etc/pam.d/system-auth 文件&#xff0c;在 auth 字段所在的那一部分添加如下pam_tally2.so模块的策略参数&#xff1a; auth required pam_tally2…...

Centos7上Docker安装

文章目录1.Docker常识2.安装Docker1.卸载旧版本Docker2.安装Docker3.启动Docker4.配置镜像加速前天开学啦~所以可以回来继续卷了哈哈哈&#xff0c;放假在家效率不高&#xff0c;在学校事情也少点(^_−)☆昨天和今天学了学Docker相关的知识&#xff0c;也算是简单了解了下&…...

新瑞鹏“狂飙”,宠物医疗是门好生意吗?

宠物看病比人还贵&#xff0c;正在让不少年轻一族陷入尴尬境地。在知乎上&#xff0c;有个高赞提问叫“你愿意花光积蓄&#xff0c;给宠物治病吗”&#xff0c;这个在老一辈人看来不可思议的魔幻选择&#xff0c;真实地发生在当下的年轻人身上。提问底下&#xff0c;有人表示自…...

Spring循环依赖问题,Spring是如何解决循环依赖的?

文章目录一、什么是循环依赖1、代码实例2、重要信息二、源码分析1、初始化Student对Student中的ClassRoom进行Autowire操作2、Student的自动注入ClassRoom时&#xff0c;又对ClassRoom的初始化3、ClassRoom的初始化&#xff0c;又执行自动注入Student的逻辑4、Student注入Class…...

更改SAP GUI登录界面信息

在SAP GUI的登录界面&#xff0c;左部输入登录信息如客户端、用户名、密码等&#xff0c;右部空余部分可维护一些登录信息文本&#xff0c;如登录的产品、客户端说明及注意事项等&#xff0c;此项操作详见SAP Notes 205487 – Own text on SAPGui logon screen 维护文档使用的…...

分布式微服务架构下网络通信的底层实现原理

在分布式架构中&#xff0c;网络通信是底层基础&#xff0c;没有网络&#xff0c;也就没有所谓的分布式架构。只有通过网络才能使得一大片机器互相协作&#xff0c;共同完成一件事情。 同样&#xff0c;在大规模的系统架构中&#xff0c;应用吞吐量上不去、网络存在通信延迟、我…...

进大厂必备的Java面试八股文大全(2023最新精简易懂版,八股文中的八股文)

为什么同样是跳槽&#xff0c;有些人薪资能翻三倍&#xff1f;” 最近一个粉丝发出了灵魂拷问&#xff0c;类似的问题我收到过很多次&#xff0c;身边也确实有认识的同事、朋友们有非常成功的跳槽经历和收益&#xff0c;先说一个典型例子&#xff1a; 学弟小 A 工作一年半&am…...

都说测试行业饱和了,为什么我们公司给初级测试开到了12K?

故事起因&#xff1a; 最近我有个刚毕业的学生问我说&#xff1a;我感觉现在测试行业已经饱和了&#xff0c;也不是说饱和了&#xff0c;是初级的测试根本就没有公司要&#xff0c;哪怕你不要工资也没公司要你&#xff0c;测试刚学出来&#xff0c;没有任何的项目经验和工作经验…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...