码迷,mamicode.com
首页 > Web开发 > 详细

【文章学习】监控网页卡顿、崩溃

时间:2018-12-04 13:23:53      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:width   global   tail   利用   idt   cts   nbsp   net   收集   

【学习文章】

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/

【文章学习】监控网页卡顿、崩溃

标签:width   global   tail   利用   idt   cts   nbsp   net   收集   

原文地址:https://www.cnblogs.com/ylhssn/p/10037685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!