- 综合排序
- 最热优先
- 最新优先
- 来自专栏CoderStar
iOS 页面渲染 - 离屏渲染
上周介绍了一下iOS 页面渲染-UIView & CALayer，本周我们来聊一聊 iOS 页面渲染中的高频面试题--离屏渲染。 其实给大家先分享关于 iOS 页面渲染的相关知识有一个原因是为后续 iOS 优化系列中的 UI 渲染优化篇做铺垫，方便大家在后面阅读时能够清楚优化手段背后的原理以及有一个更深的理解。 离屏渲染概念 先简单说下 iOS 页面渲染的正常流程。 参考链接 iOS Rendering 渲染全解析（长文干货）[2] 关于 iOS 离屏渲染的深入研究[3] iOS 界面渲染与优化(四) - 离屏渲染与优化总结[4] iOS 圆角的离屏渲染，你真的弄明白了吗 （长文干货）: https://juejin.cn/post/6844904162765832206#heading-17 [3]关于 iOS 离屏渲染的深入研究: https://zhuanlan.zhihu.com
2.7K30编辑于 2022-08-24 - 来自专栏腾讯社交用户体验设计
如何在页面极速渲染3D模型
本文将从模型网格和贴图文件两方面分析，介绍几种通过技术角度优化加载速度和提高渲染性能的途径，在保证 3D 模型不减面，贴图不缩小的情况下，将模型精致地还原在 H5 或其他应用程序中。 将模型导出为 glTF 格式 glTF 介绍 glTF 称为“ 3D 界的 JPEG”，使用了更优的数据结构，为应用程序实时渲染而生。 glTF 有以下几大特点： - 由现有 OpenGL 的维护组织 Khronos 推出，目的就是为了统一用于应用程序渲染的 3D 格式，更适用于基于 OpenGL 的引擎； - 减少了 3D 格式中除了与渲染无关的冗余信息 ，最小化 3D 文件资源； - 优化了应用程序读取效率和和减少渲染模型的运行时间； - 支持 3D 模型几何体、材质、动画及场景、摄影机等信息。 下面介绍如何优化用于应用程序渲染的贴图文件。 1.
9.7K32发布于 2019-12-12 - 来自专栏CoderStar
iOS 页面渲染 - 流程
作为一名专业的 iOS 页面仔，画 UI 是我们的家常便饭，那不知道你在开发过程中有没有思考过这样一些问题： App 静止不动时，页面是否还进行刷新？ 页面渲染和 RunLoop 之间是什么关系？ 系列文章还有: iOS页面渲染-UIView & CALayer iOS页面渲染-离屏渲染 图形渲染框架 我们先来了解一下 UI 渲染的相关框架，不能对一些名词傻傻分不清。 整个图形渲染过程是 CPU 与 GPU 共同处理的结果，不管是哪部分卡顿，都会造成最终的掉帧 Core Animation Pipeline 同系列文章 iOS 页面渲染-UIView & CALayer 同系列文章还有 iOS 页面渲染-离屏渲染 。 我们知道了 CALayer 成像的过程， 那么它是如何调用 GPU 并显示可视化内容的呢？ 谈 UIKit 和 CoreAnimation 在 iOS 渲染中的角色（上） 谈 UIKit 和 CoreAnimation 在 iOS 渲染中的角色（下） 计算机那些事(8)——图形图像渲染原理[3
2.7K20编辑于 2022-09-23 - 来自专栏星回的实验室
使用Headless Browser渲染页面
综上所述，一个神奇的解决方案——在后端渲染页面，就这么诞生了。 1. 敲定方案 在后端渲染页面，自己重新写个渲染引擎显然是不必要的，此时Headless Browser的概念开始进入我的视野。 抽象数据结构 有了Headless Browser后，我们需要得到页面的数据源来渲染页面，也就是为了得到和浏览器上显示一模一样的图片，后端必须拿到该页面所有的html、js、css代码。 乍一看好像很麻烦，不过我们转念一想，我们需要渲染的也就只有画布这一个页面，那么我们参考前端的模板技术，定义好header、footer以及所有的js和css引用，把它们都放在服务器，到时候前端只需要把画布中的代码传过来不就好了吗 构建渲染模板 定义好数据结构之后，后台需要根据这些定义以及前端传输过来的上述元素实例来重新拼装出画布。为了达到这个目的，我们首先需要在服务器端建立一个用来渲染页面的模板。 随后，我们准备调用phantomjs的ScreenCapture方法，它的原理是在本地调起Webkit内核渲染指定页面，然后根据参数截取屏幕显示内容，生成图片。
2K20发布于 2018-08-02 - 来自专栏程序员爱酸奶
二、Vue 页面渲染过程
我也是刚刚接触，所以就会有这样的困惑，所以这篇就简单的理解一下项目页面渲染的过程。 渲染过程 我们上篇文章说main.js 是无用的，是废代码，只是起到支撑框架的。 可以看到template 渲染的是id 为app 的盒子(div)。这里应该是覆盖了index.html中的d 也为app 的盒子。 所有的 router-view 中的内容，都会被自动替换。 实例化一个vue,然后渲染APP.vue 文件内容，我们自己写的vue 组件则是通过路由转接到父组件下的。 番外 我们项目的流程就讲到这里把，算是对上篇的补充，让我们对项目启动，界面渲染算是有一个大概的了解啦，我们接下来就按照官网上讲一下vue 的一些语法和特性，但是与官网上不同的是，官网上都是一个个的html
1.7K10发布于 2020-02-29 - 来自专栏大大的小蜗牛
Memos API 调用渲染页面
Memos 简介系列 Memos 简介 Memos 手动导入数据 Memos API 调用渲染页面 Memos API 公告样式滚动效果 Memos API 获取总条数 *更新：已把 Memos 剥离出一个完整的应用 *HUGO：如果使用的是 Hugo 博客框架，可以参考本站的方法：layouts/_default/memos.html TL,DR 本文介绍如何调用 Memos API 渲染嘀咕、微语、说说类的静态页面 DEMO1 嘀咕：https://eallion.com/memos DEMO2 示例：https://memos.top 教程：博客独立页面调用 Memos 的方法 注：现阶段只能展示 PUBLIC 大多数网站只需要在新建页面中加入这一句就可以了。 核心代码：
完整 HTML 示例： <!4.5K30编辑于 2023-03-07 - 来自专栏CoderStar
iOS 页面渲染 - UIView & CALayer
页面渲染流程 那么为什么 CALayer 可以呈现可视化内容呢？ 因为 CALayer 基本等同于一个 纹理。纹理是 GPU 进行图像渲染的重要依据。 那么绘制页面也有两种方式： 一种是 手动绘制； 一种是 使用图片。 下图为异步绘制的时序图： 异步绘制 具体的异步绘制的代码示例可查看第三方库开源库YYAsyncLayer[3]。 frame、bounds 等属性 先说几个我们常见的结构，方便后续理解。 最后 说不引申，但是写起来篇幅还是挺多的，没办法，因为有些知识点是串在一起的，不展开的话可能不好理解的透彻，先说这么多吧，iOS 页面渲染这块还有很多东西，比如离屏渲染、渲染优化等，这些后面再单独说吧 TP40004514-CH2-SW12 [2]Understanding UIKit Rendering: https://developer.apple.com/videos/play/wwdc2011/121/ [3]
2.9K20编辑于 2022-08-24 - 来自专栏逮虾户
Android 统计页面渲染时长
文章开头还是先抛出几个小小的问题，大家在开发的时候有没有考虑过一个问题，onCreate方法执行完了是不是页面已经完全打开了呢？为什么呢？ 什么是页面渲染时长？ 我们先聊聊页面渲染时长的定义。 简单的说，我们把一个页面从创建到渲染完成出现第一帧作为一个页面的渲染时间，当然这个也不能作为完全的参考，毕竟复杂的商业应用都涉及到接口相关的，所以第一帧并不代表完全可用。 那么其实我们也可以理解当View能获取到宽高的时候就是我们第一帧绘制完的时间了，那么我们完全可以给在Activity的onWindowFocusChanged方法被触发的时候就是代表了页面渲染完成了。 为什么要统计整个渲染时长。 由于生命周期和绘制等都是执行在安卓主线程上的。如果我们在onCreate或者onResume中执行了一些耗时操作，就会导致页面的整体渲染时间就会被延迟。 常见的出现在有滑动或者动画的页面。 那么如何去改进渲染过慢的问题呢？ 其实我们完全可以基于BlockCanaryEx去定位卡顿问题。说起来这个库的原理还是很巧妙的。
4.9K22发布于 2020-10-15 - 来自专栏九彩拼盘的叨叨叨
第 004 期 提高页面渲染速度的 3 个 CSS 技巧
提到提高页面渲染速度，我们第一想到的是优化 JavaScript。其实通过优化 CSS 也能提高页面渲染速度。 优化方案 1. 延时渲染屏幕外的内容 - content-visibility: auto 很长的页面会有大量的内容在屏幕外。如果只渲染屏幕内的内容，屏幕外的内容在出现时才渲染，能大大的节约渲染时间。 3. 让滚动更流畅 - scroll-behavior 设置 scroll-behavior 能让滚动更流畅。 q-header-list=&q-url-param-list=&q-signature=a720df0538c9b575917e020ea8e597c072746a98] 参考文档 使用CSS就可以提高页面渲染速度的 4个技巧 仅使用CSS提高页面渲染速度 MDN：will-change
95901发布于 2021-04-02 - 来自专栏AI
小程序页面的渲染机制
}})在上面的代码中，{{message}} 将数据模型中的 message 绑定到页面中的 text 元素。当 message 发生变化时，页面会自动重新渲染。3. 3. 性能优化：减少不必要的样式变更与 WXML 渲染类似，频繁的样式变更也会导致页面重新渲染。 五、数据绑定与页面更新小程序的数据绑定和页面更新是其渲染机制的核心。通过数据绑定，页面和数据模型保持同步，数据更新时页面会自动重新渲染。1. ;3. 性能优化：批量更新数据setData 会触发页面的重新渲染，因此每次调用 setData 时，渲染引擎都会计算变化并更新视图。 地址：深入浅出微信小程序渲染机制 《微信小程序页面渲染优化技巧》 本文介绍了小程序页面渲染的常见优化技巧，包括页面布局、节点管理等方面的优化。
95210编辑于 2025-01-28 - 来自专栏python3
Splash抓取javaScript动态渲染页面
一、概述 Splash是一个javascript渲染服务。它是一个带有HTTP API的轻量级Web浏览器，使用Twisted和QT5在Python 3中实现。 一些Splash功能： 并行处理多个网页 获取HTML源代码或截取屏幕截图 关闭图像或使用Adblock Plus规则使渲染更快 在页面上下文中执行自定义JavaScript 可通过Lua脚本来控制页面的渲染过程 问题分析 scrapy爬虫框架没有提供页面js渲染服务，所以我们获取不到信息，所以我们需要一个渲染引擎来为我们提供渲染服务---这就是Splash渲染引擎（大侠出场了） 1、Splash渲染引擎简介： Splash是为Scrapy爬虫框架提供渲染javascript代码的引擎，它有如下功能：（摘自维基百科） （1）为用户返回渲染好的html页面 （2）并发渲染多个页面 （3）关闭图片加载，加速渲染 （ Client----相当于1 /Splash---相当于2 /Web server---相当于3 即：我们将下载请求告诉Splash ，然后Splash帮我们去下载并渲染页面，最后将渲染好的页面返回给我们
4.1K30发布于 2020-10-26 - 来自专栏ahzoo.cn的博客分享
Hexo跳过渲染添加独立页面
单个界面 在md文章Front-matter中添加layout: false，或者直接在html文件中添加---layout: false--- 多个页面 在hexo配置文件中修改 跳过文件： skip_render : - '1.html' - '2.html' - '3.html' 支持正则： skip_render: '*.html' 跳过文件夹： 跳过该文件夹下所有文件： skip_render: - '1/*' - '2/*' - '3/*' 跳过该文件夹下包括子文件夹在内所有文件 skip_render: - '1/**' - '2/**' - '3/**' 可直接将文件放至
87310编辑于 2022-08-01 - 来自专栏日积月累1024
yii外部action中如何渲染页面
yii的controller中支持调用外部的action类（见《在controller中使用外部的action》） 但最近工作时碰到这样一个问题，外部action类如何渲染页面（render）呢 数据处理 …… $this->render('worktime.php', $data); } } 目的很简单，就是处理数据后，想用得到的$data数据填充页面
1K10发布于 2020-12-07 - 来自专栏人生代码
Vue 3 条件渲染
条件渲染 实验介绍 可以使用条件判断的方式来分别渲染。 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 最终的渲染结果将不包含 <template> 元素。 我们可以得出结论，v-if 如果给定的值不为 true，DOM 元素不会渲染出来，而 v-show 给定的值如果不为true，实际上是在样式上加了 display: none 影藏了而已，实际上是渲染出来的 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
1.5K20发布于 2020-11-03 - 来自专栏人生代码
Vue 3 列表渲染
列表渲染 实验介绍 列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。 key 属性 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是「只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出」。
1.9K10发布于 2020-11-03 - 来自专栏技术社区
小程序解析html渲染在页面上
下面是具体的使用步骤 1.在app.wxss全局样式文件中，需要引入wxParse的样式表 @import "/page/wxParse/wxParse.wxss"; 2.在需要加载html内容的页面对应的 /wxParse/wxParse.js'); 3.通过调用WxParse.wxParse方法来设置html内容 // WxParse.wxParse(bindName , type, data, target ,imagePadding) // 1.bindName绑定的数据名(必填) // 2.type可以为html或者md(必填) // 3.data为传入的具体数据(必填) // 4.target为Page ].post; WxParse.wxParse('article', 'html', article, that,5); } }) } }) 4.在页面中引用模板
1.9K20编辑于 2022-06-16 - 来自专栏编程微刊
Vue框架Element UI教程-页面渲染（八）
写了那么多，最终的数据都是要展示在前端的界面，才算是完成工作。 Element UI手册：https://cloud.tencent.com/developer/doc/1270 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element
32600编辑于 2025-05-18 - 来自专栏程序生涯
URL 从输入到页面渲染全流程
前面的话 本文将详细介绍从输入URL到页面加载的全过程 概述 从输入URL到页面加载的主干流程如下： 1、浏览器构建HTTP Request请求 2、网络传输 3、服务器构建HTTP Response 响应 4、网络传输 5、浏览器渲染页面 ? （7）RenderLayer有一个Z坐标比自己小的兄弟节点，该节点是一个合成层 最终的渲染流程如下所示： ? 【重绘和回流】 重绘和回流是在页面渲染过程中非常重要的两个概念。 由于HTML使用的是流式布局，如果页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称之为回流 前面介绍过渲染引擎生成的3个树：DOM树、Render 而且table渲染通常要3倍于同等元素时间 此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围；对于一些进行动画的元素，可以进行硬件渲染，从而避免重绘和回流
2.3K10发布于 2020-08-14 - 来自专栏Vue开发社区
如何只使用CSS提升页面渲染速度
本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。 1. 在这种情况下，我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。 我们可以看下面这个页面，包含很多显示不同信息的卡片。虽然屏幕能显示大约 12 个卡片，但列表中有差不多 375 个卡片。如你所见，浏览器花费 1037ms 来渲染这个页面。 一般 HTML 页面 下一步，你可以向所有的卡片中加入content-visibility。 在这个例子中，向页面中加入content-visibility后，渲染时间下降到 150ms。 3. 减少渲染阻塞时间 今天，许多 Web 应用必须满足许多形式因素，包括 PC、平板电脑和移动手机等。为了实现这种响应式特性，我们必须根据媒介大小编写新的样式。
2.3K20编辑于 2022-03-29 - 来自专栏前端逗逗飞
CSS到底会不会阻塞页面渲染
我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同，所以他们的渲染过程也是不一样的。目前主要有两个 webkit渲染过程 ? Gecko渲染过程 ? (渲染树) 根据Render Tree渲染绘制，将像素渲染到屏幕上。 而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。 而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。 [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom [](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom
5.5K40发布于 2021-04-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号