display: none 时内部元素会占用内存空间吗?

display: none 时内部元素会占用内存空间吗?

display: none 时内部元素会占用内存空间吗?

场景

现有大数据界面展示,分为 tablechart 两个区,数据量会达到 50w,此时绘出 table 后切换 chart 时,应该使用 display: none 来隐藏 dom 还是 remove dom 会对性能好点?,目前 table 是全量渲染,过大的内存使用也会导致页面卡顿吧?求解!!!


回答:

display:none依然会占用DOM的内存空间。渲染引擎会遍历所有的dom,即便不显示也得处理。
对于你这种需求,我的建议使用canvas绘制,而不是用dom拼。


回答:

行内元素和块元素的概念和相关知识:

行内元素与块元素
行内元素也叫内联元素,块元素有点也叫行元素。
行级元素和块级元素
元素是通过display的属性值来划分的:block块元素 inline行内元素 inline-block行内块元素

块级元素具有以下特点:
1.总是新行上开始,占据一整行;
2.高度,行高以及外边距和内边距都可控制;
3.宽在未设置情况下与浏览器的宽度一样,与内容无关;
4.它可以容纳内联元素和其他块元素。

行内元素的特点:
1.和其他元素都在一行上;
2.内联元素不可以设置宽和高、垂直的margin和padding !!
3.宽度只与内容有关;
4.行内元素只能容纳文本和其他行内元素。

元素类型 独占一行 能设置宽高 margin,padding值
块级元素 是 是 四个都可以设置
内联元素 否 否 竖直的不可设置

在查询资料的时候有发现了一个东西就是

p元素内不能嵌套div元素
然后我去做了试验:

<p>1111<div>222</div>333</p>
1
效果如下:
然后查询相关解释:为什么p元素不能嵌套div元素

p元素有默认样式!最好设置margin:0;padding:0;
然后又想到文档流这个概念:
html文档流:
自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素。

拓展:
inlne-block有几像素的误差!!!

语义化的好处:
1.去掉或样式丢失的时候能让页面呈现清晰的结构。
2.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
3.便于团队开发和维护。

以上是 display: none 时内部元素会占用内存空间吗? 的全部内容, 来源链接: utcz.com/p/935851.html

回到顶部