【學習文章】

1、如何監控網頁的卡頓：https://zhuanlan.zhihu.com/p/39292837

2、如何監控網頁的崩潰：https://zhuanlan.zhihu.com/p/40273861

知識延展、補充：

1、PWA （Google Progressive Web App）概念

漸進式網頁應用。一個利用現代瀏覽器的能力來達到類似APP的用戶體驗的技術，由Google實現，讓瀏覽器打開的網址像APP一樣運行在手機上。讓Web App和Native App之間的差距更小。

概覽特性：

• 添加到屏幕
• 從屏幕點擊啟動
• 加載屏
• 支持離線應用（後臺加載，引入Service Worker概念，即使網頁關閉仍然可以在後臺運行獲取數據更新-只能更新小部分數據）
• 支持Push Notification（信息推送）：用戶運行，即使網頁關閉後仍然可以接受到系統通知欄推送（視系統推送權限不一）

優點：

• 原生應用界面：可以隱藏瀏覽器本身的所有視覺部分，光從UI和UX上面看，用戶很容易認為這就是一個原生界面
• 離線使用：離線瀏覽
• 生成近似於原生的桌面圖標：配置一個圖標，應用就能生成快捷方式在桌面上
• 無需安裝
• 優雅降級、漸進增強（需進一步了解）

缺點：存在兼容問題

（部分內容摘取自Google Progressive Web App簡稱PWA）

2、Service Worker概念：網頁關閉仍然可以在後臺運行獲取數據更新（只能更新小部分數據有限制）

（摘取自：Service Worker）

3、Promise 對象用於表示一個異步操作的最終狀態（完成或失敗），以及其返回的值

API參間：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

4、Service Worker 與Web Worker的討論，以下內容摘自文章2的討論

延伸：

1）PWA 之 Service Worker 從介紹到實戰再到爬坑

2）提升Google最新PWA(Progressive Web App)得分

3）PWA的資料收集: https://github.com/ljinkai/pwa-collection

4）PWA官方資料：https://developers.google.com/web/updates/2015/12/getting-started-pwa

5）無線性能優化：FPS 測試：http://taobaofed.org/blog/2016/01/13/measuring-fps/

【文章學習】監控網頁卡頓、崩潰