CSS reflow案例实例教程

日期:2021-03-13 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店

frame关键的姿势有3个:

* 结构frame, 以创建目标树(DOM树)
* reflow, 以明确目标部位,或是启用mozilla的Layout(这里是指源代码的完成)
* 绘图,便于目标能显示信息在显示屏上

总的来讲,reflow便是加载內容树(在HTML中便是DOM树)和建立或升级frame构造的回应的1种全过程。

要提升网页页面特性,实际上便是防止reflow的花销。那末,有哪些层面是必须reflow的呢?例如,未特定照片宽高的话,照片的加载会使网页页面 reflow, 由于要依据照片宽高来升级frame。这里就有1个提升网页页面特性的小窍门:假如事前可以明确照片宽高的话,最好是在HTML里写上。

在撰写1些普遍的动态性实际效果时,1般应用CSS的display来切换可见性。很悲剧,这也会造成reflow. 把元素置为display:none,非常于把这个元素的frame消毁了,再置回非none时,必须再次结构frame,这就造成了reflow. 而此外1个切换可见性的特性visibility则不存在reflow难题,置为visibility:hidden的元素的frame并沒有消毁,必须显示信息的情况下实际上便是1个绘图(上面提到的姿势第3步)全过程罢了,沒有reflow,因而高效率会更高。假如你看过1些JavaScript库/架构的源代码,会发现它们很多应用visibility而并不是display,道理当该这般。

依据文中提到的reflow,想起的疑点:

<div>
<div>…content…</div>
<div><img src="" /></div>
</div>
当在HTML里没特定照片的宽高时,reflow只是对于img元素還是它的父元素乃至更多先祖元素?

在基本网页页面广州中山大学量用到的标识切换状况也相近?你了解吗?