两行CSS让长列表性能渲染提升7倍!
今天咱们来看两个可以 直接提升渲染性能的 CSS 属性。content-visibility,contain-intrinsic-size.这两个 CSS 属性,主要针对 长列表渲染。有长列表渲染需求的同学,可一定不能错过咯~
阅读量: 571标签: 渲染
在 React 中实现条件渲染技术的 8 种方法
条件渲染是React中的一个强大功能,它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。然而,了解条件渲染在 React 中的工作原理并掌握其实现对于开发人员来说可能具有挑战性
阅读量: 283标签: 渲染
现在是 2023 年,请停止在 React 中使用“&&”进行条件渲染
React 是一个非常流行的前端框架,可以帮助我们高效地构建用户界面。很遗憾。如果我们不能正确使用&&,很容易导致UI错误。现在是 2023 年,我们需要知道:
阅读量: 1.4k标签: 渲染
页面重排和重绘问题
页面重排(reflow)是指浏览器重新计算页面的渲染布局,通常是由于元素的尺寸、位置或者视口尺寸发生了变化导致的。重排会影响页面的性能,应尽量避免。
阅读量: 497标签: 渲染
React 为什么重新渲染
更新(重新渲染)是 React 的重要特性 —— 当用户与应用交互的时候,React 需要重新渲染、更新 UI,以响应用户的输入。但是,React 为什么会重新渲染呢?如果不知道 React 为什么会重新渲染,我们如何才能避免额外的重新渲染呢?
阅读量: 551标签: 渲染
在 React 中实现条件渲染的七种方法
先从 React 最基本的条件类型来看。如果有数据就显示组件,如果没有数据就不显示任何内容。posts 为需要渲染的列表:这种形式会生效的原因就是我们会提前返回,如果满足条件(posts 值不存在)
阅读量: 688标签: 渲染
后端一次给你 10 万条数据,如何优雅展示,到底考察我什么?
如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端),先把前置工作给做好,后面才能进行测试
阅读量: 790标签: 渲染
前端 4 种渲染技术的计算机理论基础
前端可用的渲染技术有 html + css、canvas、svg、webgl,我们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和联系,它们和图形学有什么关系呢?
阅读量: 1.2k标签: 渲染
回流(reflow)与重绘(repaint)
首先我们要了解浏览器的渲染过程:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM树,将 DOM树 和 CSSOM树结合,生成渲染树(Render Tree),渲染树的每个元素包含的内容都是计算过的,它被称之为布局(layout)
阅读量: 1.8k标签: 渲染
SSR服务端渲染
SSR 是Server Side Render简称;就是在服务端进行渲染生成HTML文件,浏览器世界显示生成HTML文件, 补充:我们传统使用的属于CSR是Client Side Render,页面上的内容是我们加载的js文件渲染出来的,文件运行在浏览器上面。
阅读量: 1.5k标签: 渲染
dom渲染流程
在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。
阅读量: 2.3k标签: 渲染
Web网页渲染的几种模式
本文主要内容来源于对上文的翻译,图也来源于此,加上了一点平时工作的理解,英语渣、翻译不是很准确,有条件的可以直接阅读上文链接。本文主要是自己在阅读时做的笔记,供自己以后查看。
阅读量: 3.1k标签: 渲染
让页面更早的渲染:使用 preload 提升资源加载优先级
preload 是一个新的 Web 标准,旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以 script 标签加载资源所带来的性能损耗。
阅读量: 2k标签: 渲染
Flutter 是如何渲染的?
要解答这个问题,首先需要认识到 Flutter 中有三棵树: Widget 树, Element 树和 RenderObject 树。当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget Tree ,同时与 Widget Tree 相对应
阅读量: 2k标签: 渲染
从浏览器渲染过程看重绘回流
浏览器渲染过程如下:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树。将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)。Layout(回流): 根据生成的渲染树,进行回流(Layout)
阅读量: 2.4k标签: 渲染