博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
写页面得来的体会
阅读量:4625 次
发布时间:2019-06-09

本文共 521 字,大约阅读时间需要 1 分钟。

一、说点原则

阐述:浏览器在获得服务器发来的HTML文档的时候,会首先根据文档构建一个DOM树,然后根据DOM元素的样式计算规划DOM树,这期间浏览器会根据 :a.是否绝对定位划分布局空间产生定位层,b.是否浮动产生静态层/浮动层,(定位层凌驾于浮动层和静态层之上,且和二者没有关系)最后才会根据对它进行渲染,做成你看到的页面。用户浏览页面的时候,一些操作会调用JavaScript更改DOM样式,如果仅仅是外观的改变,会触发浏览器的repaint(重绘)事件,如果更改了DOM元素的布局,那么会触发reflow(回流)事件,回流需要重新计算规划DOM树,比重绘要复杂。所以我们可以总结以下一些原则:

1.能不用绝对定位就不用绝对定位。

2.能不让DOM元素浮动就不让DOM元素浮动。

3.如果绝对定位能解决问题,那么不要浮动。虽然二者都触发了回流事件,但是绝对定位带来的布局空间的堆叠产生定位层和其他层面无太多关系,仍可以被浏览器精确的计算并重新渲染。而浮动元素涉及到静态层和浮动层元素间的布局定位关系,是浏览器渲染引擎更难计算。

(未完待续) 

转载于:https://www.cnblogs.com/JhoneLee/p/CSS.html

你可能感兴趣的文章
设计模式六大原则
查看>>
centos7 --ngnix 常用命令:
查看>>
flask+jsonp跨域前后台交互(接口初体验)
查看>>
Eclipse+Maven+springmvc+HelloWorld--Eclipse Maven springMVC第一个HelloWorld吐血配置整理
查看>>
传Windows 8.1系统将重新加入开始按钮
查看>>
C# 自定义异常的方法源码演示及说明
查看>>
输出与输出:putchar() getchar() printf() scanf() puts() gets() sscanf()
查看>>
文档翻译-Minimizing your app's Memory Footprint
查看>>
[Unity优化]批处理01:Statistics窗口
查看>>
自然数的拆分(DFS)
查看>>
nodejs websocket
查看>>
SQLAlchemy_定义(一对一/一对多/多对多)关系
查看>>
添加远程库
查看>>
iOS Animation 学习(3)
查看>>
正则化方法:L1和L2 regularization、数据集扩增、dropout
查看>>
Hadoop学习笔记3---安装并运行Hadoop
查看>>
ASP.NET MVC性能优化(实际项目中)
查看>>
《算法法论学习笔记》-- 数组最大子数组(分治法)
查看>>
汇编语言 第二章
查看>>
Windows Server 2008 R2 配置AD(Active Directory)域控制器
查看>>