Day3 Virtual DOM vs Actual DOM

在介绍react实例之前,首先来介绍一下其操作原理---Virtual DOM,并比较和Actual DOM的差异。

Actual DOM

浏览器在完成连线,并收到HTTP response後,便会开始进行渲染画面阶段,在这阶段浏览器会读取HTML并转换成DOM,DOM展现HTML的内容与架构,开发人员可透过加入CSS style,计算这些样式并放到对应的DOM元素上;或是使用 JavaScript透过DOM来操作画面或功能。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Actual DOM简单练习</title>
  </head>
  <body>
    <h2>一分钟快速建立react</h2>
  </body>
</html>

CSS

  <style>
      h2{
          color: red;
      }
  </style>

CSS JavaScript

  <script>
      var h2 = document.getElementById('app');
      h2.remove();
  </script>

Virtual DOM

Virtual DOM是一个JavaScript物件,存在於Memory中。前端框架便是建立於Virtual DOM中,会先复制一份Actual DOM出来,但不会完整复制全部资讯,只复制出和画面渲染有高度相关的资讯,如HTML tag、tag上面的属性等。每当有事件产生或资料结构有异动时,前端框架会先建立一个新的Virtual DOM,再比较和旧的Virtual DOM差异,将其差异处更新在Actual DOM上。详细的操作方式待明天的React实例作讲解。


<<:  【D18】调整一下步伐,看看现在学到什麽

>>:  Day 03 Benefits and Constraints of Embedded Systems

Day4 - 建立Android模拟器

身为一个没有Android手机的用户 当要测试程序时,又借不到Android手机,怎麽办呢?? An...

# Day 6 Supporting PMUs on RISC-V platforms (二)

今天一样是 Supporting PMUs on RISC-V platforms 相关的内容,先来...

[Day14] Kubernetes

昨天简介完了 Docker 的容器相关内容,今天我们要来介绍的是 Kubernetes (K8S),...

在线传单制作工具介绍

让我们谈谈如何制作成功的商业传单进行促销。宣传传单的主要目的是吸引注意力。无论您是要开设商店还是想吸...

【从零开始的Swift开发心路历程-Day21】简单介绍UIPickerView

今天我们要介绍UIPickerView,UIPickerView可以让你在列表中选择所需要的项目,後...