Close Banner

网站性能优化(中/英)

关键渲染路径

中级

大约 1 个礼拜

6小时每周 (按照自己的节奏)

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

开始免费课程

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

大约 1 个礼拜

6小时每周 (按照自己的节奏)

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

课程概述

你将通过详细了解移动浏览器和桌面浏览器如何渲染页面,学习如何提高任何网站的速度。

在这一简短的课程中,你将学习关键渲染路径,也就是浏览器将 HTML、CSS 和 JavaScript 转换成实际运作的网站必须采取的一系列步骤。接着,你将利用工具来衡量性能,并运用简单的策略尽快向屏幕中渲染画面。你将学习如何利用 Google Chrome 的开发者工具—— PageSpeed Insights 和时间表视图,找到所需的数据并立即提高性能!此课程提供中文版本。

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

为什么学习这门课程?

摘自 Ilya Grigorik 的 高性能浏览器网络:

"在过去几年内,网站性能优化 (WPO) 行业应运而生并得到快速发展,充分表明了用户体验的重要性不断增强和用户对速度的需求日益增长。这不仅仅是因为我们生活在飞速发展和不断连通的世界而对速度的心理需求,更是实证结果(通过衡量很多互联网企业的底线绩效)推动的需求:

  • 更快的网站会提高用户参与。
  • 更快的网站会更容易留住用户。
  • 更快的网站会带来更高的转化率。

简而言之,速度是一项功能特点。"

实战项目

你需要提高一个在线作品集的速度,并与他人分享,展示你的技能!

留下好的第一印象至关重要,而在线作品集可以帮助你脱颖而出。我们会为你提供一个现代化、适合移动设备的作品集,你将能够完全自定义该作品集,并根据自己的需要展示你的作品和技能。但是在向别人展示前,你需要改善该作品集,使其能够尽量快速地呈现,从而练习你的网络性能技能。

先修要求

本课程面向所有网络开发人员,无论你是刚开始学习 HTML、CSS 和 JavaScript,还是早已开始创建网站了,都可以学习本课程。

最重要的是,你应该能够解释 HTML、CSS 和 JavaScript 对于网站结构的整体作用。此外,你应该习惯于阅读和编写 HTML 文档并修改 JavaScript 文件。

本课程会运用 Google ChromeGoogle Chrome Canary 来教学。

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

你将学习什么内容?

项目

网站优化

你将对给定的网站进行多项优化,并解决性能方面的问题,使其能够达到目标 PageSpeed 得分,并每秒运行 60 帧。

学习计划

概述

在整个课程中,你将构建一个性能工具框,并通过采用 PageSpeed Insights 建议和利用 Chrome 开发者工具衡量页面在移动设备和桌面设备上的性能,提高网站的运行速度。

本课程由一节介绍性课程、两节主要课程和一个最终实战项目组成。在学习如何优化之前,你需要对浏览器如何将 HTML、CSS 和 JavaScript 转换成网站有一定的了解。在学习过程中,你将使用 Google 工程师会用到的工具练习衡量网站性能。

接着进入有趣的环节:优化网站!你将学习易于实施的功能,并开发一个简单却强大的模型,用来挖据优化机会。

你将运用新学的知识测验最终实战项目,在该项目中,你将优化你自己的在线作品集网站!

课程

第 0 课(20 分钟)

对于无法衡量的性能,你是无法优化的。在这课中,你将学习如何使用 Chrome 开发者工具来衡量移动网站和桌面网站的性能。

第 1 课(60 分钟)

O无论是优化何种网站的性能,都需要深入了解浏览器是如何通过 HTML、CSS 和 JavaScript 构建网站的。你将开始分解关键渲染路径——浏览器渲染网页所需采取的步骤。你将了解:

  • HTML 如何转换为文档对象模型 (DOM).
  • CSS 如何转换为 CSS 对象模型 (CSSOM).
  • 浏览器如何运行布局,以判断元素的位置和大小,然后将像素渲染到屏幕上。

在这课中,你将学习如何利用 Chrome 开发者工具中的时间表视图在移动设备和桌面设备上衡量每步的性能。

第 2 课(90 分钟)

你将学习简单的 HTML、CSS 和 JavaScript 优化如何带来显著的性能改善,某些简化简单到只需向 HTML 标记中添加一个属性!在课程中,你将学会发现优化机会的技能,包括:

  • 为关键程序路径构建快速有效的图表。
  • 发现将潜在性能瓶颈问题三角化的三大关键指标。

讲师与合作伙伴

Cameron Pittman

Cameron Pittman

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

Ilya Grigorik

Ilya Grigorik

Ilya Grigorik 是 Google 的一名性能工程师,并且著有《高性能浏览器网络》(High Performance Browser Networking, O'Reilly)。除了改善网络性能之外,他还喜欢研究新性能或分析相关的开源项目,推出有趣的项目,例如 vimgolf.com,或缩短他的铁人三项时间。在研究网络性能之前,Ilya 花了 5 年时间衡量和优化社交宣传活动的性能。他是 PostRank 的创始人,PostRank 后来被 Google 收购了,并被整合到了 Google Analytics 中。简而言之,他喜欢优化和提高事物的速度。

官方微信公众号二维码

优达学城(Udacity)微信