CSS优化与BFC理解:display、visibility与回流重绘
"本文主要介绍了CSS中的display:none与visibility:hidden的区别,页面回流与重绘的概念及优化策略,以及对Block Formatting Context(BFC)的理解。这些知识点对于前端开发者来说,尤其是在面试中,是非常重要的考察点。" 在前端开发中,理解和掌握CSS的display:none与visibility:hidden的区别至关重要。display:none会使得元素完全从页面布局中消失,不占据任何空间,而visibility:hidden则保留元素的空间,只是使其不可见,相当于透明度为0。在性能方面,visibility:hidden相对较好,因为它不会引发页面回流,而display:none在切换显示时会导致页面结构的重新计算,即回流,这通常比重绘更耗性能。 页面回流(reflow)和重绘(repaint)是浏览器渲染过程中的两个关键概念。回流涉及到元素尺寸、布局的改变,如修改width、height、padding、margin等属性,或者窗口大小变化、元素隐藏/显示等,都会触发回流。回流会导致整个或部分渲染树的重新布局,进而影响页面的整体结构。而重绘则主要指元素的外观改变,如颜色、边框样式等,只改变元素的视觉效果,而不影响布局。回流必然伴随着重绘,但重绘不一定引发回流。 为了优化页面性能,开发者可以采取以下策略: 1. 批量处理样式修改和DOM操作,避免频繁触发回流和重绘。 2. 避免使用table进行页面布局,因为table元素的任何改动都可能导致整个表格的回流。 3. 对于像offsetWidth这样的计算属性,获取后应存储在缓存中,减少重复计算。 Block Formatting Context(BFC)是CSS布局中的一个核心概念,它是块级元素布局的独立区域,其中的元素布局不受外部元素影响,反之亦然。BFC的创建可以帮助解决浮动元素引起的问题,防止内容被浮动元素覆盖,并且可以实现垂直方向上的自动填充(auto margins)。BFC的布局规则包括内部元素从顶部开始按顺序垂直排列,浮动元素也被包含在内,同时BFC区域不会与float元素重叠。 理解并掌握这些CSS和页面渲染的基本原理,对于提升前端开发的性能优化能力和问题解决能力具有重要意义,特别是在面试中,这些知识点常常是考察候选人技术深度的关键点。
![](https://csdnimg.cn/release/download_crawler_static/18414715/bg9.jpg)
![](https://csdnimg.cn/release/download_crawler_static/18414715/bga.jpg)
![](https://csdnimg.cn/release/download_crawler_static/18414715/bgb.jpg)
剩余51页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 2
- 资源: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)