今晚注定是个不眠夜呀，手贱的同学又要送上一则小文，来分享分享
一：
我们在想对如何隐藏节点这个问题上有所建树的话，那么我们就必须要先知道浏览器渲染引擎的基本工作原理，现在渲染引擎主力军有（Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 使用 Webkit。Webkit是一种开源的渲染引擎）。
渲染的基本流程：
解析HTML构建DOM树——构建渲染树——渲染树布局——绘制渲染树。
如果亲你不知道，请关注这个连接有所介绍：http://ued.ctrip.com/blog/?p=3295
二：
完成上面的脑补之后就可以说说我们的隐藏节点了。有两个CSS语句能起到隐藏节点的作用
1、visibility；
W3c定义的是规定了元素的是否可见，值得注意的是在下面提示部分有一句话说：即使不可见也会占用上面的空间，在这里就是在指它与display的不一样了
2、display；
W3C在说明这个属性的时候是比较客观的，这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
3、对比这两个他们都有相同的功能就是隐藏，而只有知道了他们的不同点我们才可以很好地使用这两种隐藏的方法。
不同点：
当我们定义了display后，在渲染树中不会引擎是不会去构建这个框的。而visibility当我们使它隐藏的时候，他在渲染树中会构建，只是不去渲染。这也就是W3c上面所说的不可见会占空间的原因。他们两者在优化中visibility会显得更好，因为我们不会因为它而去改变了文档中已经定义好的显示层次结构了。
来源：oschina
链接：https://my.oschina.net/u/1436795/blog/221179