首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

页面优化——重绘和回流[通俗易懂]

一、写在前面 页面优化在面试的过程中经常遇到的问题,今天就来总计一下重绘和回流的问题。 二、重绘和回流是什么 我们都知道一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点进行几何布局形成render树(渲染树),当渲染树构建完成后,页面就根据DOM树开始布局,渲染树也根据设置的样式渲染这些节点。 在这一过程中,比如我们删除DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树也发生变化,那么肯定要重新构建DOm树,而DOM树和渲染树紧密相连,DOM树渲染完了,渲染树也会随之进行渲染,这个过程就称为回流。 在比如说,我们给一个元素修改颜色,这样的行为是不会影响页面的布局的,DOM树不会发生改变,但是颜色变了,渲染树得重新绘制,这就是重绘。 所以说回流一定会触发重绘,重绘不一定触发回流。 题外话: 1、由于display:none的元素不在页面渲染,渲染树的构建不包含这些节点。但是visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流,visibility为hidden虽然看不到,但类似与透明度为0,其实还在文档流中,还是有渲染的过程。 2、尽量避免使用表格布局,当我们不给表格的td设置固定的宽度的时,一列的td的宽度会以最宽的td的宽作为渲染的标准,假设前几行的td在渲染时都渲染好了,结果下面的某行特别宽,table为了统一宽度,前几行的td会回流重新计算宽度,这是一个比较耗时的操作。 三、怎么样减少回流 回流会重构DOM树,渲染树也得重新渲染,比较麻烦,哪些行为可以引发回流,如何去避免呢? 1、DOM的删除行为 比如删除某个节点,或者给父元素插入子节点,这类操作都会触发回流。如果我们插入多个子节点的话,可以使用documentfragment。 2、几何属性的变化 比如说元素的宽度变了,border变了,字体大小变了,这种直接会引发页面的布局的改变,也会触发回流。如果我们需要改变多个属性,做好的是将这些改变定义在一个class中,直接修改class名,这样只会触发一次回流。 3、元素的位置发生改变 修改一个元素的左右margin,padding之类的操作,所以在元素位移的动画,不要更改margin之类的值,使用定位脱离文档流后进行改变位置。 4、获取文章的偏移量之类的属性 例如我们需要获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性的时候,浏览器为了保证值的正确性也会回流进行获取,所以如果你要不多次操作,最好取完进行缓存。 5、页面初次渲染触发回流 页面的初次渲染触发回流这样无法避免。 6、浏览器窗口尺寸的改变 resize事件的发生也会触发回流。

02

前端安全保障:加密/混淆/反调试/加壳/自定义虚拟机—必要吗

起初个人认为在加了https的情况下前端加密完全没有必要。前端无论是传输内容加密还是代码加密,都是增加一丁点破解难度而已,却带来性能的天坑。轮子哥说:人家黑客又不是非得用你的网站来使用你的服务,你客户端加密又有什么用呢,人家可以直接把加密后的截取下来发到服务器去,等于没加密。Mark说:现在几乎所有大公司代码都是进过审核的,怎么可能随便让一个程序员打印出密码(参考银行)。如果代码中可能植入后门这点成立,前端同样可以植入后门,内鬼同样可以把用户密码跨域发送给某个地址。 假设不可以前端植入后门,内鬼在后端获取hash后的密码。内鬼同样可以使用脚本使用hash后的密码发包,实现用户登录。综上,前端加密完全没有意义

01

CVPR 2022 | DiffusionCLIP: 用于稳健图像处理的文本引导扩散模型

近期,结合对比语言-图像预训练(CLIP)的 GAN 反演方法在零样本图像操作方面引起了广泛关注,它可以根据文本提示进行图像操作。然而,由于 GAN 反演性能有限,它在各种类型的真实世界图像上的应用仍然很棘手。具体而言,成功的图像操作应该将图像属性转换为目标属性,同时不会对输入内容产生意外变化。然而,目前最先进的基于编码器的 GAN 反演方法往往不能成功重建具有新姿势、视角和细节的图像。当处理高变异数据集(如 LSUN-Church 和 ImageNet )中的图像时,这个问题变得更加严重。 最近,扩散模型,如去噪扩散概率模型(DDPM)和基于分数的生成模型在图像生成任务上取得了巨大的成功。最新的研究表明,与变分自编码器(VAEs)、流动模型、自回归模型和生成对抗网络(GANs)相比,这些模型在图像合成性能方面具有更高的质量。此外,最近的去噪扩散隐式模型(DDIM)进一步加速了采样过程,并实现了几乎完美的反演。 基于此,本文提出了一种新的 DiffusionCLIP 方法,这是一种通过扩散模型进行 CLIP 引导的强大图像操作方法。其关键思想是使用基于文本提示的 CLIP 损失来微调反向扩散过程中的评分函数,以控制生成图像的属性。这种方法可以成功地在训练过和未见过的领域中进行图像操作,甚至可以将图像从一个未见过的领域转换为另一个未见过的领域,或者从草图中生成未见过的领域的图像。此外,通过简单地将多个经过微调模型预测的噪声组合在一起,可以通过仅进行一次采样过程同时改变多个属性。另外,DiffusionCLIP 通过操作来自广泛多样的 ImageNet 数据集的图像,在 GAN 反演方面取得了一步进展。此前由于其较差的重建效果,该数据集很少被探索。本文还提出了一种系统的方法来寻找导致高质量和快速图像操作的最佳采样条件。

03
领券