写点什么

0.3 秒完成渲染!信息流内容页“闪开”优化总结和思考

  • 2019-08-12
  • 本文字数:482 字

    阅读完需:约 2 分钟

0.3 秒完成渲染!信息流内容页“闪开”优化总结和思考

GMTC 北京2019大会上,来自阿里巴巴的庞锦贵讲师做了《0.3 秒完成渲染!信息流内容页“闪开”优化总结和思考》主题演讲,主要内容如下。


演讲简介:


“闪开”,即用户一点即开,用 Web 技术来实现和 Native 一致的页面加载体验。本演讲将通过从浏览器内核到客户端外壳、从服务端到前端等多端协作下所实现的日均 N 亿级 PV 页面“闪开”体验所采用的优化策略,及其背后技术策略的思考和选择。


通过重新理解和定义前端页面的渲染处理,分析常见的前端性能优化方案(如 PWA 或 SSR 等)所存在不足,并通过信息流场景的内容消费页面的深度优化案例,讲解如何通过 Web 技术来实现 100%消除页面白屏而实现“闪开”的。


讲师介绍:


庞锦贵


阿里巴巴前端技术专家


现就职于阿里巴巴移动事业部,UC 国内信息流前端负责人。有丰富的性能优化、工程化、架构设计经验,UC 移动技术核心决策成员。参与了 Scrat3 架构建设,主导并推动了 UCWeex Rax 和 UCWeex Vue 体系的标准化建设;开发并落地了 UC 新一代大前端工程框架——UFX,主导了 UC 离线缓存框架——U-cache 的设计和开发。












完整演讲 PPT 下载链接:


https://gmtc.infoq.cn/2019/beijing/schedule


2019-08-12 12:591233

评论

发布
暂无评论
  • vue 项目性能优化 - 前端加分项

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目

    2022-09-30

  • 深入 React 源码揭开渲染更新流程的面纱

    转前端一年半了,平时接触最多的框架就是React。在熟悉了其用法之后,避免不了想深入了解其实现原理,网上相关源码分析的文章挺多的,但是总感觉不如自己阅读理解来得深刻。于是话了几个周末去了解了一下常用的流程。也是通过这篇文章将自己的个人理解分享出

    2022-12-14

  • 07|路由设计:如何借助 Vue Router 设计出更合理的路由?

    路由的配置管理在Vue框架开发中非常重要,是我们完成后续各功能模块开发的前提。

    2023-05-08

  • FFA 2022 主会场 Keynote:Flink Towards Streaming Data Warehouse

    Apache Flink 中文社区发起人、阿里巴巴开源大数据平台负责人王峰(莫问)在 FFA 2022 主会场的分享。

    2022-12-25

  • 29|前台页面的渲染方式:如何设计前台页面的渲染策略?

    技术的成长,就是要依靠长期的“技术储备”和“技术实践”。当你遇到任何技术问题,都能想到使用以前学过的“技术点”,并且比以前更加得心应手地设计技术方案,实现技术功能。那么恭喜你,你的技术已经得到成长了。

    2023-02-15

  • 26|页面编译和运行:如何设计 Vue.js 搭建页面的渲染策略?

    页面编译,基于页面布局数据,动态编译出页面完整的JavaScript和CSS的Bundle文件,减少HTTP文件请求,提升用户体验。页面运行,核心就是要设计页面的渲染策略,保证页面功能的可用性和稳定性。

    2023-02-08

  • 30|前台页面的性能优化:如何实现前台页面的性能优化?

    在Vue.js主题中,做前端性能优化有两个要点:优化逻辑能独立插件化、尽可能少修改存量代码。核心就是尽量让优化逻辑能独立化,减少对原有项目的干扰。

    2023-02-17

  • 读懂 React 原理之调和与 Fiber

    Fiber 架构是React16中引入的新概念,目的就是解决大型 React 应用卡顿,React在遍历更新每一个节点的时候都不是用的真实DOM,都是采用虚拟DOM,所以可以理解成fiber就是React的虚拟DOM,更新Fiber的过程叫做调和,每一个fiber都可以作为一个执行单元来处理,

    2022-11-04

  • 3D 渲染动画制作 KeyShot 2023.2 Pro 补丁安装教程

    KeyShot Pro是一款专业级的实时渲染软件,适用于Windows和Mac操作系统。它为用户提供了高质量、逼真的渲染效果,并具有用户友好的界面和强大的功能,使用户能够轻松地创建出令人印象深刻的视觉效果。

    2023-08-27

  • 面试官:说说 React-SSR 的原理

    所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。

    2023-01-03

  • 03|初识 Web:学习 Web 最好的方式是什么?

    想要学习网页前端开发,就需要学习一些前端相关的技术和知识。

    2023-04-28

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2022-10-17

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2022-11-25

  • 从 React 源码角度看 useCallback,useMemo,useContext

    useCallback和useMemo是一样的东西,只是入参有所不同。

    2022-09-30

  • 说说你对 Vue 的 keep-alive 的理解

    在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。

    2023-02-07

  • 32|Fabric:新渲染器的演进之路

    对核心渲染流程的持续迭代和优化,是 React Native 能够广受欢迎的重要原因之一。

    2023-01-01

  • 面试官:说说 React-SSR 的原理

    所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。

    2023-02-20

  • Qt | 实现基于 Qt WebEngine Widgets 的网页浏览器

    Qt实现基于Qt WebEngine Widgets的网页浏览器。

    2022-09-07

  • 深入 React 源码揭开渲染更新流程的面纱

    转前端一年半了,平时接触最多的框架就是React。在熟悉了其用法之后,避免不了想深入了解其实现原理,网上相关源码分析的文章挺多的,但是总感觉不如自己阅读理解来得深刻。于是话了几个周末去了解了一下常用的流程。也是通过这篇文章将自己的个人理解分享出

    2022-12-05

发现更多内容

云安全的第一站:CSPM

HummerCloud

云安全 cspm

一起薅 DevChat 公测的羊毛:国内无需注册就能用上免费的 ChatGPT(gpt-4)

胡说云原生

ChatGPT GPT-4 DevChat

智造零距离:工程师走访华秋深圳 PCB 工厂,观摩高可靠板制造流程

华秋电子

【6.09-6.16】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动 优质创作周报

一篇文章帮你解读所有 TiDB 工具&常见问题解决大全

TiDB 社区干货传送门

搭建TiDB负载均衡环境-HAproxy+KeepAlived实践

TiDB 社区干货传送门

实践案例 管理与运维 数据库架构设计 7.x 实践

探索开源创新理论|2023开放原子全球开源峰会开源创新理论与实践分论坛成功召开

开放原子开源基金会

开源 开放原子全球开源峰会 开放原子 开源创新理论

Java8 Stream 的总体设计和使用

4ye

Java' 6 月 优质更文活动

TiDB v7.1.0版本 相关(部署、在线扩容、数据迁移)测试

TiDB 社区干货传送门

版本测评 新版本/特性发布 扩/缩容 数据库连接 7.x 实践

记一次 Rust 内存泄漏排查之旅 | 经验总结篇

Greptime 格睿科技

rust 时序数据库 内存泄漏 云原生数据库 heap profiling

大佬带你深入理解Spring依赖注入原理:bean的注册及实例化

互联网架构师小马

Spring循环依赖案例分析:三级缓存结构+循环依赖解决方案

互联网架构师小马

搭建TiDB负载均衡环境-LVS+KeepAlived实践

TiDB 社区干货传送门

管理与运维 7.x 实践

Wallys/board with SFP module /ipq8072/ipq6010/ipq4019 / support openwrt

Cindy-wallys

IPQ4019 IPQ6010 IPQ8072 ipq4029

小程序容器技术:数字门户的创新引擎

FinClip

2023年全国高校公益人工智能师资培训营报名正式开启

飞桨PaddlePaddle

人工智能 百度 飞桨

Wise 的平台工程 KPI 探索之旅

SEAL安全

KPI 平台工程

浅谈中移链中插件的功能及使用

BSN研习社

区块链

tiflash引擎的使用小总结

TiDB 社区干货传送门

OLAP 场景实践

河北等保测评公司有哪些?总共有几家?

行云管家

等级保护 等保测评 河北

CST电磁仿真软件对火箭发射场雷击仿真与电子设备结构设计

思茂信息

cst cst仿真软件 abaqus abaqus软件 abaqus有限元仿真

TiDB 7.1 资源管控特性试用

TiDB 社区干货传送门

新版本/特性解读 7.x 实践

【TiDB v7.1.0 荣誉体验官招募】索尼 PS5 、索尼无线降噪耳机、倍轻松颈部按摩器等你拿!

TiDB 社区干货传送门

2023大型企业全面预算管理趋势

用友BIP

全面预算 财务共享

全球异型LED显示屏的市场发展

Dylan

技术 设计 领域 LED显示屏 市场

TiDB Contributor 资料汇总

TiDB 社区干货传送门

软件测试/测试开发丨用户端App自动化测试学习笔记分享

测试人

Python 程序员 软件测试 自动化测试

TiDB v7.1.0 版本 Resource Control体验

TiDB 社区干货传送门

新版本/特性解读 7.x 实践

Java8 Stream 的核心秘密

4ye

Java' 6 月 优质更文活动

深度学习实践篇[17]:模型压缩技术、模型蒸馏算法:Patient-KD、DistilBERT、DynaBERT、TinyBERT

汀丶人工智能

人工智能 深度学习 知识蒸馏 模型压缩 6 月 优质更文活动

人工智能领域:面试常见问题超全(深度学习基础、卷积模型、对抗神经网络、预训练模型、计算机视觉、自然语言处理、推荐系统、模型压缩、强化学习、元学习)

汀丶人工智能

人工智能 自然语言处理 深度学习 计算机视觉 6 月 优质更文活动

0.3 秒完成渲染!信息流内容页“闪开”优化总结和思考_GMTC_庞锦贵_InfoQ精选文章