vuejs源码阅读之优化器

news2024/9/26 5:16:25

在这里插入图片描述

前面讲过vuejs中解析器是把html模版解析成AST,而优化器的作用是在AST中找到静态子树并打上标记。

静态子树是指的那些在AST中永远不会发生变化的节点。

例如,一个纯文本节点就是静态子树,而带变量的文本节点就不是静态子树,因为他会随着变量的变化而变化。

标记静态子树有两点好处。

  • 每次重新渲染时,不需要为静态子树创建新节点
  • 在虚拟DOM中打补丁的过程可以跳过

重新渲染,不需要为静态子树创建新节点

前面介绍虚拟DOM时,我们说每次重新渲染都会使用最新的状态生成一份全新的VNode与旧的VNode进行对比。

而在生成VNode的过程中,如果发现一个节点被标记为静态子树,那么除了首次渲染会生成节点之外,在重新渲染时并不会生成新的子节点树,而是克隆已存在的静态子树。

在虚拟DOM中打补丁的过程可以被跳过

之前说过打补丁的过程,需要对比两个节点并更新DOM。如果两个节点都是静态子树,就不需要进行对比与更新DOM的操作,直接跳过。

因为静态子树是不可变的,不需要对比就知道它不可能发生变化。此外,直接跳过后续的各种对比可以节省javascript的运算成本。

实现步骤

第1步:在AST中找出所有的静态节点并打上标记,
第2步:在AST中找出所有静态根节点并打上标记。

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

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

相关文章

VSCode配置之C++ SQLite3极简配置方案

背景 最近在学习《深入应用C11: 代码优化与工程级应用》,其中第13章说到SQLite库,查询网上诸多教程,发现比较容易出现bug且配置较为麻烦,故记录此次简化版方案,以供参考。 软件环境 SQLite 3.42.0 版本(仅…

基于Rsoft软件的达曼光栅仿真

1、概述 达曼光栅(Dammann grating,DG)是一种典型的二元光学元件(bianry optical elements,BOE),通过二元光学相位变化点的横向位置的调制来实现激光远场多级谱点等强度的光点阵列。 达曼光栅作为一种常用…

ReID网络:MGN网络(1) - 概述

Start MGN 1. 序言 现代基于感知的信息中,视觉信息占了80~85%。基于视觉信息的处理和分析被应用到诸如安防、电力、汽车等领域。 以安防市场为例,早在2017年,行业咨询公司IHS Market,我国在公共和私人领域安装有摄像头约1.76亿…

flask处理文件上传

flask处理文件上传 在Flask框架中,你可以使用request.files对象来处理文件上传。以下是一个简单的文件上传的示例: from flask import Flask, request from werkzeug.utils import secure_filename import osapp Flask(__name__)# 定义文件上传的路径…

二进制的妙用:判别2的幂次方的3把钥匙

本篇博客会讲解力扣“231. 2 的幂”的解题思路,这是题目链接。 这道题有3种巧妙的思路,且听我一一道来。 思路1 如果一个数是2的幂次方,则这个数的二进制中一定有且只有1位是1。比如,1的二进制是1,2的二进制是10&…

Python零基础入门(九)——函数,类和对象

系列文章目录 个人简介:机电专业在读研究生,CSDN内容合伙人,博主个人首页 Python入门专栏:《Python入门》欢迎阅读,一起进步!🌟🌟🌟 码字不易,如果觉得文章不…

Spring 6【方法参数校验、SpingAOP介绍、Schema-based方式实现AOP 】(十四)-全面详解(学习总结---从入门到深化)

目录 4.方法参数校验 SpingAOP介绍 Schema-based方式实现AOP 4.方法参数校验 Spring框架提供了一种校验方法参数的方法,在调用一个方法传入参数后,会判断参数是否满足数据校验。如果满足方法执行,如果不满足:不执行方法&…

Android跨进程传大图思考及实现——附上原理分析

1.抛一个问题 这一天,法海想锻炼小青的定力,由于Bitmap也是一个Parcelable类型的数据,法海想通过Intent给小青传个特别大的图片 intent.putExtra("myBitmap",fhBitmap)如果“法海”(Activity)使用Intent去传递一个大的Bitmap给“…

win10中CUDA cundnn pytorch环境搭建记录

关于在win10中安装cuda cudnn及pytorch全家桶(torch torchvision torchaudio)的详细安装步骤,可以参考这个帖子,说的非常详细! win10下pytorch-gpu安装以及CUDA详细安装过程 仅在此记录一下我的两台电脑安装的环境 目录 一、笔记本环境配置1.…

Leetcode-每日一题【剑指 Offer II 009. 乘积小于 K 的子数组】

题目 给定一个正整数数组 nums和整数 k ,请找出该数组内乘积小于 k 的连续的子数组的个数。 示例 1: 输入: nums [10,5,2,6], k 100输出: 8解释: 8 个乘积小于 100 的子数组分别为: [10], [5], [2], [6], [10,5], [5,2], [2,6], [5,2,6]。 需要注意的是 [10,5,2]…

代码-【5 二叉树非递归后序遍历,找指定结点的父节点】

二叉树T按二叉链表存储,求指定结点q的父节点:

通过一次线上问题,讲下Ribbon重试机制

前言 前段时间,产品经理在线上验证产品功能的时候,发现某个功能不符合需求预期,后来测试验证发现是服务端的一个接口大概率偶现超时,前端做了兜底处理,所以对线上用户么有太大影响。 问题排查过程 由于服务端的接口…

【暑期每日一练】 day8

目录 选择题 (1) 解析: (2) 解析: (3) 解析: (4) 解析: (5) 解析: 编程题 题一 描述…

简单聊聊创新与创造力

文章目录 前言一、大脑运行的两种方式1、聚焦模式2、发散模式3、影响想法的因素a、背景知识b、兴趣c、天赋 4、思维固化 二、想法的不可靠1、对想法进行验证2、颠覆性创新,挤牙膏式创新3、为什么模仿这么多 三、更多更多的idea1、个人的方面a、积累不同的背景知识b、…

怎么在线修改图片?分享一个图片修改工具

无论是在个人或商业领域,我们都需要使用高质量的图片来传达信息或提高品牌形象。大尺寸的图片也会占据大量的存储空间和带宽,影响网站的加载速度和用户体验。因此,我们需要一种高效的工具来解决这个问题。今天向大家介绍一款非常实用的图片处…

(学习笔记-内存管理)内存分段、分页、管理与布局

内存分段 程序是由若干个逻辑分段组成的,比如可由代码分段、数据分段、栈段、堆段组成。不同的段是有不同的属性的,所以就用分段的形式把这些分段分离出来。 分段机制下,虚拟地址和物理地址是如何映射的? 分段机制下的虚拟地址由…

JetBrains 为测试自动化打造的强大 IDE-Aqua

QA 和测试工程对现代软件开发必不可少。 在 JetBrains,我们相信使用正确的工具对每项工作都很重要。 对我们来说,为自动化测试开发创建单独的工具是自然而然的事,因为这使我们能够满足多角色软件开发团队的需求。 我们很高兴能够推出 JetBra…

【Vscode】远程内存占用大

查看远程服务器上的扩展 依次删除,重新连接后观察内存占用 此扩展占用较高,约2G(前后端项目,依赖较多导致)

JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

读取base64图片File file2Base64Image(file, cb) {const reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {cb && cb(e.target.result);//即为base64结果}; }, 读取text、JSON文件File readText(file, { onloadend } {}) {const re…

一个写了3年半flutter的小伙,突然写了2个月uniapp的感悟!

前言 因为某些原因,在过去的三年半时间,我除了flutter之外,很少接触其他的框架,期间除了学习了Android(主要是Kotlin、jetpack)、GoLang Gin之外基本上很少接触其他的框架。而在最近的两个月,突…