一、说点原则
阐述:浏览器在获得服务器发来的HTML文档的时候,会首先根据文档构建一个DOM树,然后根据DOM元素的样式计算规划DOM树,这期间浏览器会根据 :a.是否绝对定位划分布局空间产生定位层,b.是否浮动产生静态层/浮动层,(定位层凌驾于浮动层和静态层之上,且和二者没有关系)最后才会根据对它进行渲染,做成你看到的页面。用户浏览页面的时候,一些操作会调用JavaScript更改DOM样式,如果仅仅是外观的改变,会触发浏览器的repaint(重绘)事件,如果更改了DOM元素的布局,那么会触发reflow(回流)事件,回流需要重新计算规划DOM树,比重绘要复杂。所以我们可以总结以下一些原则:
1.能不用绝对定位就不用绝对定位。
2.能不让DOM元素浮动就不让DOM元素浮动。
3.如果绝对定位能解决问题,那么不要浮动。虽然二者都触发了回流事件,但是绝对定位带来的布局空间的堆叠产生定位层和其他层面无太多关系,仍可以被浏览器精确的计算并重新渲染。而浮动元素涉及到静态层和浮动层元素间的布局定位关系,是浏览器渲染引擎更难计算。
(未完待续)