重绘(Repaint)和回流(Reflow)
重绘(Repaint)和回流(Reflow)
1、回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的?
css 会影响 javascrip 执行时间导致 javascript 脚本变慢
浏览器渲染一个网页的时候会启用两条线程:
一条渲染javascript 脚本,另一条渲染 ui 即css 样式的渲染。 但这两条线程是互斥的。当javascript 线程运行的时候 ui 线程则会中止暂停,反之亦然。 那这是为什么呢? 原因是,当ui 线程运行对页面进行渲染的时候 js 脚本难免会涉及到页面视图上的一些样式的改变,
为了使这个改变更加准确 js 脚本只好等待ui 线程渲染完成的时候才去执行。 所以当一个页面的元素样式改动频繁的时候ui 线程就会持续渲染,造成js 代码反应慢半拍,卡顿的情况。
2、什么是回流?什么是重绘?
a、回流:布局或者几何属性需要改变就称为回流。
当render tree 的一部分或全部的元素因改变了自身的宽高,布局,显示或隐藏,
或者元素内部的文字结构发生变化 导致需要重新构建页面的时候,回流就产生了
b、重绘:重绘是当节点需要更改外观而不会影响布局的,比如改变 color
就叫称为重绘。
当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就会产生重绘。
例如你改变了元素的background-color
c、因此,回流必定会发生重绘,重绘不一定会引发回流。
回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。
所以以下几个动作可能会导致性能问题:
1>改变 window 大小
2>改变字体
3>添加或删除样式
4>文字改变
5>定位或者浮动
6>盒模型
3、什么会引起回流?
大概分为五类:
a、首当其冲自然是dom树结构变化,比如你删除或者添加某个node.
b、元素几何属性变化,包括margin,padding,height,width,border等
c、页面渲染初始化
d、获取某些属性(offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE))
e、浏览器窗口发生变化-resize事件发生时
var 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!'));
4、什么会引起重绘?
5、如何避免?
a、使用 translate
替代 top
举个
重绘(Repaint)和回流(Reflow)的更多相关文章
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- 页面优化,谈谈重绘(repaint)和回流(reflow)
一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...
- 回流(reflow)与重绘(repaint)
回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚... 一. ...
- 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- 前端性能优化--回流(reflow)和重绘(repaint)
HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...
- 浏览器的回流与重绘 (Reflow & Repaint)
写在前面 在讨论回流与重绘之前,我们要知道: 浏览器使用流式布局模型 (Flow Based Layout). 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了 ...
- 介绍回流与重绘(Reflow & Repaint),以及如何进行优化?
前言 回流与重绘对于前端来说可以说是非常重要的知识点了,我们不仅需要知道什么是回流与重绘,还需要知道如何进行优化.一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render ...
- 【笔记】web 的回流与重绘及优化
最近看了幕课网 web 前端性能优化的课程,其中说到了浏览器的回流(reflow) 及 重绘(repaint).觉得以后面试或许会被问到所以做一下笔记: 课程从回流及重绘这两个点延伸出了一个知识点就是 ...
- 浅谈JS重绘与回流
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...
- DOM的重绘和回流及代码性能优化
1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...
随机推荐
- 快排+java实现
import java.util.Arrays; public class QuickSort { //三数取中法.取出不大不小的那个位置 public static int getPivotPos( ...
- JavaScript 局部刷新
JavaScript局部刷新具体代码展示如下 1. #tabList代表需要刷新的元素的对象 2. 第二个#tabList 如果后面有第三个元素,那么后面需要加>*符号,如果不加,容易造成C ...
- Spark之standalone模式
standalone hdfs:namenode是主节点进程,datanode是从节点进程 yarn:resourcemanager是主节点进程,nodemanager是从节点进程 hdfs和yarn ...
- ubuntu 中文设置
1,安装中文语言包 sudo apt-get install language-pack-zh-hans sudo update-locale LANG=zh_CN.UTF-8 添加中文支持: sud ...
- cocos2dx AudioEngine在Android7上播放音效卡顿问题处理
1.此问题在cocos2dx 3.13/3.14版本(其它版本没有测试过)在Android7中使用AudioEngine的play2d函数播放音效时出现. 调试时出现如下提示: 2.论坛中相关讨论帖地 ...
- laravel配置路由除了 / 都是404解决办法
1.php.ini开启phpopenssl 2.conf (nginx为例) location / { index index.html index.htm index.php l.php; #tr ...
- 雷林鹏分享:XML 相关技术
XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...
- android------eclipse运行错误提示 Failed to load D:\Android\sdk\build-tools\26.0.0-preview\lib\dx.jar
更新了SDK后,在ecplise上运行项目时出现了一个问题. 一运行就提示这个错误:Your project contains error(s), please fix them before run ...
- Spring Batch JSON 支持
Spring Batch 4.1 开始能够支持 JSON 格式了.这个发布介绍了一个新的数据读(item reader)能够读取一个 JSON 资源,这个资源按照下面的格式: [ { &q ...
- 查看cookie的快捷方法
1.url中输入数字+javascript:alert(document.cookie) 如:2javascript:alert(document.cookie) ,然后在浏览器中去掉2,回车 ...