关于此课程

性能对于用户至关重要。Web 开发人员需要构建能够快速反应和流畅渲染的应用。

Google 的性能大牛 Paul Lewis 将在此帮助你消除卡顿,创建保持 60 帧/秒性能的 Web 应用。

完成此课程后,你将能够配置应用及确定卡顿原因。你将探索浏览器的渲染管线,发现构建高性能应用的模式。此课程提供中文版本。

喜欢这门课程?你可以继续学习“前端开发工程师”纳米学位!

学费
免费
学习时间
大约 1 MONTHS
难度
高级
你将获得

Rich Learning Content

Interactive Quizzes

Taught by Industry Pros

Self-Paced Learning

Student Support Community

开始你的旅程

学习这门免费课程,迈出通往前端开发(进阶)职业道路的第一步。

免费课程

浏览器渲染优化(中/英)

合作企业 Google

通过创新性的自主学习方式,掌握新技能,提升竞争力。

Icon steps 54aa753742d05d598baf005f2bb1b5bb6339a7d544b84089a1eee6acd5a8543d
 
 

课程讲师

Cameron Pittman
Cameron Pittman

优达学城讲师,高级内容策划

Paul Lewis
Paul Lewis

讲师

你将学到什么

lesson 1

The Critical Rendering Path

  • Introduction to the course with Paul Lewis.
  • Learn how the browser turns HTML into pixels on the page
  • See how different CSS styles affect the rendering pipeline differently.
lesson 2

App Lifecycles

  • How to recognize the four distinct phases in an app's lifecycle: Response, Animation, Idle and Load (RAIL).
  • How your frame budget changes depending on where the user is in RAIL.
  • Practice thinking through app workloads at different stages in RAIL.
lesson 3

Weapons of Jank Destruction

  • How to make sense of the Timeline panel in Chrome DevTools.
  • Practice profiling a few different apps to find the source of jank.
lesson 4

JavaScript

  • How to optimize JavaScript to hit 60fps during animations.
  • How to move expensive JavaScript operations off the main thread and into Web Workers.
  • How to debug a janky copy of a production quality app - the QR Snapper.
lesson 5

Styles and Layout

  • Learn how accessing the wrong CSS properties can create loads of extra work for the browser.
  • Learn how to debug multiple instances of Forced Synchronous Layout.
lesson 6

Compositing and Painting

  • Practice profiling layer and paint performance with the paint profiler tool in the DevTools Timeline.
  • Learn how to optimize layers to reduce the number of steps the browser needs to take to render each frame.
  • Demonstrate everything you've learned about performance as you de-jankify the News Aggregator App!

先修知识及要求

  • 你是一名 Web 开发人员,有使用 HTML、CSS 和 JavaScript 编写应用的经验。
  • 你使用过 Chrome 开发者工具
  • (建议) 拥有关键渲染路径的背景知识将有所帮助。请见我们的 网站性能优化课程。

查看使用优达学城的技术要求

为什么学习这门课程?

了解浏览器的渲染管线,可以让你构建出更高性能的 Web 应用。只需要遵循几个简单的原则,你便能够在很大程度上减少浏览器的工作负载和渲染每个帧所需的时间。

首先,你将了解渲染管线的每个步骤,从解析 HTML 开始到在屏幕上绘制像素为止。然后你将迅速进入工具使用,届时将有充足的机会练习使用 Chrome 开发者工具分析和调试应用。

最终项目会使用 Hacker News API,让你有机会展示和发挥所学,将一个体验糟糕应用变为高性能 Web 应用!

我将获得什么?
Instructor videos Learn by doing exercises Taught by industry professionals