前端相关数据监控

2015/08/16 · HTML5 ·
数据监控

原文出处:
AlloyTeam   

项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统。

所以我们需要做以下的一些模块:

一、收集脚本执行错误

JavaScript

function error(msg,url,line){ var REPORT_URL = “xxxx/cgi”; //
收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new
Date];// 收集错误信息,发生错误的脚本文件网络地址,用户代理信息,时间
var url = REPORT_URL + m.join(‘||’);// 组装错误上报信息内容URL var img
= new Image; img.onload = img.onerror = function(){ img = null; };
img.src = url;// 发送数据到后台cgi } // 监听错误上报 window.onerror =
function(msg,url,line){ error(msg,url,line); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function error(msg,url,line){
   var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息
   var m =[msg, url, line, navigator.userAgent, +new Date];// 收集错误信息,发生错误的脚本文件网络地址,用户代理信息,时间
   var url = REPORT_URL + m.join(‘||’);// 组装错误上报信息内容URL
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = url;// 发送数据到后台cgi
}
// 监听错误上报
window.onerror = function(msg,url,line){
   error(msg,url,line);
}

通过管理后台系统,我们可以看到页面上每次错误的信息,通过这些信息我们可以很快定位并且解决问题。

二、收集html5 performance信息

performance
包含页面加载到执行完成的整个生命周期中不同执行步骤的执行时间。performance相关文章点击如下:使用performance
API
监测页面性能

计算不同步骤时间相对于navigationStart的时间差,可以通过相应后台CGI收集。

JavaScript

function _performance(){ var REPORT_URL = “xxxx/cgi?perf=”; var perf =
(window.webkitPerformance ? window.webkitPerformance :
window.msPerformance ), points =
[‘navigationStart’,’unloadEventStart’,’unloadEventEnd’,’redirectStart’,’redirectEnd’,’fetchStart’,’domainLookupStart’,’connectStart’,’requestStart’,’responseStart’,’responseEnd’,’domLoading’,’domInteractive’,’domContentLoadedEventEnd’,’domComplete’,’loadEventStart’,’loadEventEnd’];
var timing = pref.timing; perf = perf ? perf : window.performance; if(
perf && timing ) { var arr = []; var navigationStart =
timing[points[0]]; for(var i=0,l=points.length;i<l;i++){ arr[i]
= timing[points[i]] – navigationStart; } var url = REPORT_URL +
arr.join(“-“); var img = new Image; img.onload = img.onerror =
function(){ img=null; } img.src = url; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function _performance(){
   var REPORT_URL = "xxxx/cgi?perf=";
   var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),
      points = [‘navigationStart’,’unloadEventStart’,’unloadEventEnd’,’redirectStart’,’redirectEnd’,’fetchStart’,’domainLookupStart’,’connectStart’,’requestStart’,’responseStart’,’responseEnd’,’domLoading’,’domInteractive’,’domContentLoadedEventEnd’,’domComplete’,’loadEventStart’,’loadEventEnd’];
   var timing = pref.timing;
   perf = perf  ? perf : window.performance;
   if( perf  && timing ) {
      var arr = [];
      var navigationStart = timing[points[0]];
      for(var i=0,l=points.length;i<l;i++){
         arr[i] = timing[points[i]] – navigationStart;
      }
   var url = REPORT_URL + arr.join("-");
   var img = new Image;
   img.onload = img.onerror = function(){
      img=null;
   }
   img.src = url;
}

通过后台接口收集和统计,我们可以对页面执行性能有很详细的了解。

三、统计每个页面的JS和CSS加载时间

在JS或者CSS加载之前打上时间戳,加载之后打上时间戳,并且将数据上报到后台。加载时间反映了页面白屏,可操作的等待时间。

XHTML

<script>var cssLoadStart = +new Date</script> <link
rel=”stylesheet” href=”xxx.css” type=”text/css” media=”all”> <link
rel=”stylesheet” href=”xxx1.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”xxx2.css” type=”text/css”
media=”all”> <sript> var cssLoadTime = (+new Date) –
cssLoadStart; var jsLoadStart = +new Date; </script> <script
type=”text/javascript” src=”xx1.js”></script> <script
type=”text/javascript” src=”xx2.js”></script> <script
type=”text/javascript” src=”xx3.js”></script> <script>
var jsLoadTime = (+new Date) – jsLoadStart; var REPORT_URL =
‘xxx/cgi?data=’ var img = new Image; img.onload = img.onerror =
function(){ img = null; }; img.src = REPORT_URL + cssLoadTime + ‘-‘ +
jsLoadTime; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>var cssLoadStart = +new Date</script>
<link rel="stylesheet" href="xxx.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx1.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx2.css" type="text/css" media="all">
<sript>
   var cssLoadTime = (+new Date) – cssLoadStart;
   var jsLoadStart = +new Date;
</script>
<script type="text/javascript" src="xx1.js"></script>
<script type="text/javascript" src="xx2.js"></script>
<script type="text/javascript" src="xx3.js"></script>
<script>
   var jsLoadTime = (+new Date) – jsLoadStart;
   var REPORT_URL = ‘xxx/cgi?data=’
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = REPORT_URL + cssLoadTime + ‘-‘ + jsLoadTime;
</script>

XHTML

<a href=””
target=”_blank”> </a>

1
<a href="https://github.com/perltzhu/js-data-report" target="_blank"> </a>

即使用了 https 也不要通过 query strings 传敏感数据

2017/10/16 · 基础技术 ·
HTTPS

本文由 伯乐在线 –
xiaoheike
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:HttpWatch。欢迎加入翻译组。

服务器端的 log 将明文记下完整 url;浏览器上的访问历史也会明文记下完整
url;Referrer headers 里也忠实记下完整 url,然后在别人家的 Google
Analytics 上显示。

我们经常听到的一个常见问题是:“URL
中的参数是否可以安全地传递到安全网站?”这个问题常常出现在客户看了
HttpWatch 捕获的 HTTPS 请求后,想知道还有谁可以看到这些数据。

 

例如,假设在一个查询中,使用如下安全的 URL 传递密码字符串:

HttpWatch 能够显示安全请求的内容,因为它与浏览器集成,因此它能够在
HTTPS 请求的 SSL
连接对数据加密之前查看数据。图片 1

如果你使用网络嗅探器查看,例如
Network Monitor,对于同一个请求,你只能够查阅加密之后的数据。在数据包跟踪中没有可见的网址,标题或内容:

图片 2

您可以信任 HTTPS 请求是安全的,只要:

  • 未忽略任何SSL证书警告
  • Web 服务器用于启动 SSL 连接的私钥在 Web 服务器本身之外不可用。

因此,在网络层面,URL 参数是安全的,但是还有一些其他基于 URL
泄漏数据的方法:

  1. URL 存储在 Web 服务器日志中–通常每个请求的完整 URL
    都被存放在服务器日志中。这意味着 URL
    中的任何敏感数据(例如密码)会以明文形式保存在服务器上。以下是使用查询字符串通过
    HTTPS 发送密码时存储在 httpwatch.com 服务器日志中的条目:
    **2009-02-20 10:18:27 W3SVC4326 WWW 208.101.31.210 GET
    /Default.htm password=mypassword 443 …
    通常认为即使是在服务器上,存储明文密码从来都不是好想法
    2.URLs are stored in the browser history – browsers save URL
    parameters in their history even if the secure pages themselves are
    not cached. Here’s the IE history displaying the URL parameter:
  2. URL 存储在浏览器历史记录中–即使安全网页本身未缓存,浏览器也会将
    URL 参数保存在其历史记录中。以下是 IE 的历史记录,显示了 URL
    的请求参数:图片 3

如果用户创建书签,查询字符串参数也将被存储。

  1. URLReferrer 请求头中被传递–如果一个安全网页使用资源,例如
    javascript,图片或者分析服务,URL 将通过 Referrer
    请求头传递到每一个嵌入对象。有时,查询字符串参数可能被传递并存放在第三方站点。在
    HttpWatch 中,你可以看到我们的密码字符串正被发送到
    Google Analytics图片 4

结论

解决这个问题需要两步:

  • 只有在绝对必要的情况下传递敏感数据。一旦用户被认证,最好使用具有有限生命周期的会话
    ID 来标识它们。

使用会话层级的 cookies 传递信息的优点是:

  • 它们不会存储在浏览器历史记录中或磁盘上
  • 它们通常不存储在服务器日志中
  • 它们不会传递到嵌入式资源,例如图片或 JavaScript
  • 它们仅适用于请求它们的域和路径

以下是我们的在线商店中,用于识别用户的 ASP.NET 会话 cookie 示例:

图片 5

请注意,cookie 被限制在域
store.httpwatch.com,并且在浏览器会话结束时过期(即不会存储到磁盘)。

你当然可以通过 HTTPS
传递查询字符串,但是不要在可能出现安全问题的场景下使用。例如,你可以安全的使用它们显示部分数字或者类型,像
accountview 或者
printpage,但是不要使用它们传递密码,信用卡号码或者其他不应该公开的信息。

1 赞 收藏
评论

移动端H5音频与视频问题及解决方案

2015/09/16 · HTML5 · 1
评论 ·
视频,
音频

原文出处:
Aaron的博客   

最近在研究用视频代替动画,已经初步有成果了,顺便总结下几年开发中遇到的实际问题及给出自己的解决方案

看下最后实际效果:兼容PC,iphone, 安卓5.0

解决了,手动,自动,不全屏的问题

左边视频代替了动画,然后支持背景蒙板效果,能够透出底图

右边是原视频文件

图片 6

H5 audio音频

  • 每次通过 new Audio
    一个音频对象,在IOS上可以看到会产生一个新的线程,这个很恶心

解决方案:

new Audio一个对象,通过替换不同的音频地址,达到不多开线程的目的

  • 在安卓上支持不给力

解决方案:

低版本安卓上的问题没解,一般是混合开发都是可以调底层接口处理的,比如
phonegap

  • iphone上不能自动播放

解决方案:

iphone上自动播放,是IOS设计的的时候做的一个处理,貌似是为了防止自动盗用流量吧

简单来说,需要模拟用户手动去触发才可以

所以我们需要在最开始调用这样一段代码:

这是我项目上的,我就直接扣过来了

JavaScript

//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio
用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser &&
Xut.plat.isIOS) { var isAudio = false var fixaudio = function() { if
(!isAudio) { isAudio = true; Xut.fix.audio = new Audio();
document.removeEventListener(‘touchstart’, fixaudio, false); } };
document.addEventListener(‘touchstart’, fixaudio, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
    var isAudio = false
    var fixaudio = function() {
        if (!isAudio) {
            isAudio = true;
            Xut.fix.audio = new Audio();
            document.removeEventListener(‘touchstart’, fixaudio, false);
        }
    };
    document.addEventListener(‘touchstart’, fixaudio, false);
}

假如在body上绑定这样一个代码:通过手动触发创建一个audio对象,然后保存在全局中

在使用的时候如下

JavaScript

//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js if
(Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio
= new Audio(url); } audio.autoplay = true; audio.play();

1
2
3
4
5
6
7
8
9
10
11
//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio
=
Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

直接替换音频对象即可,简单来说,就是要自动就必须是用户触发创建的对象才能播

H5 video音频

视频标签可能在移动端用的很少,安卓支持太烂了,目测5.0才好转

iphone上老问题,不能自动播放(省流量啊,省你妹!!!),并且默认就是全屏控件播放

很长一段时间里,我都没理会这个视频处理,安卓用底层,iphone直接用VideoJS,内置flash与h5切换的,flash也有支持问题

前阵子老板有个需求,我们应用动画太多了,都是精灵路线的组合动画,一个app下来上百M
到几百M不等

所以急需有一个方案可以压缩图片

最后的方案是采用视频代替动画,因为视频压缩技术发展了很多年,已经十分成熟了。现在视频压缩技术,能够很轻松地将720P的

高清电影,压缩到10M/分钟,或者160K/秒。比图像序列的文件尺寸,至少小了几十倍。同时,在于大部分设备,都支持对视频的

硬件解压缩,这样呢,视频播放的CPU消耗很低,电池消耗也很低,同时播放速度还快。即使25帧的全屏幕播放,也能轻易地实

现。

方案定下来,需要解决的几个问题就来了

  1. 整个视频,包括视频中的某些物体,能够响应用户的点击、滑动之类的操作
  2. 在iPhone下面,可以在一个窗口中播放
  3. 能够过滤掉背景,从而能像PNG图像一样运用

最后的实际效果也是开始gif动画所示:

视频代替了动画,然后支持背景蒙板效果,能够透出底图

同时也解决了,手动,自动,不全屏的问题

iphone窗口化

解决方案:

通过canvas + video标签结合处理

原理: 获取video的原图帧,通过canavs绘制到页面

这里我直接附上源码把,代码写的一般,但是突出了几个重点

1 赞 2 收藏 1
评论

图片 7

发表评论

电子邮件地址不会被公开。 必填项已用*标注