性能优化之关键渲染路径

theme: Chinese-red highlight: a11y-dark 大家好,我是柒八九。 今天,我们来谈谈,浏览器的关键渲染路径。针对浏览器的一些其他文章,我们前面有介绍。分别从浏览器架构和最新的渲染引擎介绍了关于页面渲染的相关概念。对应连接如下。 页面是如何生成的(宏观角度)Chromium 最新渲染引擎—RenderingNGRenderingNG中关键数据结...

如何快速设计一套支持渲染富文本内容的跨端组件, Nginx原理性科普,刚学会Transform,你告诉我就要被移除了| 酱酱的下午茶第 20 期

theme: cyanosis最近鉴于掘友们的热情召唤,我们终于把做了几百期的社群下午茶搬到站内了,酱酱们会一直陪伴,认真创作的掘友们,站内下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 本文字数1800+,阅读时间大约需要 8 分钟。 每日干货|下午茶主理人们会对近期(1-3天)社区深度技术好文进行挖掘和筛选,优质的技术文章...

渲染中的采样:从概率密度到图像处理

表面均匀采样球体球体表面上的点 $(x,y,z)$ 可以通过半径 R ,方位角 $\phi\in [0,2\pi]$ ,天顶角 $\theta\in [0,\pi]$ 来定义。x = \sin{\theta} \cos{\phi}\y = \sin{\theta} \sin{\phi}\z = \cos{\theta}如果只是均匀随机生成方位角 $\phi$ 和 天顶角 $\t...

Vuejs设计与实现 —— 同构渲染

theme: smartblue前言Vue.js 是一个构建客户端应用的框架,组件的代码会在浏览器中运行,然后向页面输出 DOM 元素,也就是我们最常用的方式,即 客户端渲染(client-side rendering,CSR). 实际上 Vue.js 还可以在 Node.js 环境中运行,即可将相同组件渲染成相应的字符串,并发送给浏览器进行渲染,这就是 服务端渲染(serve...

揭秘现代浏览器的渲染引擎(三)

theme: devui-blue highlight: xcode揭秘现代浏览器的渲染引擎(三)声明 1: 声明 2: 渲染树结构体1当构造 DOM 树时,浏览器将会构造另一棵树,渲染树。此树的节点是按照显示顺序排列的可视元素。它是文档的可视化表示,此树的目的就是使内容能够按照正确的顺序绘制。 Firefox 称渲染树中的元素为帧(Frame),Webkit 则使用渲染器...

Vue 文件是如何被转换并渲染到页面的?

以前常常觉得,Vue 文件(单文件组件,Single File Component,SFC)的处理非常复杂,以至于很久一段时间,都不敢接触它,直到我看了 @vite/plugin-vue 的源码,才发现,这个过程并没有多复杂。因为 Vue 已经提供了 SFC 的编译能力,我们只需要站在巨人的肩膀上,简单地组合利用这些能力即可。 本文会用一个极其简单的例子,来说明如何处理一个 V...

渲染引擎的资源加载优化

渲染引擎的资源加载优化 针对一个渲染引擎的性能,最主要的当然是实时渲染的帧率。另一方面,对于轻型的引擎来说,用户不会对场景加载 保有一个较长的加载时间的心理预期,最好是,点击按键,瞬间整个场景出现,毕竟轻量应用场景不是重型游戏。针对 这种需求,我们需要对资源加载做一个全面的性能排查与优化。 Steps 根据《Unix编程艺术》中的描述,性能优化最好是不要优化,如果要优化那么花费...

聊聊 Vue 的双端 diff 算法、移动端渲染原理浅析、数据库主键一定要自增吗?有哪些场景不建议自增? | 年中总结

theme: cyanosis最近鉴于掘友们的热情召唤,我们终于把做了几百期的社群下午茶搬到站内了,酱酱们会一直陪伴,认真创作的掘友们,站内下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 本文字数1700+,阅读时间大约需要 8 分钟。 每日干货|下午茶主理人们会对近期(1-3天)社区深度技术好文进行挖掘和筛选,优质的技术文章...

如何快速设计一套支持渲染富文本内容的跨端组件

背景不知道大家有没有遇到过这种需求,在管理后台配置一段富文本 html 内容,一开始呢,只需要支持渲染到浏览器上面,但随着公司业务的变化,可能需要在小程序上使用,甚至是 ios 或者 android 等其他端上 渲染到 h5 或者类浏览器端(忽略 xss 等安全问题)这种一般就直接使用框架自带的,类似 vue: vue-htmlreact: dangeroushtml 如何渲...

使用 GPU 渲染模式分析工具进行分析

theme: channing-cyan持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情 图像查看 每个竖条都是一次VSync的时间16.6ms,如果竖条宽度变宽且透明则代表超出16.6ms绘制的帧每个Vsync信号来临前都会做工作(Choreographer中的postFrameCallback函数),按照顺序依次处理:INPU...