- 综合排序
- 最热优先
- 最新优先
- 来自专栏Micro_awake web
Vue学习5：条件渲染
DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue6</title> --vue会尽可能高速的渲染元素，通常是复用已有元素--> 20 <! --这样每次切换时，输入框都会被重新渲染--> 35 <template v-if="loginType==='username' "> 36 <label for="um1"> 这里再补充两点： 1.html中的<template>元素是一种保存客户端内容的机制，该内容在页面加载时不被渲染，但是运行时可以使用js实例化。 2.v-if与v-show的区别： v-show只是简单的切换css属性display,元素始终被渲染被保存在DOM中； v-show的切换开销相比v-if小，但是初始渲染开销比v-if大； 因此频繁切换
87130发布于 2018-05-28 - 来自专栏Micro_awake web
Vue学习5：条件渲染
DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue6</title> --vue会尽可能高速的渲染元素，通常是复用已有元素--> 20 <! --这样每次切换时，输入框都会被重新渲染--> 35 <template v-if="loginType==='username' "> 36 <label for="um1"> 这里再补充两点： 1.html中的<template>元素是一种保存客户端内容的机制，该内容在页面加载时不被渲染，但是运行时可以使用js实例化。 2.v-if与v-show的区别： v-show只是简单的切换css属性display,元素始终被渲染被保存在DOM中； v-show的切换开销相比v-if小，但是初始渲染开销比v-if大； 因此频繁切换
64700发布于 2018-07-31 - 来自专栏黄腾霄的博客
2020-5-21-理解React的渲染更新
今天来和大家聊React的渲染更新过程。 ---- React是JavaScript代码 在聊渲染更新之前，我们不能忽视的一个概念是——React是JavaScript代码。 从虚拟DOM到DOM 渲染是一个“重”操作 React将我们从复杂的HTML的DOM节点操作中解放出来。 但是浏览器终究只能解析渲染真实的HTML元素，而不是jsx定义的语法糖。 这颗“React 树”的结构在大部分情况下和实际渲染后的DOM树结构是一模一样的。 我们可以看到React的整个渲染更新过程，只有在一个虚拟DOM树上进行更新。 （注意：React.PureComponent还是有一些使用前提的，这里暂时不展开，大家可以去看官网文档） 小结 这次我们探索了React的渲染和更新机制，发现了以下几点： React通过js控制渲染
1K50发布于 2020-06-10 - 来自专栏phpcoders
thinkphp5学习路程 四 模板调用及视图渲染
继承 \think\Controller 类 以下类可以直接使用 fetch 渲染模板输出 display 渲染内容输入 assign 然后再新建对应的控制器名的文件夹，如下面的Hello文件夹，其中Hello.php中的一个方法比如 muban() 这个方法，与之对应的就是view/Hello下的muban.html文件，然后模板渲染默认指定就是这个 当然，如果你将模板渲染改为 return $this->fetch('a'); 那么就会渲染a.html文件了
78710发布于 2021-03-16 - 来自专栏达达前端
列表渲染与条件渲染
file 作者 | Jeskson 来源 | 达达前端小酒馆 列表渲染与条件渲染 如何渲染数组类型和对象类型的数据 渲染数组⾥的所有数据 相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据， [ "幸咖啡", "腾：年", "总投资20亿元", "京数量同⽐增⻓163%", "腾超五千万", ], } 如何把整个列表都渲染出来呢 <view class="weui-cell__hd"> <image src="{{listicons.icon}}" style="margin-right: <em>5</em>px
2.1K20发布于 2019-11-29 - 来自专栏玩转Lighthouse
【5分钟玩转Lighthouse】爬取JavaScript动态渲染页面
一.简介读过我上篇教程(【Lighthouse教程】scrapy爬虫初探)的同学,应该已经对如何编写爬虫有了一定的认识.但是对于较为复杂的网站设计，比如网站页面使用了JavaScript动态渲染，入门级的爬虫就不太适用了 本文针对JavaScript动态渲染页面，使用selenium+scrapy,爬取levels.fyi中微软公司员工的信息和薪酬(示例页面点击这里)，目的在于讲述JavaScript页面如何进行爬取。 在这里，我们设置超时时间为5秒：wait = WebDriverWait(self.driver, 5)wait.until( lambda driver: driver.find_element_by_xpath
5K176103编辑于 2022-10-25 - 来自专栏韩曙亮的移动开发专栏
【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一、LinearGradient 线性渐变渲染 1、设置 2 个颜色的渐变 3、设置多个颜色的渐变 二、LinearGradient 线性渐变渲染重要参数分析 1、正常渲染 2、设置多个渐变颜色渲染 3、设置渲染方向 4、设置 Shader.TileMode.MIRROR 渲染模式 5、设置 Shader.TileMode.REPEAT 渲染模式 三、代码示例 1、正常渲染 2、设置多个渐变颜色渲染 3、设置渲染方向 4、设置 Shader.TileMode.MIRROR 渲染模式 5、设置 Shader.TileMode.REPEAT 渲染模式 四、效果展示 一、LinearGradient 线性渐变渲染 new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.MIRROR)); } 效果图 : 5、 { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); } } 5、
4.7K20编辑于 2023-03-30 - 来自专栏壹种念头
Epic的UE5如何支持数十亿面的模型渲染？
首先官方的宣传片里提到的支持数十亿面模型渲染的方法是Nanite虚拟多边形系统。这事估计得先从显卡架构升级说起。 1 什么是图灵显卡？ 也就是这次UE5能够支持超多三角面的底层原理。（猜的） 2 图灵显卡上的mesh shader 最早的渲染管线属于硬件管线，随着软硬件的发展变为可编程管线。
3.4K30发布于 2020-07-10 - 来自专栏Cellinlab's Blog
React 设计模式 0x5：服务端渲染 SSR
学习如何轻松构建可伸缩的 React 应用程序：服务端渲染 SSR # 什么是 SSR SSR（Server-Side Rendering，服务器端渲染）是指将 React、Vue、Angular 等客户端渲染的应用在服务器端执行一次 ，然后将渲染结果返回给浏览器进行展示的过程。 等）和页面数据一起返回给客户端，从而减少客户端的渲染工作量。 # 为什么使用 SSR 并不是每个应用程序都需要使用服务器端渲染。 预渲染有两种类型，即： 静态生成（Static Generation） 服务器端渲染（Server-side Rendering） # 静态生成 在构建时生成 HTML 页面，这些页面将在每个请求上重用
6K10编辑于 2023-05-17 - 来自专栏小黑娃Henry
CoreAnimation 渲染流程CoreAnimation 渲染流程
Core Animation 渲染流程 阅读时间3-5分钟 前言 依旧老规矩带着问题来阅读 CoreAnimation 的职责是什么？ 流程图 ? 来得到位图（bitmap） 但是有一个例外：drawRect:如果开发者重写了这个方法就会在CPU中将layer通过Core Graphics直接处理成bitmap,就不会在通过GPU来完成bitmap的渲染 ，这里就涉及到一个概念：离屏渲染 Prepare 图片解码和转换 Commit 将处理好的图层打包发送给Decode Decode 打包好的图层被传输到 Render Server 之后，首先会进行解码 Draw Calls 解码完成后，Core Animation 会调用下层渲染框架（比如 OpenGL 或者 Metal）的方法进行顶点着色器、图元装配、光栅化、片元着色器、混合等渲染工作，进而调用到 Render 这一阶段主要由 GPU 进行渲染。 Display 显示阶段，需要等 render 结束的下一个 RunLoop 触发显示。 更多和渲染有关的可以查看： iOS 渲染原理解析
2.1K10发布于 2021-08-09 - 来自专栏CoderStar
iOS 页面渲染 - 离屏渲染
上周介绍了一下iOS 页面渲染-UIView & CALayer，本周我们来聊一聊 iOS 页面渲染中的高频面试题--离屏渲染。 离屏渲染概念 先简单说下 iOS 页面渲染的正常流程。 一旦需要离屏渲染的内容过多，很容易造成掉帧的问题。所以大部分情况下，我们都应该尽量避免离屏渲染。 离屏渲染存在的原因 既然离屏渲染对性能有损伤，那为什么还要使用离屏渲染呢？ [5] 参考资料 [1]苹果工程师说法: https://lobste.rs/s/ckm4uw/performance_minded_take_on_ios_design#c_itdkfh [2]iOS [5]iOS 圆角的离屏渲染，你真的弄明白了吗: https://juejin.cn/post/6846687603316490254#heading-2
2.6K30编辑于 2022-08-24 - 来自专栏全栈程序员必看
图形渲染管线简介_渲染流水线和渲染管线
大家好，又见面了，我是你们的朋友全栈君 The Graphics Rendering Pipeline 渲染管线，这章主要讲光栅化渲染管线。 毕业前实习时，也实现过一个简单的软光栅化渲染管线，再复习一下。 图形渲染管线的主要功能是根据给定的虚拟相机、三维物体和光源等，生成(或渲染)一个二维图像。 2.1 架构 一条渲染管线由几个阶段(stages)组成，每个阶段完成一个大的任务。 你的球可能在5米远处看起来挺好的，但是一旦靠近，就会看到一个个三角形。如果你使用更多的三角形来提高球的渲染质量，当球离相机远只覆盖屏幕上一点点像素的时候，你可能会浪费相当大的处理时间和内存。 总结 这里讲的渲染管线是数十年来面向实时渲染应用程序的API和图形硬件发展演变的结果。需要注意的是它不是唯一的渲染管线。离线渲染(offline rendering)管线有不同的发展路径。
2K40编辑于 2022-09-21 - 来自专栏零域Blog
Vue 服务端渲染 or 预渲染
js 渲染页面不同。 为什么使用服务端渲染 更好的 SEO 更快的内容到达时间 服务端渲染 or 预渲染 就像官网所说的，如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染，一个典型的预渲染使用场景可能类似这个网站。 区别 服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式，比如说这个网站。 如何使用预渲染 预渲染的核心是使用 prerender-spa-plugin，如何使用它呢？
2.1K20编辑于 2022-03-26 - 来自专栏Unity游戏开发
游戏渲染
DrawCall 由CPU收集美术的资源信息，传递给GPU，通知GPU进行一次渲染过程叫DrawCall OpenGl 渲染流程 cpu : FBX->Meshrender FBX obj : 模型文件 ，包含UV、顶点位置、法线切线等渲染信息 MeshRender ： 将信息传给GPU Meshfilter ： 将那个模型信息传给GPU gpu: 顶点着色器->光栅化->片元着色器->alpha 将顶点转换为像素 片元着色器： 图片处理 纹理处理（Filter Mode）： Point：就近采样 Bilinear：线型采样 Trilinear：三线性采样 批处理： 相同的材质，合并起来进行一次渲染 3.在UIPanel中lateUpdate逐帧渲染，调用UpdateSelf渲染每一个UIWiget 4.UIWiget调用FillAllDrawCalls，SortWidgets对所有子物体按深度、
1.5K20发布于 2019-05-29 - 来自专栏陶然同学博客
【小程序】条件渲染与列表渲染
目录 条件渲染 1. wx:if 2. 结合 使用 wx:if 3. hidden 4. wx:if 与 hidden 的对比 列表渲染 1. wx:for 2. 手动指定索引和当前项的变量名* 3. wx:key 的使用 条件渲染 1. wx:if 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块： 也可以用 wx:elif block></block> 标签将多个组件包装起 来，并在<block> 标签上使用 wx:if 控制属性，示例如下： 注意： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染 1. wx:for 通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下： 默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一 的 key 值，从而提高渲染的效率，示例代码如下：
1.5K20编辑于 2023-02-24 - 来自专栏各类技术文章~
Metal 框架之渲染管线渲染图元
本示例将介绍如何配置渲染管道，作为渲染通道的一部分，在视图中绘制一个简单的 2D 彩色三角形。该示例为每个顶点提供位置和颜色，渲染管道使用该数据，在指定的顶点颜色之间插入颜色值来渲染三角形。 在本示例中，将介绍如何编写顶点和片元函数、如何创建渲染管道状态对象，以及最后对绘图命令进行编码。 理解 Metal 渲染管线 渲染管线处理绘图命令并将数据写入渲染通道的目标中。 渲染管线状态必须使用与渲染通道指定的像素格式兼容的像素格式才能够正确渲染，由于此示例只有一个渲染目标并且它由视图提供，因此将视图的像素格式复制到渲染管道描述符中。 设置视口 有了管道的渲染管道状态对象后，就可以使用渲染命令编码器来渲染三角形了。首先，需要设置视口来告诉 Metal 要绘制到渲染目标的哪个部分。 为渲染管线指定渲染管线状态对象。
3K00发布于 2021-11-21 - 来自专栏webpack@4.46.0源码分析
5. 「vue@2.6.11 源码分析」组件渲染之创建虚拟DOM
vue2中组件渲染的核心入口如下： // src/core/instance/lifecycle.js export function mountComponent (vm: Component, el 获取组件名称，创建组件标签对应的vnode(new vnode)，这里重点是保存了组件的数据（事件、属性数据等），因为在后面_update会深入组件内部，进入组件的渲染，而组件的渲染是需要这些数据支撑的
1.2K20编辑于 2023-02-24 - 来自专栏吴裕超
浅析前端渲染与服务端渲染
背景知识： 「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制； 「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用； 「同构渲染」指前后端共用 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 渲染性能：服务端性能比客户端高，渲染速度快( 猜测，该项数据不详 )。 4. 渲染内容：服务端渲染会把”可视“部分先渲染，然后交给客户端再作部分渲染。 而客户端渲染，则是从无到有，需要经历完整的渲染步骤。
3.6K40发布于 2018-02-28 - 来自专栏大史住在大前端
高性能Web动画和渲染原理系列（2）——渲染管线和CPU渲染
像素渲染管线 基本渲染流程 谈起浏览器的工作流程，你可能会在大多数文章中见过下面这张图： ? 旧软件渲染 现代浏览器多采用软硬件混合渲染的方式来处理，软件渲染的方式通常也被成为“旧软件渲染”（与之相对应的是硬件加速渲染），“旧”只是出现时间比较早，并不表示它已经被硬件渲染所取代。 最初的网页并不是作为完整的应用存在的，而只是用来做一些信息展示，二维渲染的场景居多（因为页面上大多都是基于“盒模型”的矩形区域和文字包围盒的计算和绘制），这时使用CPU渲染的性能并不低，“旧软件渲染”通常使用底层的二维图形绘制库 分层绘制 单幅位图像素缓存的劣势其实已经很明显了，下面再来看看分层的情况，假如上述画面中的对象分别绘制在不同的canvas画布上，那么一共就需要5个canvas元素，由于画布是透明底色的，所以最终显示结果是叠加而成的 层的合并 显示器上最终呈现的是一幅位图画面，所以即使在上面的示例中使用了5个分布在不同层次的canvas标签，实际上计算机在处理时仍然会对各层的像素数据按层进行合并计算。
1.9K30发布于 2019-10-21 - 来自专栏韩曙亮的移动开发专栏
【OpenHarmony】ArkTS 语法基础 ④ ( ArkTS UI 渲染控制 | if else 条件渲染 | ForEach 循环渲染 )
参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、ArkTS UI 渲染控制 1、if else 条件渲染 在 @Component 自定义组件 中的 build 函数中 , 可以 使用 if else 条件控制语句 , 控制 UI 渲染 , 根据不同的条件 为 同一个 UI 组件 动态设置不同的 渲染样式 ; 在下面的代码中 , 根据 自定义组件 的 this.num1 成员变量的值 { Column({ space: 20 }) { // 设置子组件间距为10 // 条件渲染 使用 if else 进行渲染 // 根据不同的条件 动态控制组件显示 ArkTS 提供了 ForEach 语句 , 进行循环渲染 ; 在 UI 渲染函数 build 函数中 , 调用 ForEach 函数 , 进行循环渲染 , 可以根据一个数组数据源 , 执行循环操作 , 如果生成的 键值相同 , 则后面键值相同的组件不会被添加到 UI 布局中 ; 循环渲染示例代码 : // 循环渲染数据源 numArr: number[] = [9527, 2024, 911
1.2K10编辑于 2024-06-05
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号