文档章节

“布局边界”

蓝色犀牛
 蓝色犀牛
发布于 2017/04/24 13:17
字数 1206
阅读 17
收藏 0

引入“布局边界”

“布局”是浏览器在开始绘制像素之前计算文档中每个元素的位置和大小的过程。布局的过程可能是昂贵的,特别是在低功耗移动设备上。

作为周到的前端开发人员,我们的工作是将布局保持在最低限度,以确保我们的应用保持畅通。尽管如此,布局必须完成。DOM结构更改,元素的尺寸或位置的更改以及通过JavaScript对元素位置或大小的请求,都可以触发布局。

不常见的是布局事件有范围。大多数情况下,布局强制更改到您应用的一小部分,将导致整个文档被回填; 这可能意味着数千个节点。

引入“布局边界”

通过一些小的CSS调整,我们可以在我们的文档中强制布局边界。这意味着如果在布局边界元素的范围内进行任何强制更改的布局,则只需要“部分回流”,这样便宜得多!

要作为布局边界,元素必须:

  • 作为SVG根(<svg>)。
  • 成为文本或搜索<input>字段。

要么:

  • 不显示inlineinline-block
  • 没有百分比高度值。
  • 没有隐含或auto高度值。
  • 没有隐含或auto宽度值。
  • 有一个显式的溢出值(scrollautohidden)。
  • 不是<table>元素的后代。

Paul Lewis的 Boundarizr工具可用于突出显示应用程序中哪些元素作为“布局边界”。

Facebook的例子

为了证明我的观点,我在Facebook上发现了一个可以进行优化的布局案例。当自动完成搜索下拉列表打开时,我们可以在时间轴上看到相当激进的布局,因为元素在列表中被插入和操作。

通过在Chrome Devtools时间轴中悬停布局事件,我们可以看到“布局范围”标记为“整个文档”(以蓝色突出显示),“布局树大小”为2551个节点,“持续时间”为2.142ms

潜入“元素”面板中,我找到一个合适的父节点,其中DOM发生变化。我设置一个基于像素的高度,并设置overflow: hidden。元素已经已经有position: absolute,已经有一个宽度设置,所以我不必介绍这些更改。

这应该强制执行布局边界来将回流范围缩小到文档的一小部分。

我现在运行相同的例程,并在“时间轴”面板中再次观察布局事件。

当我们悬停在布局事件上,我们可以看到蓝色突出显示的区域现在只覆盖我们新推出的“布局边界”元素。“布局范围”现在标记为“部分”,“布局树大小”为228个节点(减少91%),“持续时间”为1.255ms(减少41%)

这是微型优化吗?

在每个布局事件的持续时间方面,〜1ms的保存似乎相当微不足道,但是我们再考虑一点:

  1. 这个事件是当下拉菜单被显示时触发的大约20个类似的事件之一,并且每个事件在CSS调整之后获得类似的保存。
  2. 我们正在Chrome浏览器中的高功率MacBook Air上进行分析。这种类型的环境中的布局速度大大优于即使是最优秀的移动设备。如果我们将布局时间缩短了40%,那么布局速度较慢的设备的增益可能会很大。
  3. 这个特定的布局比较简单。在更复杂的(flexbox,表,浮动等)布局中,我们可能会看到更大的收益。

这个怎么用?

TBH我不是100%肯定的。我猜想通过约束父元素的大小,并确保后代元素不能通过设置overflow: hidden;流出边界,通过假设不需要检查布局边界之外的节点,布局引擎优化。

这只适用于Chrome吗?

TBH我不确定,但是我猜想,其他浏览器布局引擎会在元素样式属性允许时进行类似的优化。

在撰写本文时(AFAIK),我们在其他浏览器的开发人员工具中没有提供与我们相同的布局分析。

如果有一些方法可以测量Chrome以外的浏览器,我很想听到它:)

结论

对我来说,这似乎是我们应该更多地考虑发展的东西。如果我们可以做出一些强化布局边界的超快速风格的改变,那么浏览器的工作量就会减少,我们得到更快的布局时间。

尝试在您的应用程序,让我们知道,如果你能够提高一些快速的性能提升。

本文转载自:http://wilsonpage.co.uk/introducing-layout-boundaries/

共有 人打赏支持
蓝色犀牛
粉丝 0
博文 21
码字总数 5800
作品 0
沙坪坝
其他
CSS3 弹性盒布局模型

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。 弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。 在该布...

945996501
2016/05/26
0
0
Ubuntu Tweak 0.5.3发布:改善窗口按钮控制

最近关于Ubuntu 10.04的新主题的讨论非常热烈,关于Ubuntu把窗口操作按钮放置在左边的设计,引起了用户和开发者的争论。 对于这些,因为每个用户都有自己的喜好,与其争论哪种布局更好,不如...

红薯
2010/03/15
306
0
DIV CSS网站布局八个小技巧

本文向大家介绍一下DIV CSS网站布局的八个小技巧,比如当边界重合时利用padding或border来避免,或者尝试避免同时对元素指定padding/border以及高度或宽度,相信本文介绍一定会让你有所收获。...

罗马教堂的钟声
2015/11/26
43
0
Java图形用户界面布局控制Layout练习

尝试搭建登录对话框,包含两个文字标签(用户名、服务器IP),两个文本输入条(用户名、服务器IP),一个按钮(登录),按照自己认为合适的方式布局。   我把GridLayout(网格布局)、Bor...

devops1024
06/27
0
0
HTML5 的定位一些重要知识点

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即Body的位置)。 对于定位的主要问题是要记住每种定位的意义。所以,现在...

IT追寻者
2016/05/31
38
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos7安装docker和docker-compose

docker-安装 yum update yum install -y docker-engine docker-compose pip install -U docker-compose...

落叶清风
23分钟前
1
0
7个Python实战项目代码,让你感受下大神是如何起飞的!

关于Python有一句名言:不要重复造轮子。 但是问题有三个: 1、你不知道已经有哪些轮子已经造好了,哪个适合你用。有名有姓的的著名轮子就400多个,更别说没名没姓自己在制造中的轮子。 2、确...

糖宝lsh
24分钟前
2
0
【随记】Maven 与mysql 版本(maven mysql 5.1.38用的最多)

MySQL Connector/J 我的电脑mysql版本为5.7.20-log maven pom.xml 依赖可用5.1.38 pom.xml依赖代码 $加<properties>变量名的实例代码 <properties><!-- data --><mysql-connector-ja......

颖伙虫
26分钟前
1
0
观察者模式

意图: 在对象的内部状态发生变化时,自动通知外部对象进行响应。 构成 被观察者:内部状态有可能被改变,而且又需要通知外部的对象。 观察者:需要对内部状态的改变做出响应的对象。 Java实...

noob_fly
33分钟前
1
0
设计模式之 MVC

MVC 是 模块化思想或者分层思想的实践。 当我们设计一个Web应用的时候,我们的业务流是,读取数据库中的数据,进行逻辑处理,渲染到页面;如果是交互型的页面,那么页面有输入或者事件发生的...

backbye
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部