【web性能优化】DOM的reflow 和repaint

回流:

对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这过程称之为reflow(回流)

重绘:

当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便吧这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint(重绘)【视觉上的感官】

DOM元素的添加、修改(内容)、删除(回流+重绘)

仅修改DOM元素的字体颜色(重绘,因为不需要调整布局)

回流一定触发重绘,但是重绘不一定触发回流

避免触发回流/重绘????????

触发重绘的情况

1.改变字体

2.增加或者移除样式表

3.输入框发生改变

4.激活css伪类

5.脚本操作DOM

6.计算offsetHeight 和offsetWidth的属性

7.设置style属性的值

原文地址:https://www.cnblogs.com/websmile/p/11420169.html

时间: 2024-08-01 21:22:01

【web性能优化】DOM的reflow 和repaint的相关文章

移动web性能优化笔记

移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

web性能优化--总体总结。

web性能优化: 1,从http方面考虑:我们应该尽量减少http请求数量,因为前后端通信的成本很大,请求一个100k的文件和请求两个50k的文件的时间是相差很多的.那么我们应该怎么做呐?                 (1),合并js,css,减少请求的数量.使得性能提升 (2),使用雪碧图将背景图片合并成一个文件. 2,从代码需求来分析 (1),非核心的代码延迟来进行加载或者动态进行加载,将公共代码就行抽离,使用cdn存储静态的资源,在浏览器进行缓存资源. 总结的不全,希望以后可以一直总结

关于 Web 性能优化

压缩源码和图片 JavaScript 文件源代码可以采用混淆压缩的方式,CSS 文件源代码进行普通压缩,JPG 图片可以根据具体质量来压缩为 50% 到 70%,PNG 可以使用一些开源压缩软件来压缩,比如 24 色变成 8 色.去掉一些 PNG 格式信息等. 选择合适的图片格式 如果图片颜色数较多就使用 JPG 格式,如果图片颜色数较少就使用 PNG 格式,如果能够通过服务器端判断浏览器支持 WebP,那么就使用 WebP 格式和 SVG 格式. 合并静态资源 包括 CSS.JavaScrip

Web性能优化系列

web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 本系列参考了大量互联网资料.Pro HTML5 Performance.web性能权威指南等 通过自己实践.重新组织.主要用于学习交流. web性能优化目录  浏览器渲染过程

性能魔方mmTrix推出基于云的web性能优化服务

性能魔方,新一代云应用性能管理服务商,今天宣布推出基于云的web性能优化服务,帮助客户优化网站速度,提高用户体验,以获得更好的用户转化率和收入. 性能魔方团队有着丰富的行业经验和卓越的前瞻思想,并充分利用云计算技术,使网络更快."我们有信心,我们的网站性能监测和网站速度优化服务将迅速为网站带来好处和价值,这些价值包括更好的用户体验和更高的投资回报率"CEO蒲炜说. 测试你的网站性能,分析与行业基准或者竞争对手的差距,请访问www.mmtrix.com,这是免费的,而且使用简单. 关于性

web 性能优化指南阅读笔记

1.关于拥塞预防算法 PRR-比例降速,RFC6937 规定的一个新算法,其目标是改进丢包后的恢复速度,谷歌测量结果:该算法改进丢包造成的平均连接延迟减少了3%-10%.PRR是linux 3.2+内核默认的用赛预防算法. 2.关于拥塞窗口 把服务器的初始CWND值增大到RFC 6928新规定的10段,是提升用户体验以及所有TCP 应用性能的最简单方式.Linux上,IW10是2.6.39以上版本内核的新默认值. web 性能优化指南阅读笔记

Web性能优化 高并发网站解决 单例

Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格

【web性能优化】DNS解析与ip

DNS解析与ip url   统一资源定位符  它或许指定的是一个文件资源 或许是一个方法(比如接口) 为什么看到的网站会动呢  是因为浏览器可以解析html DNS 解析 ip地址 http权威指南 js引擎 301    302 域名服务器  ip服务器 cookie  是否合法 .cn   .org .gov     最高级域名 www.baidu.com news.baidu.com. 从右向左解析域名  先解析的是. 是公网(最外层域名)的意思  再解析.com  然后baidu子域名

web性能优化--减少DOM操作(三)

减少DOM数量 减少DOM操作 批量处理DOM操作 批量处理样式修改 尽量不要使用tabel布局 尽量不要使用css表达式 string用数组join css选择符优化 1.减少DOM数量 在HTML生成DOM树的时候,DOM数量越少,HTML渲染速度越快 2.减少DOM操作 每次操作DOM,都会带来repaint和refolw 3.批量处理DOM操作: 将元素移除DOM Tree,修改完后再放回去,因此只会调用一次repaint或者reflow 4.批量修改样式 改变classname,或者用

(转)web性能优化

前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提供更为友好的体验. 2. 从服务商角度而言,优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用. 前端优化的途径有很多,按粒度大致可以分