网站监控网页内容监测(要监控网页的卡顿，我们必须从FPS说起开始！)

　　网站监控网页内容监测(要监控网页的卡顿，我们必须从FPS说起开始！)

　　要监控网页的卡顿，必须从FPS开始。FPS是来自视频或游戏的概念，即每秒的帧数，代表视频或游戏的流畅度，俗话说“不卡顿”。

　　网页的内容是不断变化的，网页的FPS只是浏览器渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，否则会感觉卡住。

　　IIS7网站监控可以及时防控网站的风险，快速准确监控网站是否受到各种劫持攻击，网站是否可以正常打开跨国家（查域名是否Wall），精准DNS污染检测，带网站开启速度检测功能，第一时间知道网站是否被黑、被黑、改标题、上链链接。持续改进产品，提供缺陷零数据！

　　它可以完成以下功能：

　　1、检测网站是否被黑

　　2、检测网站是否被劫持

　　3、检查域名是否被屏蔽

　　4、检测DNS是否被污染

　　5、网站 真实全开时间（独家）

　　6、拥有独立监控后台，24小时域名定期监控

　　官方图片：

　　官方地址：

　　1、 在Chrome中，可以通过开发者工具查看网页的FPS：注意，网页不是任何时候都需要的。该工具会看到每次更新的 FPS 值。最佳帧率为60，即每16.5ms渲染一次。

　　2、还可以通过Chrome或Firfox等性能工具查看浏览器的帧率：绿色直方图代表页面重绘时的帧率，Frames是渲染每一帧所用的时间。

　　3、另一种给网页FPS的方法

　　FPS扩展是Chrome的一个扩展，可以显示当前网页的FPS值，即页面是否卡住。该工具获取页面FPS的方式与浏览器本身给出的方式不同。它不使用浏览器的原生API（正在开发中），这种工具有一个独特的方式，通过浏览器的requestAnimationFrame API（可以使用setInterval polyfill）来实现。

　　4、代码类似：

　　var lastTime = performance.now();

　　无功框架= 0;

　　var lastFameTime = performance.now();

　　var 循环 = 函数（时间）{

　　var now = performance.now();

　　var fs = (now-lastFameTime);

　　lastFameTime = 现在；

　　var fps = Math.round(1000/fs);

　　框架++；

　　如果（现在> 1000 + lastTime）{

　　var fps = Math.round( (frame * 1000) / (now-lastTime) );

　　帧 = 0;

　　上次=现在；

　　};

　　window.requestAnimationFrame(loop);

　　}

　　外行的解释是一些JS代码是通过requestAnimationFrame API定时执行的。如果浏览器死机，则无法保证渲染频率。1s帧不能达到60帧，可以间接反映浏览器的渲染帧率。有关 requestAnimationFrame API 的详细信息，您可以参考 MDN 上的文档。

　　如何监控网页的卡顿？

　　为什么首先要进行监控？比如在全民直播中，一定要关注用户观看视频的体验。任何网页或播放器卡顿都会让用户抓狂。因此必须对其进行监控以指导优化。

　　最后，回到本文的主题，如何监控网页的卡顿？

　　以全国直播方式为例，使用类似于FPS扩展的方法，每秒计算一次网页的FPS值，得到一个数据列表：

　　...6,8,11,29,60,58,46,57,57,57,44,59,51,54,0,31,58,56,41,52,51,17,22,34 ,51,48,26,26,49,59,59,59,59,52,52,0,45,58,60,59,60,21...

　　然后通过公共日志通道上报大数据平台进行分析。

　　那么如何通过FPS判断网页卡住呢？根据我们对卡顿的观察，连续3次FPS低于20可以认为是网页卡顿。

　　函数 isBlocking(fpsList, below=20, last=3) {

　　变量计数 = 0

　　for(var i = 0; i

　　如果 (fpsList[i] && fpsList[i]

　　计数++；

　　} 别的 {

　　计数 = 0

　　}

　　如果（计数> = 最后）{

　　返回真

　　}

　　}

　　返回假

　　}

　　当然，这只是一种经验，但可以作为一种相对的衡量标准。

　　这样，我们就得到了网页冻结的统计信息：

　　接下来，我们可以通过数据支持来优化我们的网页，解决延迟问题！