一、前言
最近因为项目要求,开始学习并且使用React和Ant Design框架。在前端开发过程中,遇到这样一个页面:有多个tab,每个tab下都是一个table表格来进行数据展示。但,每个table的title都是一样的,如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面,我们一起来瞧瞧。
二、性能优化和逻辑分析
2.1、性能优化
在开发中,最大程度上对性能进行优化,是开发人员的不懈追求。对于前端开发而言,操作尽可能少的DOM的,是页面性能优化的一个重要部分。
为什么这样说呢,来看看下面这个简化版的,浏览器输入url到网页显示的整个过程就明白了:
- 浏览器输入url并回车
- 域名解析
- 发起TCP三次握手
- 发送HTTP请求
- 服务端响应请求,浏览器得到html代码
- 浏览器解析html代码,并请求html代码中的资源
- 页面渲染呈现给用户
“页面渲染呈现给用户”这最后一步,又是这样一个过程:
- 浏览器把获取到的html代码解析成1个DOM树,html中的每个标签都是DOM树中的一个节点,根节点就是document对象。DOM树中包含了所有html标签
- 浏览器解析所有样式(解析成样式结构体:CSSOM树),在解析的过程中去掉浏览器不能识别的样式
- DOM树和CSSOM树组合后构建render tree
- 等render tree构建完成后,计算像素坐标等一些列准备工作
- 浏览器根据