html代码重排,是什么导致重排(layout / reflow)
当在 JavaScript 中调用(requested/called)以下所有属性或方法时,浏览器将会同步地计算样式和布局。重排(也有叫 reflow 或 layout thrashing 的),通常是性能瓶颈。
元素
盒子计算
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()
滚动相关
elem.scrollBy(), elem.scrollTo()
elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
elem.scrollWidth, elem.scrollHeight
elem.scrollLeft, elem.scrollTop,设置它们的值,同样会影响
获得焦点
elem.focus() 可以引起两次重排(源码在此)
还有…
elem.computedRole, elem.computedName
elem.innerText(源码)
getComputedStyle
window.getComputedStyle() 通常会引起样式重新计算(源码)
如果以下任何一种情况存在,window.getComputedStyle() 将会引起重排:
元素在 shadow tree 中
使用了 media queries (viewport相关的一种),特别是以下某一属性:(源码)
min-width, min-height, max-width, max-height, width, height
aspect-ratio, min-aspect-ratio, max-aspect-ratio
device-pixel-ratio, resolution, orientation
获取以下的某一种属性:(源码)
height, width
top, right, bottom, left
margin [-top, -right, -bottom, -left, 或简写] ,仅当 margin 是固定值。
padding [-top, -right, -bottom, -left, 或简写] ,仅当 padding 是固定值。
transform, transform-origin, perspective-origin
translate, rotate, scale
webkit-filter, backdrop-filter
motion-path, motion-offset, motion-rotation
x, y, rx, ry
window
window.scrollX, window.scrollY
window.innerHeight, window.innerWidth
window.getMatchedCSSRules() 仅重新计算样式
表单
inputElem.focus()
inputElem.select(), textareaElem.select()(源码)
鼠标事件
mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY(源码)
document
doc.scrollingElement 仅重新计算样式
Range
range.getClientRects(), range.getBoundingClientRect()
SVG
相当多;没有详尽的清单,但是 Tony Gentilcore’s 2011 Layout Triggering List 指出了一些。
contenteditable
数不胜数,…包含复制图片到剪切板(源码)
附录
Reflow 仅在文档流已经改变,设定无效的样式或布局时,带来一定消耗。通常情况下,是由于 DOM 已经改变(class 名已修改,节点已新增/已移除,甚至添加一个伪类,像 :focus)。
如果引起重排,样式首先必须重新计算。因此重排会触发两种操作。它的消耗非常依赖于内容/形势,但通常两种操作成本相似。
我们该如何避免呢?长话短说:
for 循环里触发重排 & 改变 DOM 性能最低,尽量避免。
使用 DevTools Timeline 看看问题在哪。
合并读写 DOM 操作(通过 [FastDOM])(https://github.com/wilsonpage/fastdom) 或 虚拟 DOM 实现)
啃 Chromium 源码:
触发重排(和重新计算样式):updateLayoutIgnorePendingStylesheets - Chromium Code Search
触发样式重算:updateLayoutTree - Chromium Code Search
CSS Triggers
CSS Triggers 是非常棒的参考资源。设置/改变给出的 CSS 值,在浏览器的生命周期会出现什么结果,会触发哪些操作都有展示。
(责任编辑:最模板)
html代码重排,是什么导致重排(layout / reflow)相关推荐
- java队列火车厢重排_火车车厢重排(链队列)
1.题目: Problem Description 一列货运列车共有n节车厢,每节车厢将停放在不同的车站.假定n个车站的编号分别为1~n,即货运列车按照第n站至第1站的次序经过这些车站.为了便于从列车 ...
- android pdf重排软件,PDF拆分重排(paper for kindle)
PDF拆分重排(paper for kindle)将原有的PDF文件, 拆成适合Kindle的小页PDF. 这样做, 用电脑处理保证了处理速度和准确度; 生成的PDF文件内容仍然为文本, 可以进行标注 ...
- Android代码报错:setContentView(R.layout.activity_main)
在R.layout里面明明看到自动生成了默认的布局activity_main,在这里引用就出错. 在import里面果然找到这么一句: import android.R; 删掉这一句就正常了. 出现这 ...
- java队列火车厢重排_火车车厢重排问题
1 #include 2 #include 3 usingstd::stack;4 usingstd::cin;5 usingstd::cout;6 7 const int MAX = 100; // ...
- java队列火车厢重排_火车车厢重排问题--队列模拟
①问题描述 一列货运列车共有n节车厢,每节车厢将停放在不同的车站.假定n个车站的编号分别为1-n,即货运列车按照第n站至第1站的次序经过这些车站.为了便于从列车上卸掉相应的车厢,车厢的编号应与车站的编 ...
- java队列火车厢重排_火车车厢重排——队列实现
其实队列和栈挺像的,所以也就没有单独写一个实现队列的笔记,可以参考一下栈的实现:https://www.cnblogs.com/2015-16/p/12957964.html (同时这一篇也包含 ...
- html缩小网页时版块乱跑,解决动网论坛最后发表显示代码的问题(或导致首页排版错乱)...
动网论坛作为一个优秀的ASP论坛程序,两年前曾是千千万万站长的选择.虽然动网论坛官方停止了更新,但是由于我一个站用的是动网论坛,转换的话闲麻烦,而且之前做了不少个性化修改,再者我用着感觉也挺快的,也能 ...
- python跑代码电脑卡住_在连续运行python代码时,最终导致我的计算机崩溃
看起来,当我运行我的代码最初几次运行它运行得很好,但在大约第3次到第4次我运行它开始放慢速度.那是我的电脑变得没有反应,因为它似乎发展了一些滞后.最终,这会使我的计算机崩溃,使在空闲状态下编码变得困难 ...
- win10一直蓝屏!一直是这个代码,ntoskrnl.exe导致,要废了。。
几个月了,一直都是这样,刚开始的系统1909,中间用过20H2.21H1,一直到现在的22H2,这个蓝屏问题一直没解决,网上的方式都试了,不行!重装了几次系统也没解决,从WIN10 专业版到现在的家庭 ...
最新文章
- C++ 多线程:互斥对象 lock_gurad
- ASP.NET导出文件FileResult的使用
- jvm性能调优实战 - 42JVM性能优化思路Review
- 【限时】推荐算法工程师培养计划
- P7920-[Kubic]Permutation
- 解决Windows下运行php Composer出现SSL报错的问题
- 中职计算机应用基础微课获奖视频,浅谈微课在中职计算机应用基础教学中的应用...
- cadence 17.2入门学习1
- 原型模式(深克隆、浅克隆)
- separated by semicolons
- 电影文件的合并与分割
- 虚拟机连不上网问题详解
- 深拷⻉和浅拷⻉区别是什么?
- tooth的用法_tooth的复数形式
- BZOJ 3270: 博物馆 1778: 驱逐猪猡 【概率DP+高斯消元】
- Oracle数据库逻辑备份与恢复(3)——数据泵(expdp、impdp)
- visio2007或office 2007安装失败提示一个或多个受保护的windows文件导致office 2007安装失败
- php百度热门关键词小偷,火端搜索2.1源码 PHP百度+好搜小偷程序
- 带你学MySQL系列 | “存储过程”学不会,那是你没有看这篇文章!
- 【环境配置】配置jdk