浅谈重绘和回流的解析

目录
  • 重绘和回流：
  • 关于字体颜色的设置：
  • 关于替代：
  • 关于操作html：

重绘和回流：

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

关于字体颜色的设置：

CSS没有 text-color 以及font-color，有background-color   给文字设置颜色只能color

关于替代：

HTML5 是作为Flash的替代技术出现，只有HTML5能干掉flash和silverlight，而不是canvas

关于操作html：

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

估计是因为createDocumentFragment() 方法可以更安全改变文档的结构及节点

到此这篇关于浅谈重绘和回流的解析的文章就介绍到这了,更多相关重绘和回流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript页面回流与重绘

    目录 1.DOMAPI 1.1获取元素相关结点API 1.2增加节点API 2.回流与重绘 2.1CSS的书写顺序影响 2.2节点渲染优化 1.DOMAPI 1.1获取元素相关结点API <body>     <div class="item">         <h3 class="title">123</h3>         <p class="des">456</p>

  • Web面试常问回流reflow与重绘repaint原理及区别

    Web面试常问回流reflow与重绘repaint原理及区别

    目录 浏览器的渲染机制 回流 与 重绘 回流 导致回流的操作: 重绘 导致重绘的操作: 浏览器的渲染机制 1.浏览器采用两个引擎来处理页面的工作, 不同的浏览器使用的渲染引擎不一样 渲染引擎: Chrom和Safari使用"WebKit", Firefor使用"Geoko" js引擎 2.浏览器会把html解析成 DOM树, 把css解析成 CSSOM(CSS对象模型); 3.接着会把 DOM树 和 CSSOM, 结合产生 render tree(渲染树); 4.渲

  • 高性能WEB开发 页面呈现、重绘、回流。

    高性能WEB开发 页面呈现、重绘、回流。

    页面呈现流程 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag).dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里面包

  • 浅谈重绘和回流的解析

    目录 重绘和回流: 关于字体颜色的设置: 关于替代: 关于操作html: 重绘和回流: repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显

  • 浅谈JsonObject中的key-value数据解析排序问题

    1.JsonObject中的数据是key-value形式,通过JsonObject的keys方法得到key的迭代器是无序的,要想实现排序,目前只能通过加装一层处理(方法来自Stack Overflow,感谢大神),将key-vlaue放入ThreeMap排序,排序规则默认是字母表顺序,可自定义Comparator修改. iteratorKeys = object.keys();//得到所有title SortedMap map = new TreeMap(); while (iteratorKe

  • Python paramiko 模块浅谈与SSH主要功能模拟解析

    疫情还没结束,小编只能宅在家里,哪哪也去不了,今天突发奇想给大家分享一篇教程关于Python paramiko 模块浅谈与SSH主要功能模拟解析. 大家都知道,通过SSH服务可以远程连接到Linux服务器,查看上面的日志状态,批量配置远程服务器,文件上传,文件下载等,Python的paramiko模块同样实现了这一功能. 首先我们需要安装这一模块,pycharm环境中如下操作 一,安装paramiko模块 PyCharm→Preferences→Project:项目名→Project Inter

  • 浅谈SpringCloud之zuul源码解析

    zuul各版本实现存在一些微小的变化,总的实现思想未改变,以spring-cloud-netflix-core-1.3.6.RELEASE为例 一.zuul的重要的初始化类 org.springframework.cloud.netflix.zuul.ZuulServerAutoConfiguration org.springframework.cloud.netflix.zuul.ZuulProxyAutoConfiguration org.springframework.cloud.netf

  • 浅谈Java线程Thread.join方法解析

    join字面上是加入的意思,我们先看看join方法的解释和实现. /** * Waits for this thread to die. * 调用方线程(调用join方法的线程)执行等待操作,直到被调用的线程(join方法所属的线程)结束,再被唤醒 * <p> An invocation of this method behaves in exactly the same * way as the invocation * * * @throws InterruptedException *

  • 浅谈DOM的操作以及性能优化问题-重绘重排

    浅谈DOM的操作以及性能优化问题-重绘重排

    写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既然

  • 浅谈js的解析顺序 作用域 严格模式

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. alert(a); var a = 1; 如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined.返回值是undefined说明a没有被定义也就是没有赋值.下面我来讲解一下javascript的解析顺序. 1.ES5中有声明意义的关键字

  • 浅谈js中的变量名和函数名重名

    今天骚凯问了一道变量名冲突的题目,感觉很有意思,顺便也复习一下预解析的一些知识,有不对的地方忘前辈大神指正,题目是这样的: var a=100; function a(){ console.log(a); } a(); 这个串代码执行完会报错 : a is not a function 问题来了,为什么会报这个错误呢? 这里涉及到函数和变量的预解析: 1)函数声明会置顶 2)变量声明也会置顶 3)函数声明比变量声明更置顶:(函数在变量上面) 4)变量和赋值语句一起书写,在js引擎解析时,会将其拆

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

随机推荐