Udacity項目二-網頁優化

一、優化index.html的Pagespeed Insights 得分

1. 將這個項目託管到Github上；

2. 利用網頁版Pagespeed Insights進行網頁測試

3. 根據Pagespeed Insights給出的提示進行一遍又一遍的修改，優化，檢測。

（1） 原始網頁

（2） 根據提示，壓縮圖片，內聯CSS，非同步JS以後

壓縮圖片：Photoshop

內聯CSS

非同步JS

媒體查詢print.css

網頁測試：

（3） Web字體網頁優化

網上查詢做法是進行網頁內聯，但我選擇的直接注釋（如有具體作做法請提意見，謝謝）

網頁測試：

二、優化pizza.html的fps（每秒幀數）

1. 改變pizza大小優化

（1） 利用開發者工具-Perfomance進行檢查：

（2） 按照檢測結果進入main.js

發現強制性布局

（3） 按照優達課程進行修改：

① var randomPizzas = document.querySelectorAll(".randomPizzaContainer")減少節點的調用；

② newwidh的值放到循環外，停止強制性布局；

③ getElementByClassName代替querySelectorAll在一定程度上提高網頁性能。

2. pizza移動滑窗進行優化

（1） 利用開發者工具-Perfomance進行檢查：

（2） 按照檢測結果進入main.js，發現強制性布局

（3） 修改

① getElementByClassName代替querySelectorAll在一定程度上提高網頁性能；

② 將var scrollTop放在循環外停止多次強制性布局。

三、項目建議修改

1. 項目建議

2. 修改

（1） 由於利用PS壓縮圖片，圖片的大小和背景不符合要求，所以，在此將pizza.png的背景去掉，調整pizzeria.jpg的尺寸調整：

（2） 減少背景披薩的數量：

3. 再次提交項目，通過。