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

【學習文章】

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

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

 

 

 

知識延展、補充：

一、PWA （Google Progressive Web App）概念

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

概覽特性：

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

優勢：

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

缺點：存在兼容問題

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

 

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

（摘取自：Service Worker）

 

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

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

 四、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/

6）記錄一次基於vue、typescript、pwa的項目由開發到部署