CSS 回流(reflow)

摘录: 1. 回流回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程. 因为回流可能导致整个dom树的重新构造,所以会影响性能. 2. display:none;和visibility:hidden a. display:none; 1)元素隐藏后在文档流中不会占位 2)会造成回流 b. visibility:hidden 1)元素隐藏后仍在文档流中占位(视觉上的不可见) 2)不会造成回流…

翻译：让网络更快一些——最小化浏览器中的回流(reflow)

关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点.举个例子,页面上节点是以树的形式展现的.假如我使用JavaScript砍掉一个节点,这棵树为了不脱节,肯定要重新梳理一遍,将砍掉的那个断点重新结合起来又形成一颗完整的树,而这个结合梳理过程就是这里的reflow,所谓回流,就是由于某些原因(如修改),要将元素回过头来重新“流”一遍.而本译文的重点就…

页面优化，谈谈重绘(repaint)和回流(reflow)

一.前言偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重绘和回流. 二.重绘和回流是什么怎么去理解这两个概念呢?从字面上理解,重绘,重新绘画,重新上色,较难产生联想的是回流. 我们都知道,一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的…

页面重绘(repaint)和回流(reflow)

前言页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. 浏览器将所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的. 2.DOM树和样式结构体结合生成render树. render树类似于DOM树,render树每个节点有自己样式(盒子模型,margin.border.padding.content),但不包含display:none和head节…

回流(reflow)与重绘(repaint)

回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚... 一.概念首先我们要明白的是,页面的显示过程分为以下几个阶段: 1.生成DOM树(包括display:none的节点) 2.在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none,head节点,但是包括visib…

前端性能优化--回流(reflow）和重绘(repaint)

HTML加载时发生了什么在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包…

浏览器的重绘与回流(Reflow & Repaint)介绍

重绘当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流当改变的操作响应文档内容或者结构,或者元素位置时,就会触发回流.有以下几种情况: 页面首次渲染 DOM操作(对元素的增删改.顺序变化等) 内容变化,包括表单区域内的文本变化 css属性的更改或者重新计算增删样式表内容修改class属性浏览器窗口变化(滚动或缩放) 伪类样式激活(:hover等) 一些…

浏览器的回流与重绘 (Reflow & Repaint)

写在前面在讨论回流与重绘之前,我们要知道: 浏览器使用流式布局模型 (Flow Based Layout). 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree. 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上. 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的…

介绍回流与重绘（Reflow & Repaint），以及如何进行优化?

前言回流与重绘对于前端来说可以说是非常重要的知识点了,我们不仅需要知道什么是回流与重绘,还需要知道如何进行优化.一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的样式对应的渲染这些节点.在这个过程中,回流与DOM树,渲染树有关,重绘与渲染树有关. 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注前端南玖第一时间获取最新的文章- 页面渲染过程解析HTM…

reflow和repaint（摘录自张鑫旭的翻译）

//正文开始关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候.我可能有一些顽固,但是我确实听了他的一些理论.Stoyan和我开始讨论如何量化这个问题. 展望性能社区,除了一些典型的黑盒实验外,需要与浏览器厂商有更多的合作.对于性能,浏览器制造者知道…

浏览器渲染原理--reflow

Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都是怎么干活的:1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件:3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件:4.…

[CSS]元素的显示与隐藏

摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与display:block/inline来实现DOM元素的显隐控制,那你就out了.就元素的显示与隐藏实现,使用display在有些时候算是比较糟糕的方法了. 控制元素显隐的方法很多,但是本文不是讲元素显隐控制的,所以,只讲与absolute相关的一些方法.absolute属性相关的隐藏方法,我知道的有三种…

【笔记】web 的回流与重绘及优化

最近看了幕课网 web 前端性能优化的课程,其中说到了浏览器的回流(reflow) 及重绘(repaint).觉得以后面试或许会被问到所以做一下笔记: 课程从回流及重绘这两个点延伸出了一个知识点就是 "css 会影响 javascrip 执行时间导致 javascript 脚本变慢". 浏览器渲染一个网页的时候会启用两条线程:一条渲染javascript 脚本,另一条渲染 ui 即css 样式的渲染.但这两条线程是互斥的.当javascript 线程运行的时候 ui 线程则会中止暂停…

重绘（redraw或repaint）,重排（reflow）

浏览器运行机制图: 浏览器的运行机制:layout:布局: 1.构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Content Tree/DOM Tree): 2.构建渲染树(construct):解析对应的CSS样式文件信息(包括js生成的样式和外部css文件),而这些文件信息以及HTML中可见的指令(如<b></b>),构建渲染树(Rendering Tree/Frame Tree): 3.布局…

DOM 操作成本究竟有多高，HTML、CSS构建过程，从什么方向出发避免重绘重排）

前言: 2019年!我准备好了正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少.刨根问底,这里说的成本,到底高在哪儿呢? 什么是DOM Document Object Model 文档对象模型什么是DOM?可能很多人第一反应就是div.p.span等html标签(至少我是),但要知道,DOM是Model,…

【翻译】浏览器渲染Rendering那些事：repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“R”吓到?今天,我们来讨论一下浏览器的渲染(Rendering)-一个产生于Page 2.0生命周期中,甚至有时候会在下载瀑布流中出现的过程. 我们来讨论浏览器在接收到HTML.CSS和JavasSript后,如何把你的页面呈现在屏幕上. 一.浏览器渲染过程不同的浏览器的渲染过程存在些许不同,但大体的机制是一样的,下图展示的是浏览器自下…

浅谈JS重绘与回流

在说浏览器渲染页面之前,我们需要先了解两个点,一个叫浏览器解析 URL,另一个就是本章节将涉及的重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此损耗较少. 常见的重绘操作有: 改变元素颜色改变元素背景色 more …… 回流(reflow):又叫重排(layout).当元素的尺寸.结构或者触发某些属性时,浏览器会重新渲染页面,称为回流.此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因…

reflow和repaint理解总结

repaint就是重绘,reflow就是回流严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大. 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重排,也就是对页面所有的dom元素渲染. 如何触发reflow和repaint repaint的触发: 1)不涉及任何dom元素的排版问题的变动为repaint,例如元素的color.text-align等改变. 2)color的修改,text-align的修改,a:hover也会造成重绘,伪类引起的…

CSS重排和重绘

一.什么是重绘Repaint和重排 (回流 reflow) 重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘. 重排(回流):当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置) 二.引起重绘Repaint和重排(回流reflow )的属性 2.1 引起重绘Repaint的属性常见的重绘…

HTML&&CSS基础知识点整理

HTML&&CSS基础知识点整理一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. 表现(Preasentation):css 3. 行为(Behavior):JS[DOM+ES] 其中一些小的具体要求: 结构:标签小写.闭合.不能随意嵌套 CSS+JS:精良使用外链,不用行内优点: 1. 易于维护 2. 页面响应快 3. 可访问性高 4. 提高设备兼容性 5. 易被解析(搜索引擎) P…

Web前端性能优化详解之CSS与JS加载

浏览器加载页面和渲染过程加载过程浏览器根据DNS 服务器得到域名的IP地坛向这个 IP 的机器发送 HTTP请求服务器收到,处理并返回 HTTP请求浏览器得到返回内容渲染过程根据 HTML 结构生成 DOM 树根据 CSS 生成 CSSOM 根据 RenaderTree 开始渲染和展示遇到 <strcipt >会执行并阻塞渲染懒加载图片进入可视区域之后请求图片资源对于电商等图片很多,页面很长的业务场景适用减少无效资源的加载并发加载的资源过多会阻塞js的加载,景程网站…

CSS面试总结

文章首次发表:_时雨_CSDN 1. BFC:块级格式化上下文(重点关注) BFC基本概念:BFC是 CSS布局的一个概念,是一块独立的渲染区域(环境),里面的元素不会影响到外部的元素. BFC原理(渲染规则.布局规则): (1)内部的 Box会在垂直方向,从顶部开始一个接着一个地放置; (2)Box垂直方向的距离由 marain决定,属于同一个 BFC 的两个相邻 Box的margin 会发生重叠; (3)每个元素的margin Box的左边,与包含块 border Box的左边相接触,(对于…

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开) 本文完整的代码,以及更多的 CSS3 效果,在我 Github 上可以看到,也希望大家可以点个 star. 嗯,可能有些人打不开 demo 或者页面乱了,贴几张效果图:(图片有点大,耐心等待一会) CSS3 3D 行星运转效果图随机再截屏了一张: 强烈建议你点进 Demo页感受一下 CSS3…

前端工程优化：javascript的优化小结

我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度,以此为切入点. javascript的优化原则是:二八原则满足考量大多数情况,而遇到极端情况,有能力则兼顾之,学会放弃,适当取舍: 原因是,影响用户的体验很重要的因素之一响应时间 0.1s: 用户觉得很流畅 1.0s: 用户的操作可能偶尔受到影响,并且用户已经能感觉到有些不流畅 10s : 对用…

Html定位精要

Html定位基础 Html的布局是文档流模型,块元素独占一行,内联元素并列一行. 相对定位 position: relative 相对于自己定位不脱离文档流,元素原有位置被保留绝对定位 position: absolute 相对于第一个有position且position不为static的祖先元素定位脱离文档流,元素原有位置被放弃宽高可设值,不撑大父元素空间可视属性只影响自身空间与文档流空间的交集(详见抗拒opacity属性) 高手常用margin替代absolute,详见css-相对…

How browsers work

这几天翻译一篇旧文 How browsers work ( 以现代浏览器chrome.火狐.safari 为对象来分析),这篇文章网上有其他的翻译版本,自己再翻译一遍主要是练习阅读英文文章,而且自己翻译记忆会更深刻. 原文链接: http://taligarsiel.com/Projects/howbrowserswork1.htm#Introduction 简介浏览器可能是使用最多的软件,我会分析现代浏览器是如何工作的,你将会了解从地址栏输入网址 "google.com" 到显示…

Javascript定时器(三)——setTimeout(func, 0)

setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等一.setTimeout中的delay参数为0,并不是指马上执行 <script type="text/javascript"> function delay1() { console.log('delay1'); } function delay2() { console.log('delay2'); } function delay3() { console.log('dela…

【追寻javascript高手之路05】理解事件流

前言新的一天又开始了,我们对今天对未来抱有很大期待,所以开始我们今天的学习吧,在此之前来点题外话,还是爱好问题. 周三的面试虽然失败,但是也是很有启迪的,比如之前我就从来没有想过爱好问题,我发现我的爱好如下: ① 霹雳布袋戏完了就米有什么爱好了,其实我完全可以说自己爱好旅游什么的,我也确实爱好旅游,只不过比较穷,走的地方不多罢了,这里又扯出一个话题: 学习工作与生活我们为了理想需要学习需要工作,工作完了需要生活,现在是前者分量掩盖了后者,所以以后的世界要注意了. 好了进入今天的学习吧,我们…

DOM的相关优化

为什么要进行DOM优化? DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint). 首先先说一些浏览器是怎么样把一个页面呈现出来的: 一个浏览器有许多模块,其中负责呈现页面的是渲染引擎模块. 这个过程大致如下: ·解析HTML,并生成一棵DOM tree ·解析各种样式并结合DOM tree生成一棵Render tree(渲染树) ·对Render tree的各个节点计算布局信息,比如box的…

（转）优化js脚本设计，防止浏览器假死

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式: 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程. JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器…

【CSS 回流(reflow)】的更多相关文章