layout是浏览器计算元素的几何信息:元素在页面上的的大小和位置。

每个元素都有明确的亦或含蓄的大小信息,这些信息基于我们使用的css以及元素的内容被高和父亲元素。

这个过程在 Chrome, Opera, Safari, 和Internet Explorer中叫做Layout.在火狐浏览器中叫做Reflow。

  • Layout的范围是整个文档
  • DOM元素的数量将会影响表现性能:你应该尽可能的禁止触发layout
  • 估计layout模型的性能:新的FlexBox比原来的基于float的layout模型要快的多

影响layout性能的是:

  1. 需要layout的元素数量
  2. layout的复杂程度

尽可能避免使用layout

当你修改样式的时候,浏览器会检查你的修改是否会要求layout被计算,如果有的话讲更新render tree。

会触发layout的属性都是“几何的属性”,例如: widths, heights, left, or top 等

.box {
width: 20px;
height: 20px;
} /**
* Changing width and height
* triggers layout.
*/
.box--expanded {
width: 200px;
height: 350px;
}

layout作用于整个文档,所以如果有许多的元素的话,将花费很长的时间来计算元素的位置和大小。

如果不可避免使用layout,那么使用Chrome开发者工具的timeline来追踪查看每个layout的耗费。

我们可以看见上面我们在layout上面花费了20ms多,如果我们在动画上花费了16ms,那么这个动画就耗费太多资源了。

你同样可以看见开发者工具总告诉我们树的大小(在上面的情况中有1618个元素),也告诉我们多少节点需要被layout。

Note

  • 想要一个确切的css属性清单确认哪些属性触发layout,paint和 dimensions ?点击这里:CSS Triggers.

用flexbox替代老的layout模型

网络有一系列的layout模型,一些的支持性相对于其他模型支持性更好。

旧的layout模型允许我们将元素相对定位,亦或绝对定位,亦或float布局在屏幕上。

下面的截图展示了一个layout(在1300个box上使用float布局)的耗费,这是一个手动的例子,因为现实的应用中我们会使用一系列的定位方式来定位元素。

如果我们使用FlexBox来定位元素,下面将展示不同:

现在我们在布局上节省了一些时间(例子中3.5msVS14ms),记住上面的对比是作用在相同的元素且产生相同的效果。

虽然很少的浏览器支持flex布局,但是为了很好的性能,你还是要进行尝试!

查看flexbox布局支持比float少的文档: less widely supported than floats

总而言之,不管你使用的浏览器是否支持flexBox,你都应该尽可能的避免触发layout.

避免强制执行layout

将帧运输到屏幕上的顺序是下面这样的:

先运行js,之后计算样式,然后layout。

但是,我们可以强迫浏览器在js之前执行layout。这被叫做强制执行layout。

首先要知道的是在所有旧的layout上面js可以访问之前帧的任何内容。

下例中,我们想在帧的开始书写一个元素(让我们把它叫做“盒子”)的高度,我们书写代码如下:

// Schedule our function to run at the start of the frame.
requestAnimationFrame(logBoxHeight); function logBoxHeight() {
// Gets the height of the box in pixels and logs it out.
console.log(box.offsetHeight);
}

如果我们在js获取盒子高度之前就改变了盒子的高度样式,那么会产生问题:

function logBoxHeight() {

  box.classList.add('super-big');

  // Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}

现在,浏览器为了计算js中的高度问题,浏览器必须先运行样式的改变(因为代码中加入了super-class样式),然后运行layout。只有这样才能返回正确的高度。这是不必要且耗费巨大的工作。

因为你总是要先读取样式(样式信息保存在之前的帧的layout值中),然后再进行任何的书写操作:

正确的代码是这样的:

function logBoxHeight() {
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight); box.classList.add('super-big');
}

在大多数情况下你不必要先应用样式然后计算值;使用最后一帧的值将变得绰绰有余。强制layout在js之前运行将会耗费巨大,且浏览器将会进入瓶颈,这是我们不想看到的。

避免layout thrashing

比上面强制执行layput更加糟糕的是:连续执行强制layout。

function resizeAllParagraphsToMatchBlockWidth() {

  // Puts the browser into a read-write-read-write cycle.
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}

每一个循环的时候都将读取box的offWidth的值并且将其赋值给一个paragraph(paragraphs[i].style.width)。在洗一次循环的时候,浏览器会计算已经更改的布局,然后再进行layout,每一个循环都会这样的进行!

更改之后变得更加可度:

// Read.
var width = box.offsetWidth; function resizeAllParagraphsToMatchBlockWidth() {
for (var i = 0; i < paragraphs.length; i++) {
// Now write.
paragraphs[i].style.width = width + 'px';
}
}

如果你想确保安全性,你可以在 FastDOM网站上检查。该网站好处。。。。你试过就知道了

避免复杂的layout的更多相关文章

  1. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  3. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  4. [Android]异步 layout inflation(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5829809.html 异步 layout inflation ...

  5. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  6. Android在layout xml中使用include

    Android include与merge标签使用详解 - shuqiaoniu的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/shuqiaoniu/article ...

  7. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  8. compass reset和layout [Sass和compass学习笔记]

    reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...

  9. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  10. Qt And MFC UI Layout

    界面布局 起初,计算机的交互是通过输入的代码进行的, 慢慢的有了图形之后, 就开始了图形界面的交互. 目前来说还有语音交互, 视频交互等多媒体的交互. 不管哪一种交互, 最终在计算机的角度都是信号的输 ...

随机推荐

  1. 从顺序随机I/O原理来讨论MYSQL MRR NLJ BNL BKA

    http://blog.itpub.net/7728585/viewspace-2129502/

  2. fastscript增加公共函数

    fastscript增加公共函数 unit fs_BsCommFuncs; interface{$i fs.inc}uses SysUtils, Classes, fs_iclassesrtti, f ...

  3. Handler处理机制

    handler缺点:如果要运送两种类型的数据(比如一个Bitmap,一个Object)就不能运送,但可以用Bunder来传输  *    使用handler的步骤:  *    1.创建一个handl ...

  4. 快讯 | FireEye在GitHub上开源密码破解工具GoCrack

    近日,FireEye 开源了一款密码破解工具 GoCrack,可在多机器上部署破解任务. GoCrack 是由 FireEye’s Innovation and Custom Engineering ...

  5. [LeetCode][Java] Unique Paths II

    题目: Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. H ...

  6. wdatepicker ie8等问题

    官方文档:http://www.my97.net/demo/resource/2.4.asp 以下内容为使用中遇到的问题,具体该插件具有的方法请自行查阅官方文档. 1.当触发wdatepicker事件 ...

  7. VueJS标签消息显示HTML:v-html

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Android性能优化之中的一个 布局优化

    本文为Android性能优化--布局优化,主要介绍使用抽象布局标签(include, viewstub, merge).去除不必要的嵌套和View节点.降低不必要的infalte及其它Layout方面 ...

  9. kubernetes对象之Ingress

    系列目录 概述 向外网暴露集群内服务,以使客户端能够访问,有以下几种方法,本文重点描述Ingress. LoadBalancer LoadBalancer一般由云服务供应商提供或者用户自定义,运行在集 ...

  10. 对JavaBean创建的一点改进

    在看了<Effective Java>Item2中对JavaBean的描述后,再结合Item1和Builder模式,遂想有没有其他方式避免JavaBean创建的线程安全问题呢? 以如下Ja ...