yangyingwx / test01 Goto Github PK

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

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

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

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

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缓存

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

• Bootstrap CSS
• Bootstrap组件

• 图片压缩，压缩了最大的那张图片
• css媒体查询
• font用js异步加载
• script链接用async,也放到页面最下面
• style.css用内联
• main.js中有两处循环里访问了offsetWidth属性，拿到循环外部
• jquerySelector换成getElementById
• pizza的数量改成自动计算的