如何使用只使用HTML和CSS的流程图图

2023-03-27 00:30:01html-css012

如何使用只使用HTML和CSS的流程图图,第1张

给个思路吧，一共分两层，外层div是一个时间和任务的二维坐标系，里层div是gantt图，整个gantt图大概有三个对象，一个bar是任务计划时间，一个progress是当前完成百分比，还有一个是date日期对象。bar和progress的值都从数据库来或者是传入的json数据，bar和progress的颜色不同，两者重叠表示一个任务的进度。date限定起始时间和结束时间。其他的一些添加子任务删除任务就不说了。

我觉得你现在是没有搞清楚html中对区块的划分，这张图明显是先分左右两大块，左边再分上中下三块，右边1、2、3、4，四块，再往里面填充内容，你看划分图

我帮你写个框架，其他的细节和内容你自己去填

<style>

*{ margin:0 padding:0 list-style:none}

.wap{ width:990px height:auto margin:0 auto}

.leftBox{ width:754px height:auto float:left border:1px solid red}

.rightBox{ width:220px height:auto float:right border:1px solid red}

.nrBox{ margin-bottom:13px border:1px solid #00F}

</style>

<div class="nrBox" style="height:215px">个人信用调查(高215)</div>

</div>

<div class="nrBox" style="height:227px">个人信用调查(高227)</div>

</div>

1. 为什么需要虚拟DOM

先介绍浏览器加载一个网页需要经历那些过程；我们只讨论页面解析流程，不考虑网络请求过程。

浏览器内核拿到html文件后，大致分为一下5个步骤：

1. 解析html元素，构建dom 树

2. 解析CSS，生成页面css规则树（Style Rules）

3. 将dom树和 css规则树关联起来，生成render树

4. 布局（layout/ reflow），浏览器会为Render树上的每个节点确定在屏幕上的尺寸、位置

5. 绘制Render树，绘制页面像素信息到屏幕上，这个过程叫paint

当你用原生js 或jquery等库去操作DOM时，浏览器会从构建DOM树开始讲整个流程执行一遍，所以频繁操作DOM会引起不需要的计算，导致页面卡顿，影响用户体验。而Virtual DOM能很好的解决这个问题。它用javascript对象表示virtual node(VNode)，根据VNode 计算出真实DOM需要做的最小变动，然后再操作真实DOM节点，提高渲染效率。

2. Virtual DOM

虚拟DOM用javascript对象来表示VNode，VNode的结构如下：

虚拟节点（vNode）结构

下面是虚拟DOM的算法流程图：

虚拟DOM算法流程图

React Diff算法

高效的diff算法能够保证进行对实际的DOM进行最小的变动。但是标准的的 Diff 算法复杂度需要 O(n^3)，这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的，势必需要对算法进行优化。React里结合 Web 界面的特点做出了两个简单的假设，使得 Diff 算法复杂度直接降低到 O(n)。

1. 两个相同组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构；

2. 对于同一层次的一组子节点，它们可以通过唯一的 id 进行区分。

算法上的优化是 React 整个界面 Render 的基础，保证了整体界面渲染的性能。

不同节点类型的比较

为了在树之间进行比较，我们首先要能够比较两个节点，在 React 中即比较两个虚拟 DOM 节点，当两个节点不同时，应该如何处理。这分为两种情况：（1）节点类型不同，（2）节点类型相同，但是属性不同。

节点类型不同：直接删除原节点，插入新节点。

React 的 DOM Diff 算法实际上只会对树进行逐层比较，两棵树只会对同一层次的节点进行比较如下所述。

dom树

React 只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

相同类型节点的比较

React 会对属性进行重设从而实现节点的转换。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”