建设部网站资质,163网站是jsp做的吗,vps服务器中的网站不显示图片,担保公司网站模板1、chrome开发者工具-Performance面板
chrome浏览器右键检查元素即可打开谷歌开发者工具面板#xff0c;但是常用的可能是Element、Console、Source三个面板的功能#xff0c;其余面板还有#xff1a;Network、Performance、Memory、Application、Security、Audits等。 …1、chrome开发者工具-Performance面板
chrome浏览器右键检查元素即可打开谷歌开发者工具面板但是常用的可能是Element、Console、Source三个面板的功能其余面板还有Network、Performance、Memory、Application、Security、Audits等。 这些按钮的功能如下 * Elements: 查找网页源代码HTML中的任一元素手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。 * Console: 记录开发者开发过程中的日志信息且可以作为与JS进行交互的命令行shell。 * Sources: 断点调试JS。 * Network: 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息包括状态、资源类型、大小、所用时间等可以根据这个进行网络性能优化。 * Performance: 记录并分析网站的生命周期内所发生的各类事件以此可以提高网页的运行时间的性能。 * Memory: 可以查看Performance所能提供的更多信息。 * Application: 记录网站加载的所有资源信息包括存储数据LocalStorage、SessionStorage、InedxedDB、WebSQL、Cookie缓存数据字体图片脚本样式等。 * Security: 判断当前网页是否安全。 * Audits: 对当前网页进行网络利用、网页性能方面的诊断并给出一些优化建议。比如列出所有没有用到的css文件等。 关于各面板的详细使用情况可以参考博客 chrome开发者工具详解
2、如何监控网页卡顿
要监控网页卡顿必须从FPS说起。 FPS是来自视频或者游戏里的概念即每秒的帧数代表视频或游戏的流畅度俗话说就是‘不卡’。 那么在前端开发领域什么是网页的FPS呢 网页内容在不断变化之中网页的FPS是浏览器在渲染这些变化时的帧率帧率越高用户感觉网页越流畅反之则会感觉卡顿。 * 1、在chrome中可以通过开发者工具的performance面板查看网页的FPS具体操作情况可点击1中的链接 绿色的直方图即代表在页面重新绘制时的帧率Frames为每一帧渲染所花的时间。 通过render里的FPS paint,可以查看当前网页更新时的FPS具体数值 最优的帧率是60即16.5ms左右渲染一次。 *2、FPS extension是Chrome的一个扩展可以显示当前网页的FPS值即页面是否卡顿。 这种工具获取页面FPS的方式与浏览器自身给出的方式不同没有采用浏览器原生的API正在制定这类工具独辟蹊径通过浏览器的requestAnimationFrame API可以使用setInterval polyfill来实现。 代码类似
var lastTime performance.now();
var frame 0;
var lastFrameTime performance.now();
var loop function(time) {var now performance.now();var fs (now - lastFrameTime);lastFrameTime now;var fps Math.round( 1000/fs );frame;if(now 1000 lastTime){var fps Math.round((frame*1000) / (now-lastTime)); //计算时间达到一秒后的帧数frame 0; //清零lastTime now; //重新计算下一秒的帧数};window.requestAnimationFrame(loop);
}
(代码摘自淘宝前端团队的《无线性能优化FPS测试》) 通俗的解释就是通过requestAnimationFrame API 来定时执行一些JS代码1s中frame无法达到60帧即可间接地反映浏览器的渲染帧率。关于requestAnimationFrame API的细节可以参看文档MDN文档。 如何监控网页卡顿 监控目的 比如在全民直播时我们必须重视用户的观看体验。所以任何网页或者播放器必须监控起来以此指导优化避免卡顿的出现。 方式 以全民直播为例使用FPS extension类似的方式写一段JS循环运行达到监控目的每秒中计算一次网页的FPS值获得一列数据 …6,8,11,23,25,35,44,50,39,34,… 然后通过通用的日志通道上报到大数据平台进行分析即可。 那如何通过FPS确定网页存在卡顿呢 观察结论连续出现3个低于20的FPS 即可认为网页存在卡顿。 通过这种方式得到了网页卡顿的统计数据接下来针对卡顿的问题在有数据支持的情况下进行网页优化。 内容来源知乎寸志感谢作者分享
3、如何监控网页崩溃
1、崩溃和卡顿的区别 卡顿也就是网页暂时响应比较慢JS可能无法及时执行这也是检测网页卡顿所依赖的技术点。 但崩溃就不一样了网页都崩溃了页面看不见了JS无法运行还有什么办法可以监控网页的崩溃并将网页的崩溃上报呢 2、基于Service Worker的崩溃方案统计 随着PWA概念的流行大家对Service Worker也逐渐熟悉起来。基于以下原因我们可以使用Service Worker来实现网页崩溃的监控 *1、Service Worker有自己独立的工作线程与网页区分开网页崩溃了Service Worker一般情况下不会崩溃 *2、Service Worker生命周期一般比网页还要长可以用来监控网页的状态 *3、网页可以通过**navigator.serviceWorker.controller.postMessage**API向掌管自己的SW发送消息。 基于以上几点我们可以实现一种基于心跳检测 的监控方案 *P1网页加载后通过**postMessage**API每5s给sw发送一个心跳表示自己在线sw将在线的网页登记下来更新登记时间 *P2网页在beforeunload时通过**postMessage**API告知sw自己已经正常关闭sw将登记的网页清除 *P3如果网页在运行的过程中crash了sw中的running状态将不会被清除更新时间停留在崩溃前的最后一次心跳 *P4Service Worker每10s查看一遍登记中的网页发现登记时间已经超出了一定时间比如15s即可判定该网页crash了。 一些简化后的测试代码供参考
if(navigator.serviceWorker.controller ! null){let HEARTBEAT_INTERVAL 5 * 1000;//每5s发一次心跳let sessionId uuid();let heartbeat function () {navigator.serviceWorker.controller.postMessage({type: heartbeat,id: sessionId,data: {} //附加信息如果页面crash上报的附加数据});}window.addEventListener(beforeunload,function() {navigator.serviceWorker.controller.postMessage({type: unload,id: sessionId});});setInterval(heartbeat,HEARTBEAT_INTERVAL);heartbeat();
}
sessionId: 本次页面会话唯一的idpostMessage: 附带一些信息用于上报crash需要的数据比如当前页面的地址等。
const CHECK_CRASH_INTERVAL 10*1000; //每10s检查一次
const CRASH_THRESHOLD 15 * 1000; //超过15s没有心跳则认为已经crash
const pages {}
let timer
function checkCrash() {const now Date.now()for ( var id in pages){let page pages[id]if((now-page.t)CRASH_THRESHOLD) {//上报 crashdelete pages[id]}}if(Object.keys(pages).length 0) {clearInterval(timer)timer null}
}
worker.addEventListener(message, (e){const data e.data;if(data.type heartbeat){pages[data.id] {t: Data.now()}if(!timer){timer setInterval(function(){checkCrash()},CHECK_CRASH_INTERVAL) }}else if(data.type unload){delete pages[data.id]}
})
方案的可行性 * **1、兼容性**Service Worker的普及率已经相当高了鉴于国内各种浏览器都是Chrome内核而且版本已经在Chrome45以上已经覆盖了相当一部分用户。作为监控数据覆盖大部分就好。 * 2、可靠性 相比于利用window对象的load与beforeunload事件实现网页崩溃的监控利用service Worker更加可靠。 在页面加载时load事件在sessionStorage记录good_exit状态为pending如果用户正常退出beforeunload事件good_exit状态改为true如果页面crash了good_exit状态依然为pending在用户第二次访问网页的时候第2个load事件查看good_exit的状态如果仍然是pending就可以断定上次访问网页崩溃了。 代码
window.addEventListener(load, function() {sessionStorage.setItem(good_exit, pending);setInterval(function(){sessionStorage.setItem(time_before_crash, new Date().toString());},1000);
});
window.addEventListener(beforeunload,function() {sessionStorage.setItem(good_exit,true);
});
if( sessionStorage.getItem(good_exit) sessionStorage.getItem(good_exit)! true){/*insert crash logging code here*/alert(Hey,welcome back from your crash, looks like you crashed on: sessionStorage.getItem(time_before_crash));
}
这个方案的问题所在之处 1、采用sessionStorage存储状态但通常网页崩溃/卡死后用户会强制关闭网页或者索性重新打开浏览器sessionStorage存储的状态将不复存在。 2、如果将存储状态在localStorage甚至Cookie中如果用户先后打开多个网页但不关闭good_exit存储的一直都是pending,那么每有一次网页打开就会有一个crash上报。 参考地址知乎寸志
