精华内容
下载资源
问答
  • Arduino 回流代码 该软件旨在用 Arduino 微控制器驱动 SSR。 系统包括带放大器 LCD 的热电偶、Arduino Mini Pro、SSR、按钮和烤面包机加热元件。 该代码与状态机一起使用。 启动状态:在 LCD 热电偶上显示闪屏 ...
  • 币安BSC智能合约代码通缩代码带分红+回流+慈善钱包 制度好持币分红,防鲸,防砸盘,每笔交易有数量限制 可自行锁死合约 放弃合约 等功能 功能设置教程在主页自行购买下载,本页面只有代码 下载后请自行在remix部署
  • 重绘与回流

    2019-03-13 14:04:11
    渲染树 ...把css中的样式解析成CSS树 CSS树和DOM树结合起来生成渲染树 重绘 元素做了一些不影响页面的重新...回流一定是重绘, 重绘不一定是回流 复制代码 减少重绘与回流 将要修改多个样式,定义成一个class类 ...

    渲染树

    • 把html解析成DOM树
    • 把css中的样式解析成CSS树
    • CSS树和DOM树结合起来生成渲染树

    重绘

    元素做了一些不影响页面的重新排版操作,例如: 背景色的改变,添加删除下滑线等等
    复制代码

    回流

    元素大小, 尺寸,位置发生了变化导致重新计算渲染树,页面重新排版
    复制代码

    概念

    回流一定是重绘, 重绘不一定是回流
    复制代码

    减少重绘与回流

    • 将要修改多个样式,定义成一个class类
    • 使用dom离线操作:在documentfragment对象内存里操作dom;在把dom display:none进行隐藏,改完以后进行操作,clone一个dom到节点内存里,改完之后进行在线交换
    • 对于复杂的动画效果,进行绝对定位,或者absolute定位

    借鉴与: juejin.im/post/5c3fdc…

    转载于:https://juejin.im/post/5c890514e51d4560fd3eacb2

    展开全文
  • 修改日期:2014 年 12 月 31 日 Mod 描述:ControLeo2 Reflow Oven 的 Peter Easton 回流向导 1.1 源代码的轻微修改版本,其中包含使用 Philip van Allen 的 VarSpeedServo 库的修改版本的开门/关闭功能。...
  • 回流焊 Babel插件,可使用CLI包装器将类型转换为 。 无论该插件是否为您服务,我都希望收到反馈:)! 通过将Flow类型注释转换为等效的TypeScript代码,Reflow使您能够将整个基于Flow的项目迁移到TypeScript。 尽管...
  • 关于回流

    2019-07-15 23:01:07
    关于回流 引起因素 1 集合属性变化 2 及时获得DOM元素的位置 ffsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、 scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、 clientWidth、...

    关于回流

    • 引起因素
    1 集合属性变化
    2 及时获得DOM元素的位置
    ffsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、
    scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、
    clientWidth、clientHeight
    
    
    
    • 减少回流的方法
      1 设置className
      2 dispaly: none—修改—disPlay:block
      3 documentFragment
      4 浏览器得flush队列,会等任务队列任务多起来,或者一定时间才更新一次,但是并不是所有浏览器都支持,还有获取Dom及时性的操作,flush队列不起作用

    优化之-css解析器优化

    • css选择符是从右向左开始匹配的,而不是从左向右
    #test li(浏览器必须遍历每个li元素,然后确认每个li的父元素是否为#test)
    li #test
    .test_li(匹配到即可)
    
    
    • css优化
    1 不要使用通配符
    2 使用继承属性,避免重复匹配
    3 减少嵌套
    
    
    • css阻塞问题
    css加载的时候,不会阻碍dom的解析,但是会阻碍dom的渲染(白屏)
    同时会阻碍js语句的执行
    因为link只能放在head里面
    
    
    

    js阻塞

    • 为什么会阻塞?
    如果js引擎执行代码的时候,删除了Dom,而这个时候渲染引擎继续执行,却发现要渲染的Dom不见了
    因为不知道js会做什么,不阻止后续操作,可能会引起混乱 那么健康我我不就基本hi032q
    
    所以遇到js的时候,浏览器将控制权由渲染引擎切换到js引擎
    
    
    
    • 解决js阻塞问题
    // 阻塞浏览器,只有js加载完了才能做其他的
    <script src="index.js"></script>
    
    
    //加载异步,不影响后面执行,但是加载完成后立即执行是同步的,又会继续阻塞
    // async这种不能保证按照加载顺序执行
    <script async src="index.js"></script>
    <script async src="index1.js"></script>
    
    
    // 加载异步,不影响后面执行,而且可以保证按照引入顺序执行
    // 但是是在DOMContentLoaded后执行
    <script defer src="index.js"></script>
    
    
    
    • DOMContentLoaded
    文档解析完毕,页面重新渲染,并且页面引用的js同步代码执行完毕
    页面从上到下加载解析完毕(图片和视频可以还没下载完)
    
    
    这里理解浏览器解析html
    
    主线程: 解析html文档
    下载线程: 下载资源
    
    
    
    • DOMContentLoaded与async defer关系
    A <scirpt async src='xxx'>
    B <scirpt async src='xxx'>
    1、只要html解析完就触发DOMContentLoaded
    2、 js下载完就执行,不用等html解析完在执行,所有最好不要操作dom(有可能dom还没解析,就获取会失败)
    async不保证执行顺序,所以A和B不要?️依赖,而且
    
    A:<scirpt defer='defer' src='xx'>
    B:<scirpt defer='defer' src='xx'>
    1 、要等js下载完后,执行完才会触发:DOMContentLoaded
    2、等html解析完以后才执行js,不是js下载完就执行
    3、AB会按照顺序执行
    
    
    注意: 
    同步js: 必须下载完后执行完才会继续解析html
    异步js: 不阻碍继续解析,但是下载完以后可能立马立马执行(分async defer)
    
    css文件下载不会阻碍其他文件下载
    js下载会阻碍其他文件下载
    
    现代浏览器,预解析,js和css下载和位置无关,只是不会执行script中的内容
    

    https://www.haorooms.com/post/web_xnyh_jscss

    • load 事件的触发
    完全加载的页面,包含所有的数据
    DOM 结构中的 js、css、图片,以及 js 异步加载的 js、css 、图片都加载完成之后,才会触发 load 事件。
    
    

    解析html文档总结

    外链css不会影响后面dom构建,但是会阻碍渲染,即css没下载完毕,页面白屏,所以css在head的link中就引入,首先加载,避免白屏

    js不设置async和defer,会阻碍继续解析,直到道歉js下载完,并且执行完毕才会继续从上往下解析,所以一般js放在body后面
    但是js并不会阻碍后面资源的下载

    展开全文
  • 回流焊炉温曲线

    2018-10-10 15:33:49
    回流焊炉温曲线及设定 1、良好的回流焊接的效果所需的要素 2、RSS炉温曲线的设定 3、RTS炉温曲线的设定 4、有铅与无铅炉温曲线的分析对比
  • 创建功能分支编写出色的代码创建针对master的拉取请求通过代码审查获取'lgtm'合并到master(默认情况下被压缩,但是可以被覆盖;为什么我们更喜欢squash-merge)删除功能分支Reflow将使您的生活更轻松。 回流自动...
  • 浏览器回流认识

    2019-02-20 18:57:58
    一、什么是回流回流是会导致页面重新渲染的一些元素,从而影响性能。 二、哪些因素会导致回流? 1、调整窗口的大小; 2、改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数; 3、增加或者移除...
        

    一、什么是回流?

    回流是会导致页面重新渲染的一些元素,从而影响性能。

    二、哪些因素会导致回流?

    1、调整窗口的大小;

    2、改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数;

    3、增加或者移除样式表;

    4、内容的变化,用户在input中输入了文字(这是不可避免的);

    5、激活CSS的伪类;

    6、操作class属性;

    7、基本操作DOM(包括js中的domcument等);

    8、计算offsetWidth与offsetHeight 属性,获取元素在窗口中的位置;

    9、在html代码中直接设置style 属性的值,这个降低了代码的利用率,还影响性能。

    三、如何避免回流?

    1、如果想设定元素的样式,直接改变class名,而不是改变class中的某个特定的属性,比如height,weight;

    2、避免设置多项内联样式,就是说少使用style;

    3、应用元素动画的时候,使用属性的position属性的fixed值或absolute值;

    4、避免使用table布局;

    5、尽量在DOM树的最末端改变class,改变子节点的样式。

    展开全文
  • 重汇和回流

    2020-08-26 23:51:14
    回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容...

    回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。

    浏览器的渲染过程

    本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面。(这个渲染过程来自MDN

    从上面这个图上,我们可以看到,浏览器渲染过程如下:

    1. 解析HTML,生成DOM树,解析CSS,生成CSSOM树
    2. 将DOM树和CSSOM树结合,生成渲染树(Render Tree)
    3. Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)
    4. Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素
    5. Display:将像素发送给GPU,展示在页面上。(这一步其实还有很多内容,比如会在GPU将多个合成层合并为同一个层,并展示在页面中。而css3硬件加速的原理则是新建合成层,这里我们不展开,之后有机会会写一篇博客)

    渲染过程看起来很简单,让我们来具体了解下每一步具体做了什么。

    生成渲染树

    生成渲染树

    为了构建渲染树,浏览器主要完成了以下工作:

    1. 从DOM树的根节点开始遍历每个可见节点。
    2. 对于每个可见的节点,找到CSSOM树中对应的规则,并应用它们。
    3. 根据每个可见节点以及其对应的样式,组合生成渲染树。

    第一步中,既然说到了要遍历可见的节点,那么我们得先知道,什么节点是不可见的。不可见的节点包括:

    • 一些不会渲染输出的节点,比如script、meta、link等。
    • 一些通过css进行隐藏的节点。比如display:none。注意,利用visibility和opacity隐藏的节点,还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

    注意:渲染树只包含可见的节点

    回流

    前面我们通过构造渲染树,我们将可见DOM节点以及它对应的样式结合起来,可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小,这个计算的阶段就是回流。

    为了弄清每个对象在网站上的确切大小和位置,浏览器从渲染树的根节点开始遍历,我们可以以下面这个实例来表示:

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Critial Path: Hello world!</title>
      </head>
      <body>
        <div style="width: 50%">
          <div style="width: 50%">Hello world!</div>
        </div>
      </body>
    </html>

    我们可以看到,第一个div将节点的显示尺寸设置为视口宽度的50%,第二个div将其尺寸设置为父节点的50%。而在回流这个阶段,我们就需要根据视口具体的宽度,将其转为实际的像素值。(如下图)

    重绘

    最终,我们通过构造渲染树和回流阶段,我们知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息(位置、大小),那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个阶段就叫做重绘节点。

    既然知道了浏览器的渲染过程后,我们就来探讨下,何时会发生回流重绘。

    何时发生回流重绘

    我们前面知道了,回流这一阶段主要是计算节点的位置和几何信息,那么当页面布局和几何信息发生变化的时候,就需要回流。比如以下情况:

    • 添加或删除可见的DOM元素
    • 元素的位置发生变化
    • 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
    • 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代。
    • 页面一开始渲染的时候(这肯定避免不了)
    • 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

    注意:回流一定会触发重绘,而重绘不一定会回流

    根据改变的范围和程度,渲染树中或大或小的部分需要重新计算,有些改变会触发整个页面的重排,比如,滚动条出现的时候或者修改了根节点。

    浏览器的优化机制

    现代的浏览器都是很聪明的,由于每次重排都会造成额外的计算消耗,因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里,直到过了一段时间或者操作达到了一个阈值,才清空队列。但是!当你获取布局信息的操作的时候,会强制队列刷新,比如当你访问以下属性或者使用以下方法:

    • offsetTop、offsetLeft、offsetWidth、offsetHeight
    • scrollTop、scrollLeft、scrollWidth、scrollHeight
    • clientTop、clientLeft、clientWidth、clientHeight
    • getComputedStyle()
    • getBoundingClientRect
    • 具体可以访问这个网站:https://gist.github.com/pauli...点击预览

    以上属性和方法都需要返回最新的布局信息,因此浏览器不得不清空队列,触发回流重绘来返回正确的值。因此,我们在修改样式的时候,最好避免使用上面列出的属性,他们都会刷新渲染队列。如果要使用它们,最好将值缓存起来。

    减少回流和重绘

    好了,到了我们今天的重头戏,前面说了这么多背景和理论知识,接下来让我们谈谈如何减少回流和重绘。

    最小化重绘和重排

    由于重绘和重排可能代价比较昂贵,因此最好就是可以减少它的发生次数。为了减少发生次数,我们可以合并多次对DOM和样式的修改,然后一次处理掉。考虑这个例子

    const el = document.getElementById('test');
    el.style.padding = '5px';
    el.style.borderLeft = '1px';
    el.style.borderRight = '2px';

    例子中,有三个样式属性被修改了,每一个都会影响元素的几何结构,引起回流。当然,大部分现代浏览器都对其做了优化,因此,只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候,有其他代码访问了布局信息(上文中的会触发回流的布局信息),那么就会导致三次重排。

    因此,我们可以合并所有的改变然后依次处理,比如我们可以采取以下的方式:

    • 使用cssText

      const el = document.getElementById('test');
      el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
    • 修改CSS的class

      const el = document.getElementById('test');
      el.className += ' active';

    批量修改DOM

    当我们需要对DOM对一系列修改的时候,可以通过以下步骤减少回流重绘次数:

    1. 使元素脱离文档流
    2. 对其进行多次修改
    3. 将元素带回到文档中。

    该过程的第一步和第三步可能会引起回流,但是经过第一步之后,对DOM的所有修改都不会引起回流,因为它已经不在渲染树了。

    有三种方式可以让DOM脱离文档流:

    • 隐藏元素,应用修改,重新显示
    • 使用文档片段(document fragment)在当前DOM之外构建一个子树,再把它拷贝回文档。
    • 将原始元素拷贝到一个脱离文档的节点中,修改节点后,再替换原始的元素。

    考虑我们要执行一段批量插入节点的代码:

    function appendDataToElement(appendToElement, data) {
        let li;
        for (let i = 0; i < data.length; i++) {
            li = document.createElement('li');
            li.textContent = 'text';
            appendToElement.appendChild(li);
        }
    }
    

    const ul = document.getElementById(‘list’);
    appendDataToElement(ul, data);

    如果我们直接这样执行的话,由于每次循环都会插入一个新的节点,会导致浏览器回流一次。

    我们可以使用这三种方式进行优化:

    隐藏元素,应用修改,重新显示

    这个会在展示和隐藏节点的时候,产生两次重绘

    function appendDataToElement(appendToElement, data) {
        let li;
        for (let i = 0; i < data.length; i++) {
            li = document.createElement('li');
            li.textContent = 'text';
            appendToElement.appendChild(li);
        }
    }
    const ul = document.getElementById('list');
    ul.style.display = 'none';
    appendDataToElement(ul, data);
    ul.style.display = 'block';

    使用文档片段(document fragment)在当前DOM之外构建一个子树,再把它拷贝回文档

    const ul = document.getElementById('list');
    const fragment = document.createDocumentFragment();
    appendDataToElement(fragment, data);
    ul.appendChild(fragment);

    将原始元素拷贝到一个脱离文档的节点中,修改节点后,再替换原始的元素。

    const ul = document.getElementById('list');
    const clone = ul.cloneNode(true);
    appendDataToElement(clone, data);
    ul.parentNode.replaceChild(clone, ul);

    对于上述那种情况,我写了一个demo来测试修改前和修改后的性能。然而实验结果不是很理想。

    原因:原因其实上面也说过了,浏览器会使用队列来储存多次修改,进行优化,所以对这个优化方案,我们其实不用优先考虑。

    避免触发同步布局事件

    上文我们说过,当我们访问元素的一些属性的时候,会导致浏览器强制清空队列,进行强制同步布局。举个例子,比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度,我们可能写出这样的代码:

    function initP() {
        for (let i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.width = box.offsetWidth + 'px';
        }
    }

    这段代码看上去是没有什么问题,可是其实会造成很大的性能问题。在每次循环的时候,都读取了box的一个offsetWidth属性值,然后利用它来更新p标签的width属性。这就导致了每一次循环的时候,浏览器都必须先使上一次循环中的样式更新操作生效,才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为:

    const width = box.offsetWidth;
    function initP() {
        for (let i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.width = width + 'px';
        }
    }

    同样,我也写了个demo来比较两者的性能差异。你可以自己点开这个demo体验下。这个对比差距就比较明显。

    对于复杂动画效果,使用绝对定位让其脱离文档流

    对于复杂动画效果,由于会经常的引起回流重绘,因此,我们可以使用绝对定位,让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个例子

    打开这个例子后,我们可以打开控制台,控制台上会输出当前的帧数(虽然不准)。

    image-20181210223750055

    从上图中,我们可以看到,帧数一直都没到60。这个时候,只要我们点击一下那个按钮,把这个元素设置为绝对定位,帧数就可以稳定60。

    css3硬件加速(GPU加速)

    比起考虑如何减少回流重绘,我们更期望的是,根本不要回流重绘。这个时候,css3硬件加速就闪亮登场啦!!

    划重点:使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。

    本篇文章只讨论如何使用,暂不考虑其原理,之后有空会另外开篇文章说明。

    如何使用

    常见的触发硬件加速的css属性:

    • transform
    • opacity
    • filters
    • Will-change

    效果

    我们可以先看个例子。我通过使用chrome的Performance捕获了一段时间的回流重绘情况,实际结果如下图:

    image-20181210225609533

    从图中我们可以看出,在动画进行的时候,没有发生任何的回流重绘。如果感兴趣你也可以自己做下实验。

    重点

    • 使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘
    • 对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。

    css3硬件加速的坑

    • 如果你为太多元素使用css3硬件加速,会导致内存占用较大,会有性能问题。
    • 在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速,会产生字体模糊。

    总结

    本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘,希望可以帮助大家更好的理解回流重绘。

    参考文献

    展开全文
  • HTML回流与重绘

    千次阅读 2019-08-15 20:57:46
    指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置,他的开销是非常大的,回流可以理解为渲染树需要重新进行计算,一般最好触发元素的重构,避免元素的回流;比如通过添加class来添加css样式...
  • 回流重绘

    2020-04-21 15:17:30
    当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流 什么是重绘? 当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改...
  • 使用集成的 Keithley 2700 万用表监测电阻带有 7700 多路复用器。 下面的示例代码用于监控 8 样品... 此代码用于监控回流焊过程,并且可以用于类似目的并进行必要的修改。 作者:Di Erick Xu,滑铁卢大学,2017.Aug.02
  • 防抖与回流

    2021-06-01 21:56:35
    防抖与回流 防抖策略: 当事件被触发后,延迟n秒后执行回调,如果在这n秒内事件又被触发,则重新计时 实现输入框防抖: 1.定义防抖的id var timer = null; 2.定义防抖函数 function de (keywords){ timer = ...
  • 重绘和回流

    2020-11-12 14:28:24
    重绘和回流重绘:回流: 重绘: 元素样式的改变【元素的宽高,大小,位置不变】会引发浏览器重绘渲染树; 回流: 元素的大小或位置发生改变,会触发重新布局,导致渲染树重新计算布局和重新渲染。 回流一定会触发重...
  • 回流和重绘

    2020-11-30 21:47:54
    回流和重绘 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面。 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,...
  • 回流用户分析实战

    千次阅读 2016-12-05 17:48:11
     用户回流可以分为自主回流与人工回流,自主回流指玩家自己回流了,而人工回流则是人为参与导致的,这里的回流用户大部分为自主回流。 一、回流用户构成分析 1.1 为什么要熟悉构成 先熟
  • 重构与回流

    2019-01-21 17:36:00
    在讨论页面重绘、回流(重排)之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的, 下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都...
  • 回流与重绘

    2020-08-15 16:50:07
    回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。...
  • 回流和重绘 原创2016年02月29日 14:49:02 标签: 布局/ dom 640 回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,842
精华内容 4,336
关键字:

代码回流