文档章节

“布局边界”

蓝色犀牛
 蓝色犀牛
发布于 2017/04/24 13:17
字数 1206
阅读 15
收藏 0
点赞 0
评论 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
博文 19
码字总数 5800
作品 0
沙坪坝
其他
CSS3 弹性盒布局模型

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

945996501
2016/05/26
0
0
HTML5 的定位一些重要知识点

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

IT追寻者
2016/05/31
38
0
DIV CSS网站布局八个小技巧

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

罗马教堂的钟声
2015/11/26
43
0
Ubuntu Tweak 0.5.3发布:改善窗口按钮控制

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

红薯
2010/03/15
306
0
Java图形用户界面布局控制Layout练习

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

devops1024
06/27
0
0
小博老师解析Java核心技术 ——JSwing窗体布局

[引言] 我们在学习Java编程的时候,如果需要开发客户端窗体类型的程序,可以使用JDK中的awt和swing库。本文开始小博老师就继续为大家演示如何实现Java窗体布局,达到美化界面的效果。 [步骤阅...

博为峰教研组
2016/12/15
12
0
谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度...

tianxiaode2008
2015/06/27
0
0
Css关于浮动造成父级塌陷的总结

基础概念 文档流: 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 脱离文档流 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候...

从零_开始
2017/10/09
0
0
14.5-全栈Java笔记:java.awt这些布局怎么写?|流式|边界|网格

布局管理器 读者会发现,如果使用坐标定位法(空布局),在一个比较复杂的界面上定位每个控件的坐标是一个非常麻烦的工作,而且在界面大小发生改变时,控件的绝对位置也不会随之发生改变。那...

全栈Java
06/26
0
0
再读规范中浮动与定位细节

前言 如题,浮动与定位是布局中重要且基础知识点,相关规范和书籍都有篇幅解读。但具体细节,笔者初读囫囵吞枣,几经再读受益匪浅。感叹规范,简明扼要,字字珠玑 。借此行文,着笔细节,竭尽...

2017/12/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
9
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0
分布式事务常见的解决方案

随着互联网的发展,越来越多的多服务相互之间的调用,这时候就产生了一个问题,在单项目情况下很容易实现的事务控制(通过数据库的acid控制),变得不那么容易。 这时候就产生了多种方案: ...

小海bug
昨天
3
0
python从零学——scrapy初体验

python从零学——scrapy初体验 近日因为一些事情,需要从网上爬取一些东西,故而想通过使用爬虫来顺便学习下强大的python。现将一些学习中遇到的问题记录下来,以便日后查询 1. 开发环境的准...

咾咔叽
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部