Repaint 、Reflow 的基本认识和优化

自己对浏览器了解的还不是很多，但这篇文章确实可以帮助了解

你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *，CSS选择器层叠不能超过三层，CSS尽量使用类选择器，书写HTML少使用table，结构要尽量简单-DOM树要小....等这些忠告，以前我就大概知道使用通配符或者CSS选择器层次过多可能会降低性能，至于为什么不使用table标签我一直是迷迷糊糊，也就跟着那样做了，但我认识了Repain和 Reflow之后，原来这些还真不能用太多。 ok,希望这篇文章对你有帮助！

https://segmentfault.com/a/1190000002629708

时间： 2024-10-14 12:53:38

Repaint 、Reflow 的基本认识和优化的相关文章

关于重绘和回流(Repaint & Reflow)

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

理解浏览器的重绘与回流（repaint&&reflow）

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2  浏览器载入html代码,发现标签内有一个标签引用外部css文件 3 浏览

reflow和repaint区别?

作者:zccst 重绘和重排之前也知道,但也没有可以详细了解他们的机制,区别,以及对性能的影响. A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera,

reflow 和 repaint

Reflow(渲染):对于DOM结构中的各个元素都有自己的盒模型,浏览器根据各种样式(浏览器的.开发人员定义的等)来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow. reflow会影响到dom的结构渲染,同时会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. Repaint(重绘):当各种盒子的位置.大小以及其他属性,例如颜色.字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制

关于浏览器性能优化-转

网页性能管理详解 作者: 阮一峰 日期: 2015年9月17日 你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢? 本文将详细介绍性能问题的出现原因,以及解决方法. 一.网页生成的过程 要理解网页性能为什么不好,就要了解网页是怎么生成的. 网页的生成过程,大致可以分成五步. HTML代码转化成DO

高性能 CSS3 动画

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况. 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方案:CSS

有关网页渲染，每个前端开发者都该知道的那点事

[编者按]其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整.如果要想对这个主题有个大致的了解,我们还得学习很多知识.因此,Web开发者Alexander Skutin 决定写一篇文章.他相信,这篇文章不仅能帮助初学者,也能对那些想要刷新知识结构的高级前端开发者有所裨益.原文地址 译文如下: 网页渲染必须在很早的阶段进行,可以早到页面布局刚刚定型.因为样式和脚本都会对网页渲染产生关键性的影响.所以专业开发者必须了解一些技巧,从而避免在实践的过程中遇到性能问题. 这篇文章不会研

[转载]浏览器的工作原理：新式网络浏览器幕后揭秘

原文地址 序言 这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果.在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码.她写道: 在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个"黑箱",什么也做不了.但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了.呃,里面只有数以百万行计的 C++ 代码.

[转载]前端数据之美 -- 七天打造前端性能监控系统

开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界. Day 1 为什么要监控性能? “If you cannot measure it, you cannot improve it” ———— William Thomson 这是一个最基本的问题,为什么要关注和监控前端性能?对于公司来说,性能在一定程度上与利益直接相关.国外有很多这方面的调研数据: 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bin