首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端如何实现高性能表格?

那问题来了,既然 DOM 渲染效率天然比 Canvas 低,我们应该如何用 DOM 实现一个高性能表格呢?...但这些方案都不可避免的存在快速滑动时白屏问题,笔者通过不断尝试终于发现了一种完美解决的方案,我们一起往下看吧!...单元格合并仅是产生一个更大的单元格,它的定位方式与小单元格并无差异。 带来的好处是: 滚动时,单元格可以最大程度实现复用。...经过一番思考,我们只要将方案稍作调整,就能同时解决上面三个问题:即不要使用原生的滚动条,而是使用 .scroll 代替滚动,用 mousewheel 监听滚动的触发: 这样做带来什么变化呢?...局部预计算 局部预计算就是一种解决方案,即便单元格数量有一千万个,但我们如果仅计算前 1w 个单元格呢?那无论数据量有多大,都不会出现丝毫卡顿。

3.6K10

【IOS开发基础系列】UIAlertController专题

1 UIAlertView         随着苹果上次iOS 5的发布,对话框视图样式出现在了我们面前,直到现在它都没有发生过很大的变化。...“警示”样式         什么是“警示”样式呢?我们先不着急回答这个问题,先来看一下下面关于“警示”样式的简单示例。在这个示例中,我们将前面的示例中的“好的”按钮替换为了“重置”按钮。     ...        如果上拉菜单中有“取消”按钮的话,那么它永远都会出现在菜单的底部,不管添加的次序是如何(就是这么任性)。...别激动得太早,我们现在还有一个很严重的问题,这个问题隐藏得比较深。...本文的代码可以在我的Github主页上找到,包括了AlertController - ObjC以及AlertController - swift。

60630
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    升级IOS8游戏上传自定义头像功能失效的问题

    为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了。...游戏上传自定义功能的简介:卡牌游戏最初是《比武招亲》中有一个充VIP之后就可使用了上传自定义功能的特权,我们的游戏就“复制”了该功能。...对那个领域或者那个东西太过陌生,而且google正好被墙掉了访问起来断断续续的。现在问题被解决了,回想起来,运气成分真的很大。因为很多问题我跟测试他们讲,再让我解那个bug,我不会想到那个地方上去。...当我准备放弃的时候,突然却想到新功能中主界面有一个功能上面有调用swf进行特效的显示,然后我看了一下它被隐藏了。那我想既然隐藏了,那就不要让它play嘛,结果试了一下,嗯,不崩溃了!...换成IOS8.1的SDK后,上传头像功能不可用了,搜索了好久发现都跟自己的问题对不上,当输入特定的关键字时出来的第一条就是自己想要的,结果几分钟就把问题解决了,但找相应答案之前却已经花了将近4个小时…

    68720

    精读《高性能表格》

    那问题来了,既然 DOM 渲染效率天然比 Canvas 低,我们应该如何用 DOM 实现一个高性能表格呢?...但这些方案都不可避免的存在快速滑动时白屏问题,笔者通过不断尝试终于发现了一种完美解决的方案,我们一起往下看吧!...单元格合并仅是产生一个更大的单元格,它的定位方式与小单元格并无差异。 带来的好处是: 滚动时,单元格可以最大程度实现复用。...经过一番思考,我们只要将方案稍作调整,就能同时解决上面三个问题:即不要使用原生的滚动条,而是使用 .scroll 代替滚动,用 mousewheel 监听滚动的触发: 这样做带来什么变化呢?...局部预计算 局部预计算就是一种解决方案,即便单元格数量有一千万个,但我们如果仅计算前 1w 个单元格呢?那无论数据量有多大,都不会出现丝毫卡顿。

    1.1K40

    学会一行CSS即可提升页面滚动性能

    重点来了,既然该属性可以阻止元素成为鼠标事件,那么修改页面该属性值为 none,就能避免在滚动时鼠标频繁触发包括hover在内的任何鼠标事件,从而提升了页面滚动时的性能。...setTimeout(() => { document.body.style.pointerEvents = 'auto'; // 释放 }, 100);})如果是移动端网页,没有鼠标事件是不是就不能用上面的属性来优化滚动了呢...顾名思义,该属性是用于设置触摸屏如何操纵元素区域动作,同样的,touch-action 可以禁用浏览器在移动端处理手势的事件,进而提高页面滚动性能,同时它还能解决移动端 点击延迟问题(很多人可能只知道viewport...不过需要注意的是,虽然该属性也有 none 值,但在这里并不适用,因为"滚动"也属于手势的一种,应该使用 manipulation 这个值,意为只允许进行滚动和持续缩放操作,也就相当于禁用了其他页面手势...全局生效要写在 html 上:html { touch-action: manipulation;}类似的,如果移动端有自定义拖动的需求,也可以用这个 CSS 来优化性能,当我们需要完全阻止原生touch

    3.2K30

    Activity 切换动画---点击哪里从哪放大

    从哪放大,宽高从多少开始放大都可以自己设定,完美是不是! 不是的,还是别高兴太早了,这个接口确实可以实现点击哪个 View,就从哪个 View 放大的效果。...基于目前能力不够,不足以解决以上缺点所列问题,所以暂时抛弃该方案,但后期会利用时间来学习下 5.0+ 转场动画原理。 emmm,这样一来,岂不是就没办法实现效果图所需要的动画了?...如果可以的话,按理来说应该正好解决问题。 但找了半天,没有找到相关的接口来动态设置这个属性的值,这个半透明属性值是设置在 style.xml 里的。...后来,我很好奇 5.0+ 的动画到底是怎么实现的这种动画效果,因为它明明不需要设置 windowIsTranslucent 为 true,但它的动画,Activity 在跳转时,上个 Activity...至于具体原因,还是不清楚,上面那个大神的文章里也提到了这个现象,但他也不知道如何解决,我也不知道。

    4K50

    基础渲染系列(十一)——透明度

    (渲染类型tag) 2 半透明渲染 当想在某个物体上切一个洞时,cutout 渲染就足够了,但是当你需要半透明效果时就不行了。同样,cutout 渲染是针对每个片段的,这意味着边缘会出现锯齿。...为了解决这个问题,我们必须增加对另一种渲染模式的支持。此模式将支持半透明。Unity的标准着色器将此模式命名为Fade,因此我们将使用相同的名称。将其添加到我们的RenderingMode枚举中。...如果不使用自定义UI,则可以使用HideInInspector属性将其隐藏。无论如何,我都会添加这些属性。 ? 使用这些float属性代替必须可变的blend关键字。你需要将它们放在方括号内。...这再次是节能问题。因此,无论其固有的透明性如何,反射性越强,穿过它的光线越少。 为了表示这一点,我们必须在GPU执行混合之前但在更改反照率之后调整alpha值。如果表面没有反射,则其alpha不变。...(调整 alpha) 请记住,这是对透明的极大简化,因为没有考虑对象的实际体积,而只考虑了可见表面。 那单向镜呢? 没有真正的单向镜。用于该目的的窗子实际上是双向镜像。这样的窗户非常反光。

    3.8K20

    Chrome断点调试

    下面我继续举个例子方便大家理解,废话不多说,上图: 假设我们现在正在实现一个加载更多的功能,如上图,但是现在加载更多功能出现了问题,点击以后数据没有加载出来,这时候我们第一时间想到的应该是啥?...不过我相信大家肯定不会问这么low的问题~不瞎扯了~ 继续正题,上面的图就是点击加载更多按钮后的情况,我们可以看到左侧的页面被一个半透明的层给盖住了,页面上方还有一串英文和两个按钮,右侧代码227行被添加上了背景色...继续琢磨琢磨~ 如果出现了上图这个情况,说明一点,click事件中的函数被调用了,进一步说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。...那么接下来”犯罪嫌疑人“的身份锁定在哪里呢? 我们将目光投向事件内部,click事件触发了,那么接下来的问题就是它内部的函数问题了。如果你要问为什么?请给我一块豆腐。。。...上面介绍到我单击了两次“逐语句执行”按钮,代码从227行运行到229行,大家觉得这意味着啥?是不是说明从语法上来说,前两句是没有问题的,那么是不是也同时意味着前两句就排除嫌疑了呢?我看不然。

    4.6K20

    可以提高web前端开发效率的6个浏览器书签,建议你赶快用起来吧

    image.png “Guides and Thangs”——CSS-Tricks 中我最喜欢的部分 虽然我不确定“设计模式”是对该功能最准确的描述,但它仍然非常有用,而且它实际上已经存在了很长时间,...开发人员可能希望在处理光学不平衡时更好地可视化边界(即,当某些东西“看起来不对”时,即使它不是)、边距崩溃(当某些边距被忽略时)、display:/ float:/的各种问题position:等等。...手动为 cookie 编写expires=日期实在是太尴尬了,但幸运的是,如果您知道它的确切名称,这个create-your-own-set-cookie-bookmarklet 应用程序可以为特定 cookie...切换类 您可能希望从 HTML 元素中添加或删除类,以触发新状态或外观更改,也称为切换类。类切换发生在大多数实时网站的幕后,但它也可以在测试期间用于跳过必须满足某些面向用户的条件。...如果您制作了一个书签来简化您的工作流程,我很乐意看到它!在评论中分享它们,让我们开始收藏。 如有相关前端方面的技术问题 ,欢迎主页添加我,我会定期在群里给大家分享最新技术和解答问题 。

    1.6K10

    Power Query 真经 - 第 3 章 - 数据类型与错误

    它提供了一个详细信息区域,指出导致错误的具体内容。在本例中,它是丢失文件的完整文件路径。 有一个【转到错误】的按钮。若当前步骤不是错误的直接来源时,这个按钮就会出现。...如果在查询前面的步骤中发生了任何事情,导致列被重新命名、删除或不再存在,那么在硬编码其中的列名的任何步骤中,最终都会遇到这个问题。 那么如何才能解决这个问题呢?同样,有如下的一些选择。...3.5.2 无效的数据类型转换 现在知道在这一列中至少有一个错误,如何才能找出原因呢? 这个问题的答案是选择单元格并检查预览中出现的信息。...现在知道了原因,那么该如何解决这个问题呢? Power Query 的美妙之处在于,对于这个解决数据错误的问题,实际上有多种选择。...当预览范围之外的数据出现错误时,这个预览方法的问题就出现了。

    5.7K20

    基础渲染系列(十二)——半透明阴影

    现在,我们来解决这个问题。 本教程是使用Unity 5.5.0f3制作。 ?...因此,请检查该内容,而不是是否定义了_SMOOTHNESS_ALBEDO。下面代码中我标记了差异。 ? 现在,我们可以在片段程序中检索alpha值,并在Cutout渲染模式下使用它进行Clip。 ?...从光的角度渲染阴影贴图时,这会使图案与阴影贴图对齐。 通过在片段程序中添加带有VPOS语义的参数,可以访问片段的屏幕空间位置。这些坐标不是由顶点程序显式输出的,但是GPU可以使它们可供我们使用。...它是其他结构的副本,不同之处在于当需要半透明阴影时,它应包含UNITY_VPOS_TYPE vpos:VPOS而不是float4 position:SV_POSITION。...(带有抖动的方向阴影 硬VS软) 不幸的是,抖动在视觉上不稳定。当物体移动时,你会获得非常明显的影子游泳。不仅沿着边缘,而且跨越整个阴影! ? (抖动 游泳) 如何在半透明的表面上接收阴影呢?

    3.4K40

    Vue一个案例引发的动态组件与全局事件绑定总结

    ,只要我们点击这个容器以外的地方就会隐藏城市列表组件,我以为算是结束了,不过那是不可能的,还是我太年轻了,这样做的后果就是不管我们点击任何一个地方它都会触发这个事件,即使是我们切换到其他组件时,事件照样会被触发...,显然这个不是我们想要的,因为当前事件会被无限触发,无疑会给我们带来不可预见的问题。...被重置的原因则是我们在每次在不同的组件进行切换的时候,组件都会进行新建与销毁,这也会导致重复渲染问题对性能也是不友好的。 那么我们该如何去处理这个问题呢?...我这里使用了 keep-alive 去解决这个问题,那么 keep-alive 该如何使用以及作用是什么呢?...,而不是销毁它们,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    1K20

    Vue一个案例引发的动态组件与全局事件绑定总结

    ,只要我们点击这个容器以外的地方就会隐藏城市列表组件,我以为算是结束了,不过那是不可能的,还是我太年轻了,这样做的后果就是不管我们点击任何一个地方它都会触发这个事件,即使是我们切换到其他组件时,事件照样会被触发...,显然这个不是我们想要的,因为当前事件会被无限触发,无疑会给我们带来不可预见的问题。...被重置的原因则是我们在每次在不同的组件进行切换的时候,组件都会进行新建与销毁,这也会导致重复渲染问题对性能也是不友好的。 那么我们该如何去处理这个问题呢?...我这里使用了 keep-alive 去解决这个问题,那么 keep-alive 该如何使用以及作用是什么呢?...会缓存不活动的组件实例,而不是销毁它们,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    1.5K00

    iOS 小技能:Method Swizzling (交换方法的IMP)

    来直接设置某个方法的IMP, 在运行时,类(Class)维护了一个消息分发列表来保证消息的正确发送,每一个消息列表的入口是一个方法(Method),这个方法映射了一对键值对,其中键是这个方法的名字 selector...= UIModalPresentationAutomatic;// 1、后果:被怼了很惨,因为项目里有很多模态出来的VC是半透明,结果现在变成完全不透明,背景为黑色。...;半透明,全屏覆盖的问题都得到完美解决。...但是会引发一个新的问题:前一个页面的viewWillAppear:、viewDidAppear:也无法触发。...例如:A Present B, 有时因为业务逻辑需要,必须在viewWillAppear, viewDidAppear里写一些代码,当B 调用dismiss方法的时候, A的这个两个方法不会触发,

    1.7K10

    CSS Grid 那些鲜为人知的内幕

    ❞ 一个有4列的网格实际上有5条列线。当我们将子项分配到网格时,我们使用这些线来锚定它们。如果我们希望子项跨越前3列,它需要从第1行开始,并在第4行结束。...当我们想让特定区域跨越多行或多列时,我们可以在我们的模板中「重复该区域的名称」。在这个例子中,sidebar区域跨越了两行,所以我们在第一列的两个单元格中都写了 sidebar。...如何抉择 在构建显示布局时,我们可以通过使用areas和行/列都可以达到目的,但是呢,使用areas时,它允许我们给grid分配语义含义,而不是使用晦涩难懂的行/列数字。...键盘用户的注意事项 ❝在处理网格分配时存在一个重要的问题:Tab 键顺序仍然基于 DOM 位置,而不是网格位置。 ❞ 通过一个示例会更容易理解。...为了解决这个问题,我们应该重新按视觉顺序在 DOM 中重新排列网格子项,以便我可以从左到右,从上到下进行 Tab 键浏览。 6.

    16610

    使用antd表格组件实现日程表

    由于要和jsp进行交互,所以在实现过程中,遇到了一些难题踩了挺多坑,本文就跟大家分享下我从0到1实现这个需求的过程与思路,欢迎各位感兴趣的开发者阅读本文。...需求实现 接下来,就跟大家分享下在实现这个需求时,遇到的难点、踩到的一些坑以及我的解决方案。...于是,我多试了几次,发现还是不渲染,打开控制台后就奇迹般的渲染上去了,有点摸不着头脑,就求助了下网友,我才恍然大悟,原来是antd没有监听到引用地址的改变,得到了下述解决方案,用一个函数去处理它,让antd...使用use-immer来替代React的useState来解决这个问题,这个就比较坑爹了,官方提供了umd的js库,但是通过cdn引入进来后,我硬是没找到它暴露出来的对象是哪个,没法用,故放弃。...:但json数据中有函数时,里面的函数会失效没法执行,由于我需要自定义antd的表格,在json数据中包含了函数,因此我不能使用这个方法。

    3.7K20

    Unity 水、流体、波纹基础系列(二)——方向流体(Directional Flow)

    (采样流) 不幸的是,像扭曲着色器一样,我们得到了严重扭曲的无法使用的结果。独立旋转每个片段则会撕裂图案。当我们使用统一方向时,这不是问题。但对于各异向时,我不得不另寻解决方案。...这是一个空间问题,而不是时间问题。解决方法是再次通过融合隐藏问题。但是现在我们必须融合在空间中,而不是时间。而且我们正在处理2D表面,而不是一维时间,因此它将更加复杂。...突然大的UV增量会触发GPU沿着网格线选择不同的mipmap级别,从而破坏流数据。尽管我们可以通过消除mipmap来消除这些伪像,但这不是可取的。能不能有其他方式将它们隐藏起来呢。...(网格线处的锯齿波均为0和1) 为了解决这个问题,我们必须重叠单元。这样,我们就可以在它们之间交替使用,并使用其中一个隐藏另一个。首先,将第二个单元的偏移减半。...可以发现与动画过程中的流量相匹配的脉冲模式,但是咋一看很难注意到。将速度设置为零时,会出现此问题的更明显体现。

    4.5K50

    Excel表格的35招必学秘技

    十三、快速打印学生成绩条   常有朋友问“如何打印成绩条”这样的问题,有不少人采取录制宏或VBA的方法来实现,这对于初学者来说有一定难度。出于此种考虑,我在这里给出一种用函数实现的简便方法。   ...因此,在很多情况下,都会需要同时在多张表格的相同单元格中输入同样的内容。   那么如何对表格进行成组编辑呢?...要解决这个问题,除了利用到“SUBSTITUTE”函数的虚拟计算外,还要动用“TRIM”函数来删除空格。比如现在A1单元格中输入有“how many words?”...二十七、Excel工作表大纲的建立   和Word的大纲视图一样,Excel这个功能主要用于处理特别大的工作表时,难以将关键条目显示在同一屏上的问题。...通过它你可以轻松看到工作表、单元格和公式函数在改动时是如何影响当前数据的。   在“工具”菜单中单击“公式审核”子菜单,然后单击“显示监视窗口”按钮。

    7.6K80

    iOS学习——UIAlertController详解

    UIAlertController是在iOS8.0中出现的一种统一的提示风格的界面,代替原来的UIAlertView和UIActionSheet两种类别。...上添加文本框   上面我们讲到了如何在UIAlertController提示器上添加按钮,但是有时候,我们需要在提示器上添加一个或多个文本框让用户填写一些信息,在UIAlertController中也提供了一个方法直接可以在提示器上添加文本框...textFields,这各参数是一个只读数组类型,用于获取UIAlertController提示器上所有的文本框对象,这个经常在我们点击按钮时用这个来获取到每一个文本框,并取得用户填写的信息。...2.2 利用KVC方法进行UIAlertController属性的自定义   有时候使用第三方控件会带来很多不必要的代码量和bug,所以能用系统自带的UIAlertController解决是最好的办法,...如果要自定义标题和内容,可以通过NSAttributedString把字体和颜色设置好,然后在通过KVC的方法进行设置,就可以了。

    3.4K170
    领券