CSS知识点：Web标准、display与visibility的区别及页面回流重绘

"最新面试中的CSS知识点概览" 在最新的面试中，CSS是技术讨论的重要部分，特别是关于WEB标准和W3C的理解以及其实践应用。遵循W3C的Web标准意味着编写规范的HTML，包括标签的正确闭合、小写字母书写、避免嵌套混乱，这些都有助于提升搜索引擎对网页内容的抓取效率。此外，推荐将CSS和JavaScript通过外部链接引入，以实现结构与行为、结构与表现的分离，这不仅加快了页面的渲染速度，还使代码更加清晰，降低了维护成本，方便未来网站改版。 在CSS中，`display:none`和`visibility:hidden`是两种不同的隐藏元素的方法。`display:none`会使元素完全从文本流中移除，不占用空间，而`visibility:hidden`则保持元素的占据空间，只是使其不可见，类似设置透明度为0。从性能角度看，`visibility:hidden`优于`display:none`，因为后者在切换显示时会导致页面回流，即页面结构需要重新计算和布局，而前者只改变外观，不涉及布局变化。 页面回流和重绘是浏览器渲染过程中的关键步骤。回流（reflow）发生在元素的尺寸、布局或隐藏状态改变，导致整个或部分渲染树需要重新构建，以反映这些更改。而重绘（repaint）则发生在元素的视觉样式改变但不影响布局的情况下，如颜色、背景或边框样式的变化。值得注意的是，回流必然伴随着重绘，但重绘不一定导致回流。两者都会消耗性能，特别是在频繁发生时，因此在编写CSS时应尽量避免不必要的回流和重绘，例如通过使用CSS3的转换和动画，或利用CSS的`position: absolute/fixed`和`z-index`来分离元素，减少对主布局的影响。 回流通常会在以下情况发生：首次加载页面、布局变化、元素尺寸或定位改变、浏览器窗口大小调整以及内容大小变化等。重绘通常发生在改变颜色、背景、边框等不影响布局的样式属性时。为了优化页面性能，可以采用一些策略，如延迟加载、使用CSS3的`will-change`属性预判即将改变的属性，或者使用绝对定位和固定定位来隔离元素，减少对主布局的影响。 理解并掌握这些CSS知识点对于面试和实际项目开发都至关重要，它们有助于创建高效、可维护且用户体验良好的网页。