大學生國家安全教育答案---【快捷查詢】
https://blog.csdn.net/xmxt668/article/details/102529583
2-1 為什麼要進行Web效能優化【企業剛需】
網頁速度快，才可以吸引更多的使用者，使用者體驗才可以。
搜尋排名，會優先考慮高效能網站。
尋找效能瓶頸
瞭解效能指標--多快才算快
利用測量工具和APIs
優化問題，重新測量（迭代）
移動端挑戰多
裝置硬體，網速，螢幕尺寸，互動方式
使用者更缺少耐心，>3秒載入導致53%對的跳出率
持續增長的移動使用者和移動電商業務
2-2 效能指標和優化目標【瞭解行業標準】
1.隨便開啟一個網頁，比如淘寶，用谷歌開啟開發者工具，點選Network選項卡
2.重新整理頁面，選擇重新整理按鈕的時候，點選右鍵，選擇最後一個“清除快取並硬性重新載入”選項，重新整理之後可以看到頁面載入時間
Network裡面有個瀑布圖，表示資源的載入，可以橫向看和豎向看；橫向看的是每項具體的資源，不同的顏色代表不同的環節，有排隊，DNS查詢，SSL，TTFB(從使用者發出請求到資料返回的時間，反映了後臺的處理時間和網路時間)，下載過程。資源如果並行載入，就會提升載入速度。
在NetWork裡面可以看到2根豎線，藍色的是DOM完成的時間，紅色的是所有資源載入完成的時間
在Network裡面的結果一次可能分析不完，我們可以先把結果儲存下來，在空白處右鍵，點選Save all as HAR with content
3.點選Lighthouse選項卡，這是google整合的一個性能測試的工具，報告總分是100分，使用這些工具的時候一定要多測試幾次，取平均值。該選項卡下有幾個指標，指標的黃色代表警告，綠色代表比較好，紅色的代表不好。
First Contentful Paint:從白屏到出現內容的時間。不能一直白屏，可以慢慢地出現內容，不能等所有的內容返回再載入內容
Speed Index:速度指數，背後有個複雜的計算過程，一般4s以內，是比較好的，也要看頁面的具體情況，不能一概追求這個指標，只能不斷優化接近這個指標
4.上面的指標主要是網路的效能，還有使用者的互動體驗，淘寶隨便點選一個一級選單，二級選單就會立即出現，響應速度比較快。還有畫面的流暢度，接下來使用其他的工具，使用快捷鍵Ctrl+Shift+P調用出命令視窗：輸入frame，點選Rendering Show frames per second (FPS) meter,這是個監控，
可以看到頁面的幀數，淘寶可以達到很低(60fps)
優化所有的非同步請求，爭取很快能返回來，實在不行的話，可以加個Loading框
效能優化--載入
理解載入瀑布圖
基於HAR儲存與重建效能資訊
速度指數
重要測量指標（Speed Index,TTFB,頁面載入時間，首次渲染）
2-3 RAIL測量模型【黃金指南】
這是google提出的模型標準，要知道效能優化往哪個方向發展才好一點。受制於各種因素，直接輸入網頁連結，網頁內容可以立刻加載出來。
什麼是RAIL
Respose響應，對於使用者而言，互動的響應
Animation 動畫，動畫給使用者體驗是否流暢
Idle空閒，讓瀏覽器有足夠的空閒時間，不能讓主執行緒始終繁忙
chrome開發者工具裡有個Performance的選項卡，可以看到主執行緒是否空閒
Load載入，資源載入時間
RAIL評估標準
響應：處理時間應在50ms以內完成
是基於使用者調查得出的，使用者可以接受的時間是100ms，從使用者發出請求，到使用者返回請求的過程，其實有很多過程，真正做資料資料的時間只有50ms。
動畫：每10ms產生一幀 （1秒鐘60幀，瀏覽器繪製需要事件）
空閒：儘可能增加空閒時間
當空閒足夠的話，響應來的時候，才可以快速處理；業務相關的邏輯需要放到後臺去做
載入：在5s內完成內容載入並可以互動
（載入，解析的時間是5s）
逐步發現問題，解決問題
效能測量工具
- Chrome DevTools開發除錯，效能評測
- Lighthouse網站整體質量評估
- WebPageTest多測試地點、全面性能報告