html和easyui,移动已经display none的元素会触发重绘重排吗?下有详细

因为easyui中的panel没有办法动态改变content,所以我只有使用这样的办法
图片说明
直接把一个id叫做relation panel 面板里面的东西直接append到一个面板下面。
但是这种方法有点慢,因为easyui会给他自己类的东西加上很多的dom节点。所以我想着是不是先隐藏一个面板的内容,然后再移动这个面板或者对这个面板进行修改(当然如果只是用在我刚刚使用的方法应该是没有区别的)速度是不是会高很多?

当然,如果大家有什么好方法可以动态改变easyui的panel的内容的话,还请大家不吝赐教!

3个回答

你relation内容多效率提升不了多少。。要么就自己写UI,不用easyui的,不需要生成没必要的dom节点

如果不用重新生成事件而且原来的panel也不显示,可以使用panel中的move方法移动到目标panel下面,假装是这个新panel下的内容。单纯移动一个div效率很高的,我一般也是这样处理一些需要动态展示的panel,先把panel放到看不到的地方初始化,然后在点击事件时再移动到目标位置,然后显示,秒出现。

移动display:none的元素不会触发重绘。这个主要是多个dom操作,减少重绘。先隐藏。全部操作完成,显示时一次重绘。可以提交效率,至于你说的会不会高很多就要看操作复杂度了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css 页面重绘和回流(重排)以及优化

一、html页面的呈现流程 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,

关于浏览器的重绘和重排问题

写这篇博客之前我是对重绘和重排没有什么概念的,然而今天在学习vuejs高仿饿了吗的项目时,碰到了这样一个问题 dropping(el, done) { /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; this.$nextTick(() => {

浏览器的重排和重绘

浏览器的渲染过程 解析HTML源码 构建一棵和HTML对应的DOM树, 再根据DOM元素的几何属性构建一棵渲染树。 根据渲染树把页面绘制到浏览器上。 (由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。 但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节 点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用

浅谈CSS重绘与回流/重排

任何对渲染树的修改都有可能会导致下面两种操作: 1、回流/重排 渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。 2、重绘 部分节点需要更新,但没有改变其形状,会触发重绘操作。   会触发重绘或回流/重排的操作 1、添加、删除元素(回流+重绘) 2、隐藏元素,display:none(回流+重绘),visibility:h

display和visibility的区别以及回流和重绘

display:none会脱离文档流,不占据页面空间;visibility:hidden,只是隐藏内容,并没有脱离文档流,会占据页面的空间。讲述回流以及重绘之前需要先了解页面在文档加载完成之后到完全显示中间的过程:1.根据文档生成DOM树(包括display:none的节点)2.在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括...

浏览器重绘和重排

时间:2017年4月25日12:40:06     前端开发岗位是一个知识范围比较综合的一个岗位,需要了解和探究的知识很多,因此,可以从广度和深度两个方面着手,初级工程师以广度学习为主,高级工程师以深度研究为主。     浏览器引擎解析web项目的过程:下载资源(HTML、CSS、JS、图片),构建DOM树(页面结构),将HTML元素放置到文档流中正确的位置,构建渲染树(DOM节点样式

js性能-DOM编程之重绘和重排

浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构:1.DOM树 -------- 表示页面结构 2.渲染树 -------- 表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。 渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义

css重绘与重排

浏览器加载页面原理通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于 盒子模型 (由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面。由于浏览器的 流布局,对渲染树的计算通常只需要遍历

浏览器渲染页面的过程,以及重绘和重排

浏览器的渲染过程 1,浏览器解析html源码,然后创建一个 DOM树。 在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。 DOM树的根节点就是 documentElement,对应的是html标签。 2,浏览器解析CSS代码,计算出最终的样式数据。 对CSS代码中非法的语法她会直接忽略掉。 解析CSS的时候会按照如下顺序来定义优先级

高性能JavaScript之重绘与重排

浏览器是怎样渲染一个页面的?1,解析标签DOM:浏览器解析html源码,然后创建一个 DOM树。 在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。 DOM树的根节点就是 documentElement,对应的是html标签。2,渲染:浏览器解析CSS代码,计算出最终的样式数据。对CSS代码中非法的语法她会直接忽略掉。解析CSS的时候会按照如下顺序来定

页面的重绘与重排原理以及性能优化

在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘(redraw)和重排(reflow),需要付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去?本文期待可以部分解释以上三个问题。   浏览器从下载文档到显示页面的过程是个复杂

html-什么是重排和重绘?如何减少影响的范围

答:重排:是引起DOM树重新计算的行为重绘:一个元素外观的改变(如color)所触发的浏览器行为✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂一个页面由两部分组成DOM:描述该页面的结构render:描述 DOM 节点 (nodes) 在页面上如何呈现当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 重绘repai...

触发浏览器重排的一些操作

触发重排的操作 页面的初次渲染 DOM树的结构变化,包括添加、删除dom元素 获取某些属性,包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputed...

什么是浏览器的重排(reflow)和重绘 (repaint)?如何减少重排和重绘?

重绘 重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随重排。 重排 当DOM变化影响了元素的几何属性(宽、高改变等等) 浏览器此时需要重新计算元素几何属性 并且页面中其他元素的几何属性可能会受影响 这样渲染树就发生了改变,也就是重新构造RenderTree渲染树 这个过程叫做重排(reflow)

哪些情况下会导致重排或重绘的发生?请给出性能优化的建议。

标签: 1.简述重排的概念 浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。 2.简述重绘的概念 重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色...

浏览器重排和重绘

重排浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。重绘重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元

关于display:none使用

写的真不好,但是记录下.方便以后查找

关于display:none;的图片加载

1、如果元素有{display: none;}的样式的话,标签上的图片会被请求加载,但是不会被渲染 例子: .img-container { background-image: url(../imgs/icon1.png); } 其中icon1.png和icon2.png会请求后端进行加载,但是因为样式属性不会计算该元素的布局 2、如果父元素有{d

关于form表单提交什么隐藏属性也可以提交数据

form中visibility=hidden的和display=none的表单元素都会随表单提交,只有disabled=true 的元素不随表单提交。

触发浏览器重绘的操作?

1.获取元素的offsetHeight属性 let rf = el.offsetHeight; // 主动触发浏览器重绘

HTML中是否脱离文档流

我们在显示隐藏元素的时候经常会用到把display设置为none,设置为none效果很明显,就是让元素脱离文档流,不显示,不占文档空间。 定位: inhert:规定从父元素继承position属性的值。 static:默认值,没有定位,元素出现在正常的流中。 relative:无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。 absolute:绝对定位使元素的位

浏览器重绘与重排的性能优化

了解了浏览器渲染原理之后 我们知道了浏览器听过渲染树计算布局后,就开始绘制页面元素 但是渲染树并不是一成不变的,在我们的脚本当中 它是可能改变的重绘与重排当DOM变化影响了元素的几何属性(宽、高改变等等) 浏览器此时需要重新计算元素几何属性 并且页面中其他元素的几何属性可能会受影响 这样渲染树就发生了改变,也就是重新构造RenderTree渲染树 这个过程叫做重排(reflow)如果D

本来只是想验证下display:none的元素是不是所占空间也消失,然后引生出一堆问题的思考。

display:none;的验证结果是该元素所占空间消失,验证例子为:<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> div{ width:500px; height:500px; } .n

CSS中避免重排和重绘的小技巧

页面渲染的一般过程为JS &amp;gt; CSS &amp;gt; 计算样式 &amp;gt; 布局 &amp;gt; 绘制 &amp;gt; 渲染层合并。其中,Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环,所以我们尽量避免着这两个环节。从性能方面考虑,最理想的渲染流水线是没有布局和绘制环节的,只需要做渲染层的合并即可。那怎么知道哪些CSS属性的改变是会影响这两个环节的呢?会影响重排和重绘的CSS属性有backg...

高性能JavaScript 重绘与重排

本篇介绍一下JavaScript DOM可能是最耗时间的重绘和重排问题。浏览器下载完页面中的所有组件——HTML标记,JavaScript,CSS,图片之后会解析并生成两个内部数据结构:DOM树 、渲染树。 重排:当DOM元素的变化影响了元素的几何属性(宽、高等)——比如改变边框宽度或给段落增加文字,导致行数增加,浏览器需要重新计算元素的几何属性,同样其他元素的几何属性也会受到影响。浏览器会重新构造

关于display的那些事儿!

display这一CSS属性,还是相当神奇的哦!给它设置不同的值,被修饰的标签相应的就随之变换了自身的属性特性,具有变色龙特性,该怎么适应,就怎么变!我们常常会用到display对应值有block、none、inline等等!

触发隐藏按钮的onclick事件 注意事项

按钮隐藏的时候不要使用

reflow(回流)和repaint(重绘)及其优化

为什么不能用CSS通配符 *,CSS选择器层叠为什么不能超过三层,CSS为什么尽量使用类选择器,书写HTML为什么少使用table,为什么结构要尽量简单-DOM树要小…. 对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow; 当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定

在display:inline-block的div中写入文本导致div脱离文档流

当在一个display属性为inline-block的div中放置文本时,会导致该div脱离原本的文档流,其原因是有些游览器对于display:none属性的容器会自动设置其vertical,使改div的文字与并列的div底部对齐,经过尝试,可以重新设置其vertical,即设置vertical:top。

减少页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程。 frame是一个矩形,拥有宽高和相对父容器的偏移。frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为

浏览器的重绘和重排的影响

浏览器下载完页面中所有的组件之后,会解析生成两个内部数据结构: 1.  DOM树:表示页面结构 2. 表示DOM节点如何显示      当DOM和渲染树构建完成之后,浏览器就开始显示(绘制)页面元素,当DOM的变化影响了元素的几何属性(如改变边框或者高度)浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会受到影响,浏览器会使中受到影响的部分失效,并重新构造渲染树,这个过程被称

重排与重绘

重排与重绘 一个页面渲染完毕后,随着用户的操作,或者数据变化,网页还会进行重新渲染。根据不同的触发条件,重新渲染分为两种情况:重排(reflow)和重绘(repaint)。 所有对元素视觉表现属性的修改,都会导致重绘(repaint)。比如修改了背景颜色、文字颜色等。 所有会触发元素布局发生变化的修改,都会导致重排(reflow)。比如窗口尺寸发生变化,删除、添加 DOM 元素,修改了影响元...

jq可以选到display为none的元素

jq可以选到display为none的元素&amp;lt;span id=&quot;aaa&quot; style=&quot;display:none;&quot;&amp;gt;隐藏&amp;lt;/span&amp;gt;console.log($(&quot;#aaa&quot;).text());

css 隐藏 不占位 隐藏 占位

隐藏不占位: display:none 隐藏占位: visibility:hidden 这两个隐藏的区别就在于是否占位。

css 设置display:none 后用js获取值为空

如题,做一个toggle性质的效果,判断display时就有问题,console.log出来display为空串。所以display==""或者display=="none"时元素都是隐藏的。默认为空串

关于HTML中div从display:none到display:block透明度渐增显示的实现

在编写前端页面的过程中,经常会遇到将鼠标移至链接或li上时显示div的需求。如图: 而在这过程中,为了有更好的用户体验,通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现: (1)在HTML中编写页面代码,并在CSS中设置要弹出的div显示display:none; HTML:

javascript获取隐藏元素(display:none)的高度和宽度的方法(转)

类型:转载 时间:2014-06-06 这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下 js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和

网页的重排(reflow)与重绘(repaint)

什么是重排什么是重绘重排何时发生重绘何时发生

input 元素,父元素设置了 display:none; jquery 给input赋值后,input无值

query 给其赋值(.val("123")),赋值完毕后,将父元素显示出来,input上并没有值?? 用input type="hidden"。

CSS display:none使用注意事项小结

1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索,会影

Html隐藏占空间与隐藏不占空间

隐藏不占用空间:display:none;以下为示例代码:<span style="display:none;">&nbsp;获取中</span>隐藏占用空间: visibility:hidden;以下为示例代码:<span style="visibility:hidden;">&nbsp;获取中</span>

关于隐藏属性与表单提交的问题

form表单中visibility=hidden的和display=none的表单元素都会随表单提交,只有disabled=true的元素不随表单提交。

使用"Display: None"来隐藏内容是合法的SEO吗?

如果你正在优化一个有上千页面的网站,那么你很有可能同一个CMS系统在打交道。但是,CMS系统经常会带来很多搜索引擎优化问题。如果CMS的开发者不熟悉搜索引擎工作原理的话,即使他们本来没有打算欺骗搜索引擎,但最终的结果还是会导致搜索引擎认为被欺骗了。很多大型网站都会用到预载、导航或者根据需要动态显示的内容。实现这些最常用到的技术是使用CSS中的"display: none"。这篇文章将为你详细讲解"display: none"属性。

显示display元素常见属性整理

display元素常见属性整理

CSS3理解display属性

display属性定义: 可以将页面元素隐藏或者显示出来,也可以将元素强制改成块级元素或内联元素,在页面布局和JavaScript特效中常常用到display属性。display属性值:none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-h

display常用属性及inline元素之间的空白和padding的问题

本文主要对display 的几种最常用的方法进行了分析,分别为none,block,inline-block,inline,inherit。 其中主要分析了inline时,两个连续行内元素之间出现空白,以及行内元素占据空间等问题。 W3C规定: display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 d

前端知识点分析——重排和重绘

1.document.write和innerHTML的区别document.write重排整个页面 innerHTML可以重绘页面的一部分2.浏览器运行机制1、构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Content Tree/DOM Tree);2、构建渲染树(construct):解析对应的CSS样式文...

关于display样式、overflow样式、文档流、浮动、定位

一、显示与隐藏   1 通过display样式 - none隐藏     语法 - display:none;     特点 - 隐藏以后,元素原有的位置会被占用,   2 通过visibility - hidden隐藏                      - visible显示(默认值)     语法 - visibility:hidden;     特点 - 隐藏以后,元素

[jQuery]无法准确获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

在开发一个弹框插件时,遇到一个需要计算隐藏弹框的高度问题。用jquery里面的方法$('box').outerHeight(true)得到隐藏层高度的值随着滚动条滚动总是不一致。没辙,放弃这一方法去获取,原来生js中的offsetHeight来试试看,$(''box")[0].offsetHeight,毫无疑问得到的值总是0。 为解决这个老大难问题,在网上看到另一较好的解决方法新增扩展jquer

HTML style、display属性-如何设置隐藏、显示功能

如何设置显示、隐藏属性。

相关热词 c#对文件改写权限 c#中tostring c#支付宝回掉 c#转换成数字 c#判断除法是否有模 c# 横向chart c#控件选择多个 c#报表如何锁定表头 c#分级显示数据 c# 不区分大小写替换
立即提问
相关内容推荐