Nilisme / frontend-nanodegree-mobile-portfolio

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

网站性能优化项目

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

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

指南

####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 开发者工具帮助.

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

使用Bootstrap并定制样式

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

About


Languages

Language:JavaScript 55.1%Language:HTML 38.8%Language:CSS 6.0%