chrome对页面重绘和回流以及优化进行优化
页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。
回流与重绘
1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
2. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
注意:回流必将引起重绘,而重绘不一定会引起回流。
回流何时发生:
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流:
页面渲染初始化;
调整窗口大小(Resizing the window),浏览器窗口尺寸改变——resize事件发生时
增加或者移除样式表(Adding or removing a stylesheet)
元素位置改变、元素尺寸改变——width/height/padding/border/margin
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
改变字体(Changing the font)
激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
操作 class 属性(Manipulating the class attribute)
脚本操作 DOM(A script manipulating the DOM),添加或者删除可见的DOM元素;
计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)
设置 style 属性的值 (Setting a property of the style attribute)
这么多,分类整理记忆下:
js请求以下style信息时,触发回流(浏览器会立刻清空队列:)
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height
getComputedStyle()
getBoundingClientRect()
css中如下属性,触发回流
width/height/padding/border/margin
font/line-height/font-weight/
postion/display/float/clear/
js操作DOM,修改class属性,修改样式表,修改文档内容,修改元素计算样式
让我们看看下面的代码是如何影响回流和重绘的:
ar s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node,再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));
然而这些都是意淫:那么
怎么监控重绘回流
chorme 按下:f12,然后按下 esc……
但是,我按了没有 readering
那是你没有勾选啊,console 旁边有三点是不是,点击,然后勾选,rendering……
以上5个选项的意思如下:
Show paint rectangles 显示绘制矩形
Show composited layer borders 显示层的组合边界(注:蓝色的栅格表示的是分块)
Show FPS meter 显示FPS帧频
Enable continuous page repainting 开启持续绘制模式 并 检测页面绘制时间
Show potential scroll bottlenecks 显示潜在的滚动瓶颈。
优化重绘回流
CSS
避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式(例如:calc())。
JavaScript
避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。
也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。基本原则就是,把动画元素用position:absolute踢出文档流,这样R&R就限制在了absolute元素的子节点。告诉浏览器,我这块结构跟其他的单独渲染,不要搅和全页面了。
参看文章:
转载本站文章《chrome对页面重绘和回流以及优化进行优化》,
请注明出处:https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0506_7820.html
chrome对页面重绘和回流以及优化进行优化的更多相关文章
- DOM的重绘和回流及代码性能优化
1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...
- 【web性能】页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- 高性能WEB开发:深入理解页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- Web前端性能优化-重绘与回流
1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 ...
- 理解浏览器的重绘与回流(repaint&&reflow)
今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...
- 重绘和回流(reflow和repaint)
由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以应当尽量减少回流次数. 以下是几种常见的减少重绘和回流的方法: 一.不要一项一项的更改页面的样式,尽量一口气写 ...
- 浅谈JS重绘与回流
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...
- 介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 重绘和回流(Repaint & Reflow)总结,以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
随机推荐
- 基于jquery+html开发的json格式校验工具
json简介 JSON是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Language, Standard ECMA-2 ...
- 推理(Inference)与预测(Prediction)
在机器学习的背景下,很多人似乎混淆了这两个术语.这篇文章将试图澄清我们所说的这两个词是什么意思,每一个词在哪里有用,以及它们是如何应用的.在这里,我将举几个例子来直观地理解两者之间的区别. 推理和预测 ...
- 探讨C语言中数组、元素内存地址之间的关系
最近一直在研究C语言,总结出一个结论:C开发者就是和内存与数据结构在打交道. 这篇文章先整理一下内存这块学习到的知识以免后面忘记了. 我们先讨论下数组和指针之间的关系,代码如下: #include & ...
- Python 利用pandas和matplotlib绘制柱状折线图
创建数据可视化图表:柱状图与折线图结合 在数据分析和展示中,经常需要将数据可视化呈现,以便更直观地理解数据背后的趋势和关联关系.本篇文章将介绍如何使用 Python 中的 Pandas 和 Matpl ...
- 2023-11-11:用go语言,字符串哈希+二分的例题。 给定长为 n 的源串 s,以及长度为 m 的模式串 p, 要求查找源串中有多少子串与模式串匹配, s‘ 与 s 匹配,当且仅当 s‘ 与 s
2023-11-11:用go语言,字符串哈希+二分的例题. 给定长为 n 的源串 s,以及长度为 m 的模式串 p, 要求查找源串中有多少子串与模式串匹配, s' 与 s 匹配,当且仅当 s' 与 s ...
- L2-030 冰岛人
需要注意的地方: 我们只记录维京人的祖先,除了维京人的其他人不能记录它的祖先 #include <bits/stdc++.h> using namespace std; struct pe ...
- .NET8极致性能优化Non-GC Heap
前言 .NET8里面JIT引入了一个新的机制,叫做Non-GC Heap.JIT可以确保相关对象分配在Non-GC Heap上,该堆像其名称一样,不受GC管理.JIT需要保证这个对象没有被GC引用,并 ...
- Modbus 转PROFIBUS DP网关在工厂自动温度控制系统中的应用案例
Modbus 转PROFIBUS DP 网关PM-160 在工厂自动温度控制系统中的应用案例 摘要 随着科技的发展和工业生产水平的提高,自动温度控制系统在纺织.化工.机械等各类工业控制过程中得到了广泛 ...
- 管易云与网易互客对接集成发货单查询2.0=>编辑订单
管易云与网易互客对接集成发货单查询2.0=>编辑订单 对接源平台:管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌,先后开发了C-ERP.EC-OMS.EC-WMS.E店管家.BBC ...
- QA12更改使用决策时自动转至长文本并报错 上载附件 Word2007template.dotm
*&---------------------------------------------------------------------**& Report Z_SCR_WORD ...