训练营介绍

性能体系建设训练营第1期「大前端性能优化基础」

“春江水暖鸭先知,产品好坏客户知”作为前端开发,需注重用户体验,产品的好坏决定着用户的体验。但一款产品的好坏又有很多因素,其中性能是决定因素,那怎么优化才能让产品的性能达到优良,让客户体验良好呢? 这就要涉及到「前端性能优化」这个巨大课题了,它没有标准答案,想要面面俱到罗列出来,并非易事,它针对方方面面的资源都有不同的方式。 本课程就带你从实际应用角度出发,结合【理论+实践】讲讲你最关心的前端性能优化问题!

你将获得

全方位了解性能优化最新API

快速debugweb性能问题

更好更快地提升web性能

对性能及内存泄露领域更深了解

入营联系

扫码入营申请入群备注参营
微信其他咨询加小助理

课程大纲

前端性能优化基础
时间2022.04.18 11:00 - 12:00讲师尼禄

①快速了解性能优化发展历程

这一小节带你了解性能优化的历史,帮助你理解性能优化技术的发展,关注技术发展趋势,更好的掌握最新技术

②关于网络请求和缓存

帮你梳理浏览器缓存加载优先级,以及网络对于前端性能的影响

③Web Performance API

帮你梳理最新的web性能统计api,帮助你更好了解web性能优化相关标准

④web vitals和light House

帮助你更好了解影响用户体验的指标和工具

⑤首屏时间和白屏时间

了解白屏时间是如何计算的,以及什么是首屏时间,首屏时间的重要性等

⑥性能监控与数据上报

帮助你了解前端是如何做性能监控的,性能监控的方式有哪些,数据上报的方式有哪些等

Web Performance API入门介绍
时间2022.04.20 11:00 - 12:00讲师白寒

框架类API的介绍

带你了解框架提供的性能优化相关的API、以及使用方式

性能度量具体是什么

带你了解性能度量的规范、以及通过相应的API去度量前端性能

优化策略要怎么做

带你了解性能优化相关的API,以及通过这些API如何在项目中优化前端性能

基于Web Vitals指标的性能优化
时间2022.04.25 12:00 - 13:00讲师尼禄

用户体验指标介绍

这一小节会围绕用户体验具体指标及相关内容,进行详细的课程讲解

TTI和TBT

带你了解TTI的实现原理;什么是TBT,为什么会产生TBT~

如何针对用户指标进行优化

这一小节会围绕优化LCP、优化FCP以及优化FID3个知识点,带你了解用户指标优化如何进行

更多其他优化方式

通过这一小节,带你了解如何使用workerize优化Long Task、Performance分析代码使用率、利用SSR技术加速首屏渲染

Chrome运行时性能瓶颈分析

通过这一小节,你将学会如何使用Chrome开发者工具分析网页性能瓶颈

如何debug web性能问题
时间2022.04.27 12:00 - 13:00讲师尼禄

使用 Chrome Performance 分析性能问题

本小节将详细介绍如何使用Chrome Performance分析工具、分析性能问题

使用React Profiler 分析React渲染性能问题

了解Chrome开发者工具Profiler如何分析渲染性能问题,以帮助改善应用程序卡顿问题

Task Manager的使用

通过这一小节了解到Task Manager具体使用方法

使用Chrome coverage 分析代码覆盖率

通过这一小节了解到如何使用Chrome Coverage分析代码覆盖率,以更好缩减压缩包体积

使用Lighthouse排查性能问题

这一小节会说明Lighthouse 是什么、如何快速上手Lighthouse (使用入门)及Lighthouse中的一些Metrics指标

Memory:如何排查内存泄露

本小节将带你了解如何使用Chrome Memory排查内存泄露问题

性能优化之提升构建效率
时间2022.04.28 12:00 - 13:00讲师和风

课程要点介绍

通过本课程的学习,来帮助你建立完整的构建工具优化思路,进一步优化你的项目构建效率,最大程度消灭那些无谓的等待时间

webpack的完整构建流程

这一小节主要勾画一个Webpack工作流程的轮廓,让你对执行构建命令后的内部流程有一个基本概念

如何为webpack编译阶段提速

整理了Webpack构建中编译模块阶段的构建效率优化方案

如何为webpack打包阶段提速

主要讨论代码优化阶段效率提升的方向和方法

名师介绍

尼禄

React、TypeScript

资深前端开发工程师

尼禄,网名trigkit4,曾就职于RingCentral、imToken,曾负责知名以太坊区块链钱包imToken去中心化交易所web端和RN端研发,现任产研公司资深前端工程师,广泛涉猎各种前沿的前端领域,包括:前端工程化、性能优化、PWA,web3.0等领域,敏捷开发践行者,多年的React开发经验,喜欢钻研技术,擅长分析问题,解决问题。

白寒

前端工程化、性能优化

资深前端开发工程师

白寒,网名songtao,现产研公司资深前端开发工程师,曾就职于爱库存负责直播电商PC、移动端前端搭建,同时针对直播也做过大量的性能优化工作,涉及音视频传输、大数据展示、直播间加载、前端工程化等方面。

和风

性能优化、跨端开发

资深前端开发工程师

和风,网名Ywhoo,现任产研公司资深前端工程师,擅长跨端开发,有大型SPA项目的架构及开发经验;喜欢追寻新技术,同时致力于前端工程化,热衷于编写更优雅的代码,热爱开源与分享。

训练营风采

直播讲解学练一体

高质量直播与讲师面对面实时互动、加深理解;还提供相关作业练习、巩固你的学习成果~

直播讲解学练一体

高质量直播与讲师面对面实时互动、加深理解;还提供相关作业练习、巩固你的学习成果~

讲师在线答疑1V1

本课程中遇到的疑难问题都可在【训练营交流群】内随时提问,讲师将耐心详细解答,更有小伙伴一起交流互动,共同进步

讲师在线答疑1V1

本课程中遇到的疑难问题都可在【训练营交流群】内随时提问,讲师将耐心详细解答,更有小伙伴一起交流互动,共同进步

课程资料0元领取

丰富的教辅资料实时上传更新,讲师课件、直播回放、技术文档等教材完全开放给你,以备你不时之需,随时查看

课程资料0元领取

丰富的教辅资料实时上传更新,讲师课件、直播回放、技术文档等教材完全开放给你,以备你不时之需,随时查看

参营奖励

高价值数码产品

性能优化书籍奖励

个性好礼/极客玩具

社区限量周边

性能体系建设训练营第1期「大前端性能优化基础」

2022年04月18日开启