kaindy7633/website-optimization

运行说明：

1.执行npm install 安装http-server 2.安装完成后执行http-server，即可开启本地服务器，在浏览器中输入http://localhost:8080访问

优化说明：

index.html: 在13-20行中，引入google的webfont.js，异步载入Google字体文件

main.js:

1、将代码中所有的querySelector替换为getElementById 2、在522行中，将left属性更换为transform 3、在470行中，使用requestAnimationFrame来运行动画

网站性能优化项目

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

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

指南

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

使用 Bootstrap 并定制样式

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

• Bootstrap CSS
• Bootstrap组件