控制元素在页面的显示是控制元素display还是直接动态添加元素

Question

哪个方法更好，性能更好

Answer 1

首先这两种处理方法应该是应对两种需求时使用的,

一. 按题主说的display:

能够复用的一个元素(同一个).
这时显示/隐藏比较好.
显示/隐藏方式:

1. $().show/hide

2. dom.style.display

3. class

二. 动态添加:

同一模板多次使用.
比如一个列表, 动态添加item.

Answer 2

看你的项目需求
1.如果是针对一个元素做变更的话（例如类似模态框，顶部导航，手风琴展示什么的）

使用display就足够了 同时也便于阅读

2.如果是需要修改多个元素的（例如后台提供数据页面添加图片展示）

使用动态添加 统一模板样式 的元素

从性能上来看 动态的肯定要差一点

Answer 3

单从动态加载和显示隐藏来说

显示隐藏完爆动态加载，性能角度来说，如果有兴趣可以做一个测试，加载大量dom的情况下，如果display：none;
被隐藏掉的元素，基本上不消耗系统性能，这点做过移动端的应该都有体会。
反而如果频繁的动态加载和删除，会不断地创建、删除dom，这对性能消耗相当大.