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

构建 60 FPS Web 应用

高级

大约 1 个月

6小时每周 (自主学习)

由以下企业参与制作:
加入成千上万的全球学员

开始免费课程

加入课程
免费
可享受
课程视频
实战练习与参考项目指导
高级

大约 1 个月

6小时每周 (自主学习)

由以下企业参与制作:
加入成千上万的全球学员
观看浏览器渲染优化(中/英)课程介绍
观看视频

课程概述

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

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

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

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

为什么学习这门课程?

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

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

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

先修要求

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

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

你将学习什么内容?

项目

网站优化

你将对一个存在很多性能问题的给定网站进行优化,使它达到目标网页速度得分,及以 60 帧/秒的速度运行。

学习计划

实战项目

新闻聚合器应用——将一个不能用的应用打造为高性能,60 帧/秒体验的应用。你会得到一个新闻聚合器应用,它使用 Hacker News API 显示每日的头条新闻。这个新闻聚合器存在很多性能问题。你需要通过消除所有卡顿、创建用户会喜欢的体验来展示你对性能的理解。

第 1 课 - 关键渲染路径

  • 你将扮演“卡顿入侵者”,增加你对卡顿的见解!
  • 你将了解浏览器如何将 HTML 变为页面上的像素。
  • 你将了解不同的 CSS 风格如何对渲染管线产生不同影响。

第 2 课 - 应用生命周期

  • 你会了解为何应用的生命周期中有四个不同的阶段:响应、动画、空闲和加载 (RAIL)。
  • 你将了解根据用户处于 RAIL 中的哪个阶段,你的帧预算如何变化。
  • 你将练习思考在 RAIL 的不同阶段,应用的工作负载。

第 3 课 - 卡顿消除武器

  • 你将学习如何理解 Chrome 开发者工具中的时间轴面板。
  • 你将练习分析几个不同的应用程序,找出卡顿的源头。

第 4 课 - JavaScript

  • 你将优化 JavaScript,使动画期间的渲染速度达到 60fps。
  • 你会将耗费巨大的 JavaScript 操作从主线程移除,而移入 Web Worker。
  • 你将调试一个生产质量应用 QR Snapper 的卡顿版副本。

第 5 课 - 风格和布局

  • 你将了解为什么在不合适的时间访问错误的 CSS 属性,会为浏览器带来大量额外工作。
  • 你将为最令人生厌的性能问题之一“强制同步布局”调试多个实例。

第 6 课 - 合成和绘画

  • 你将练习在开发者 Timeline 中使用绘画分析器工具分析层和绘画性能。
  • 你将管理和优化层,以减少浏览器渲染每个帧所需的步骤数。
  • 你将在为新闻聚合器应用消除卡顿的过程中展现你学到的关于性能的所有知识!

讲师与合作伙伴

Cameron Pittman

Cameron Pittman

Cameron 是一位充满激情的教育工作者和程序员,非常热爱网页开发。他专门为优达学城创建编程类课程。来此之前,他曾是西雅图创业公司 LearnBIG 的内容主管和网页开发者。他在田纳西州纳什维尔的一所高中教了四年课程,主要教物理和化学。在此期间,他率先利用视频游戏“传送门 2 (Portal 2)”来讲述物理知识。Cameron 荣获了范德堡大学物理和天文学本科学位,并获得贝尔蒙特大学的教育学硕士学位。

Paul Lewis

Paul Lewis

Paul 是 Google Chrome 团队的一员,担任技术推广工程师。他的日常工作包括分析运行时的性能问题及帮助开发人员构建更快速的网站和应用。不要被他的秃顶欺骗,那是他的奸诈狡猾的太阳能电池板。

官方微信公众号二维码

优达学城(Udacity)微信