kamiimeteor / Udacity-P6-Website-Optimization

网站性能优化项目

你要做的是尽可能优化这个在线项目的速度。注意，请应用你之前在网站性能优化课程中学习的技术来优化关键渲染路径并使这个页面尽可能快的渲染。

开始前，请导出这个代码库并检查代码。

指南

####Part 1: 优化 index.html 的 PageSpeed Insights 得分

[Project Repo] https://github.com/kamiimeteor/Udacity-P6-Website-Optimization

以下是几个帮助你顺利开始本项目的提示：

1. 将这个代码库导出
2. 你可以运行一个本地服务器，以便在你的手机上检查这个站点

  $> cd /你的工程目录
  $> python -m SimpleHTTPServer 8080

1. 打开浏览器，访问 localhost:8080
2. 下载 ngrok 并将其安装在你的工程根目录下，让你的本地服务器能够被远程访问。

  $> cd /你的工程目录
  $> ./ngrok http 8080

1. 复制ngrok提供给你的公共URL，然后尝试通过PageSpeed Insights访问它吧！可选阅读：更多关于整合ngrok、Grunt和PageSpeed的信息。

接下来，你可以一遍又一遍的进行配置、优化、检测了！祝你好运！

---

####Part 2: 优化 pizza.html 的 FPS（每秒帧数）

你需要编辑 views/js/main.js 来优化 views/pizza.html，直到这个网页的 FPS 达到或超过 60fps。你会在 main.js 中找到一些对此有帮助的注释。

你可以在 Chrome 开发者工具帮助中找到关于 FPS 计数器和 HUD 显示的有用信息。Chrome 开发者工具帮助.

一些关于优化的提示与诀窍

• web 性能优化
• 分析关键渲染路径
• 优化关键渲染路径
• 避免 CSS 渲染阻塞
• 优化 JavaScript
• 通过 Navigation Timing 进行检测。在前两个课程中我们没有学习 Navigation Timing API，但它对于自动分析页面性能是一个非常有用的工具。我强烈推荐你阅读它。
• 下载量越少，性能越好
• 减少文本的大小
• 优化图片
• HTTP缓存

使用 Bootstrap 并定制样式

这个项目基于 Twitter 旗下的 Bootstrap框架 制作。所有的定制样式都在项目代码库的 dist/css/portfolio.css 中。

• Bootstrap CSS
• Bootstrap组件

已优化

• 不必要的 CSS 使用媒体查询

• 对JS文件使用异步加载

• 图片进行压缩和尺寸处理使得图片资源变小

• 页面加载时比萨的滑窗改为根据浏览器高度动态设计

• 将querySelector改为getElementById

• 将 updatePositions、changePizzaSizes 函数里 for 循环里重复计算的操作移出到 for 循环外以提升性能

• 使用 requestAnimationFrame 调用 updatePositions 函数