云顶娱乐-云顶娱乐游戏平台官网
做最好的网站
当前位置: 云顶娱乐 > 云顶娱乐 > 正文

网页品质管理详解,前端相关数据监察和控制

时间:2019-10-04 15:21来源:云顶娱乐
HTML5贯彻荧屏手势解锁 2015/07/18 · HTML5 · 1评论 ·手势解锁 初稿出处:AlloyTeam    职能展现 落成原理  利用HTML5的canvas,将解锁的范围划出,利用touch事件解锁那一个层面,间接看代码。

HTML5贯彻荧屏手势解锁

2015/07/18 · HTML5 · 1 评论 · 手势解锁

初稿出处: AlloyTeam   

职能展现

图片 1

落成原理 利用HTML5的canvas,将解锁的范围划出,利用touch事件解锁那一个层面,间接看代码。

JavaScript

function createCircle() {// 创设解锁点的坐标,依照canvas的分寸来平均分配半径 var n = chooseType;// 画出n*n的矩阵 lastPoint = []; arr = []; restPoint = []; r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关 for (var i = 0 ; i < n ; i++) { for (var j = 0 ; j < n ; j++) { arr.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); restPoint.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); } } //return arr; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCircle() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径
 
        var n = chooseType;// 画出n*n的矩阵
        lastPoint = [];
        arr = [];
        restPoint = [];
        r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关
        for (var i = 0 ; i < n ; i++) {
            for (var j = 0 ; j < n ; j++) {
                arr.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
                restPoint.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
            }
        }
        //return arr;
    }

canvas里的圆形画好今后能够张开事件绑定

JavaScript

function bindEvent() { can.addEventListener("touchstart", function (e) { var po = getPosition(e); console.log(po); for (var i = 0 ; i < arr.length ; i++) { if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起首点是还是不是在规模内部 touchFlag = true; drawPoint(arr[i].x,arr[i].y); lastPoint.push(arr[i]); restPoint.splice(i,1); break; } } }, false); can.addEventListener("touchmove", function (e) { if (touchFlag) { update(getPosition(e)); } }, false); can.addEventListener("touchend", function (e) { if (touchFlag) { touchFlag = false; storePass(lastPoint); setTimeout(function(){ init(); }, 300); } }, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function bindEvent() {
        can.addEventListener("touchstart", function (e) {
             var po = getPosition(e);
             console.log(po);
             for (var i = 0 ; i < arr.length ; i++) {
                if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起始点是否在圈圈内部
 
                    touchFlag = true;
                    drawPoint(arr[i].x,arr[i].y);
                    lastPoint.push(arr[i]);
                    restPoint.splice(i,1);
                    break;
                }
             }
         }, false);
         can.addEventListener("touchmove", function (e) {
            if (touchFlag) {
                update(getPosition(e));
            }
         }, false);
         can.addEventListener("touchend", function (e) {
             if (touchFlag) {
                 touchFlag = false;
                 storePass(lastPoint);
                 setTimeout(function(){
 
                    init();
                }, 300);
             }
 
         }, false);
    }

随即到了最重大的手续绘制解锁路线逻辑,通过touchmove事件的不停触发,调用canvas的moveTo方法和lineTo方法来画出折现,同期判定是不是达到规定的标准大家所画的规模里面,其中lastPoint保存不易的框框路线,restPoint保存全体圈圈去除正确门路之后剩余的。 Update方法:

JavaScript

function update(po) {// 宗旨转移方式在touchmove时候调用 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来 drawCle(arr[i].x, arr[i].y); } drawPoint(lastPoint);// 每帧花轨迹 drawLine(po , lastPoint);// 每帧画圆心 for (var i = 0 ; i < restPoint.length ; i++) { if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) { drawPoint(restPoint[i].x, restPoint[i].y); lastPoint.push(restPoint[i]); restPoint.splice(i, 1); break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function update(po) {// 核心变换方法在touchmove时候调用
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来
            drawCle(arr[i].x, arr[i].y);
        }
 
        drawPoint(lastPoint);// 每帧花轨迹
        drawLine(po , lastPoint);// 每帧画圆心
 
        for (var i = 0 ; i < restPoint.length ; i++) {
            if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) {
                drawPoint(restPoint[i].x, restPoint[i].y);
                lastPoint.push(restPoint[i]);
                restPoint.splice(i, 1);
                break;
            }
        }
 
    }

终极就是停止专业,把门路里面包车型地铁lastPoint保存的数组变成密码存在localstorage里面,之后就用来处精通锁验证逻辑了

JavaScript

function storePass(psw) {// touchend结束未来对密码和气象的管理 if (pswObj.step == 1) { if (checkPass(pswObj.fpassword, psw)) { pswObj.step = 2; pswObj.spassword = psw; document.getElementById('title').innerHTML = '密码保存成功'; drawStatusPoint('#2CFF26'); window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword)); window.localStorage.setItem('chooseType', chooseType); } else { document.getElementById('title').innerHTML = '两遍分裂,重新输入'; drawStatusPoint('red'); delete pswObj.step; } } else if (pswObj.step == 2) { if (checkPass(pswObj.spassword, psw)) { document.getElementById('title').innerHTML = '解锁成功'; drawStatusPoint('#2CFF26'); } else { drawStatusPoint('red'); document.getElementById('title').innerHTML = '解锁战败'; } } else { pswObj.step = 1; pswObj.fpassword = psw; document.getElementById('title').innerHTML = '再次输入'; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function storePass(psw) {// touchend结束之后对密码和状态的处理
        if (pswObj.step == 1) {
            if (checkPass(pswObj.fpassword, psw)) {
                pswObj.step = 2;
                pswObj.spassword = psw;
                document.getElementById('title').innerHTML = '密码保存成功';
                drawStatusPoint('#2CFF26');
                window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword));
                window.localStorage.setItem('chooseType', chooseType);
            } else {
                document.getElementById('title').innerHTML = '两次不一致,重新输入';
                drawStatusPoint('red');
                delete pswObj.step;
            }
        } else if (pswObj.step == 2) {
            if (checkPass(pswObj.spassword, psw)) {
                document.getElementById('title').innerHTML = '解锁成功';
                drawStatusPoint('#2CFF26');
            } else {
                drawStatusPoint('red');
                document.getElementById('title').innerHTML = '解锁失败';
            }
        } else {
            pswObj.step = 1;
            pswObj.fpassword = psw;
            document.getElementById('title').innerHTML = '再次输入';
        }
 
    }

解锁组件

将这么些HTML5解锁写成了三个组件,放在

二维码体验: 图片 2

 

参照他事他说加以考察资料:

1 赞 4 收藏 1 评论

图片 3

网页质量管理详解

2015/09/17 · HTML5, JavaScript · 性能

原稿出处: 阮一峰   

您遇见过品质比比较糟糕的网页吗?

这种网页响应特别缓慢,占用大量的CPU和内部存款和储蓄器,浏览起来通常有卡顿,页面包车型地铁动画片效果也不通畅。

图片 4

你会有怎么样影响?作者猜测,大非常多客商会破产那个页面,改为访谈别的网址。作为二个开拓者,明确不乐意见见这种景色,怎么着工夫提升品质呢?

正文将详细介绍质量难题的面世原因,以及化解方法。

你所不晓得的 HSTS

2015/10/24 · HTML5 · HSTS

初稿出处: 李靖(@Barret李靖)   

非常多个人听闻过也看见过 301、302,不过差不离根本不曾观看过 303 和 307 的状态码。明天在Taobao首页看见了 307 状态码,于是搜索了一把。

3个CSS3和HTML5新框架

2011/05/16 · HTML5 · CSS3, HTML5

各种人都知情,会从完美的CSS/HTML 框架中有十分大的收获。上边介绍3个相对相比新的HTML5和CSS3框架。

Inuit.CSS – CSS Framework

Inuit.CSS 框架,作者Harry Roberts 。该框架首要针对的是个中或小显示屏。这些CSS框架支持新的HTML5成分。

Perkins – HTML5/CSS3 Framework

Perkins,作者Carlos Elías 。该 HTML5/CSS3 框架,具备主导HTML5模板,富含标签、表格,以及开创导航等。

图片 5

G5 Framework – HTML5 Front End Development Framework

G5 框架,作者Greg Babula 。那是个轻型的 HTML5、 CSS3、 PHP 和jQuery前端开拓框架。具有灵活的布局、并可飞快翻新的效果与利益等等。

原文:Tommy Olovsson       译文:oschina

 

赞 1 收藏 评论

图片 6

前端相关数据监察和控制

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

原稿出处: AlloyTeam   

品类支出成功外发后,未有一个监督系统,我们很难明白到揭橥出去的代码在顾客机器上试行是否正确,所以供给建设构造前端代码品质相关的监察和控制种类。

为此我们要求做以下的一部分模块:

一、搜聚脚本推行错误

JavaScript

function error(msg,url,line){ var REPORT_U本田CR-VL = "xxxx/cgi"; // 搜聚报告数据的音讯 var m =[msg, url, line, navigator.userAgent, +new Date];// 收罗错误消息,发生错误的台本文件网络地址,顾客代理消息,时间 var url = REPORT_U福睿斯L + 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>

一、网页生成的进程

要驾驭网页质量为啥倒霉,将要驾驭网页是怎么转移的。

图片 7

网页的调换进程,大概能够分为五步。

HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model) 结合DOM和CSSOM,生成一棵渲染树(包涵各个节点的视觉新闻) 生成布局(layout),将在有所渲染树的拥有节点举办平面合成 将布局绘制(paint)在显示屏上

1
2
3
4
5
HTML代码转化成DOM
CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
生成布局(layout),即将所有渲染树的所有节点进行平面合成
将布局绘制(paint)在屏幕上

那五步里面,第一步到第三步都非常快,耗费时间的是第四步和第五步。

“生成布局”(flow)和”绘制”(paint)这两步,合称为”渲染“(render)。

图片 8

中间人威胁

起因是如此,https 使用的是 443 端口实行数量传输,而浏览器的暗许端口是

  1. 威吓者首先勒迫客商的 80 端口,当客户向指标页发起呼吁时,恐吓者模拟符合规律的 https 伏乞向源服务器获取数据,然后经过 80 端口重临给顾客,大约能够看下下面两张图:

图片 9

客户日常不会在地方栏输入   ,而是习贯性输入 taobao.com  ,此时浏览器走的是 http,央求达到服务器之后,服务器告诉浏览器 302 跳转

Location:

1
Location: https://www.taobao.com

下一场浏览重视新诉求,通过 HTTPS 情势,443 端口通信。而正因为客户不是向来输入 https:// 链接,压制者利用这点:

图片 10

一经能够勒迫你的网络,比方路由要挟、DNS勒迫,就能够用作中间人注入代码、替换广告。。。(上了 https 也拗可是邮电通讯,真是日了够了)

这种胁制出现在二种情况下:

  • 客商并未有经过规范的办法访谈页面,除非输入 https:// ,不然浏览器默许以 http网页品质管理详解,前端相关数据监察和控制。 情势访谈
  • HTTPS 页面包车型客车链接中满含 http,那一个 http 页面恐怕被威逼

参照他事他说加以考察资料:

  • html5 performance en
  • html5 performance cn
  • javascript onerror api

    1 赞 1 收藏 评论

图片 11

编辑:云顶娱乐 本文来源:网页品质管理详解,前端相关数据监察和控制

关键词:

  • 上一篇:没有了
  • 下一篇:没有了