Menu
Woocommerce Menu

标准终于完工了,创建对象的七种方式

0 Comment


历时三年,HTML5 标准终于完工了

2014/10/29 · HTML5 ·
HTML5

原来的小说出处: 驱动之家   

万维网结盟(W3C)后天热泪盈眶地发表,经过差不离8年的费力努力,HTML5标准标准终于最后拟定完毕了,并已当面发表。

以前的几年时间里,已经有大多开荒者时断时续使用了HTML5的一些技巧,Firefox、GoogleChrome、Opera、Safari 4+、Internet Explorer
9+都已辅助HTML5,但直到现在日,大家才看出“正式版”。

HTML5将会顶替一九九八年制定的HTML 4.01、XHTML
1.0专门的学问,以期能在网络应用急速升高的时候,使网络正式达到契合今世的网络要求,为桌面和移动平台带来无缝对接的增进内容。

W3C COO 杰夫Jaffe大学生代表:“HTML5将力促Web步入新的不经常。不久原先,Web还只是上网看有的基础文书档案,而现行反革命,Web是贰个十分的大丰裕的平台。作者们早就进去三个安居阶段,各样人都足以遵从专门的学业行事,並且可用于具备浏览器。借使大家无法携起手来,就不会有联合的Web。

HTML5还乐观成为希望中的“开放Web平台”(Open Web
Platform)的木本
,如能完结可进一步推向更深透的跨平台Web应用。

接下去,W3C将从事于付出用于实时通讯、电子支付、应用开采等方面包车型大巴标准标准,还有大概会创建一密密麻麻的隐情、安全防患方法。

W3C还曾经在二〇一三年透露说,布署在二〇一五年初前公布HTML 5.1

HTML5正式版:

赞 收藏
评论

图片 1

JavaScript 创建对象的四种格局

2017/06/20 · JavaScript
· 对象

初稿出处: Xuthus
Blog   

JavaScript创建对象的办法有众多,通过Object构造函数或对象字面量的主意也能够创立单个对象,分明那三种方式会发出大批量的重新代码,并不适合量产。接下来介绍种种特别优秀的制造对象的措施,他们也各有利弊。

图片 2

H5 Crash 研究

2016/05/31 · HTML5 ·
Crash

初稿出处:
小胡子哥(@Barret托塔天王)   

咱俩领会,支撑页面在 webview 上雅观运维的前提是有着一个飞跃何况稳定的
webview
容器,而容器的立即稳定不止由容器提供方来有限援救,也亟需容器使用者服从一些基本准绳,不然就有十分的大可能现身页面
Crash
的图景,那几个法则是怎么着?什么样的上层代码会引起容器至极退出?那是本文须要演讲的从头到尾的经过。

厂子方式

function createPerson(name, job) { var o = new Object() o.name = name
o.job = job o.sayName = function() { console.log(this.name) } return o }
var person1 = createPerson(‘Jiang’, ‘student’) var person2 =
createPerson(‘X’, ‘Doctor’)

1
2
3
4
5
6
7
8
9
10
11
function createPerson(name, job) {
  var o = new Object()
  o.name = name
  o.job = job
  o.sayName = function() {
    console.log(this.name)
  }
  return o
}
var person1 = createPerson(‘Jiang’, ‘student’)
var person2 = createPerson(‘X’, ‘Doctor’)

能够多多次调用这一个工厂函数,每趟都会重临贰个蕴涵八个属性和一个措施的对象

厂子情势就算缓和了创办四个一般对象的难点,可是尚未消除对象识别问题,即不可能知道二个目的的品种

H5 Crash 难题大致

下图是 H5 Crash 的光景流程图:

图片 3

由于前端无法捕捉到页面 Crash 的气象和库房,不过 H5
页面上发出的荒谬会传递到 Java 和更底层的 Native
直到容器格外退出,在脱离的那一刻,容器会将饭店写入到日志中,当后一次开采容器时(也说不定是按时报告)就能反馈这个仓库消息。

构造函数方式

function Person(name, job) { this.name = name this.job = job
this.sayName = function() { console.log(this.name) } } var person1 = new
Person(‘Jiang’, ‘student’) var person2 = new Person(‘X’, ‘Doctor’)

1
2
3
4
5
6
7
8
9
function Person(name, job) {
  this.name = name
  this.job = job
  this.sayName = function() {
    console.log(this.name)
  }
}
var person1 = new Person(‘Jiang’, ‘student’)
var person2 = new Person(‘X’, ‘Doctor’)

不曾出示的成立对象,使用new来调用那一个构造函数,使用new后会自动实行如下操作

  • 创办三个新对象
  • 这些新对象会被施行[[prototype]]链接
  • 以此新对象会绑定到函数调用的this
  • 回去那么些指标

动用这么些格局成立对象能够检查测验对象类型

person1 instanceof Object // true person1 instanceof Person //true

1
2
person1 instanceof Object // true
person1 instanceof Person //true

不过采纳构造函数创设对象,每个方法都要在各样实例上再度创设一遍

H5 Crash 原因初探

测量检验代码 货仓地址:

git clone ; cd demo;

1
2
git clone https://github.com/barretlee/h5crash.git;
cd demo;

注意: 代码必要在 Webview 容器中测量检验,PC 浏览器下不会出现非常。

H5 Crash 的因由不太刚烈,然而从经验上决断和搜索,大约归类为以下三种:

1. 内部存款和储蓄器难题

  • 测量试验方法:使用闭包,不断加码内部存储器量,看看扩大到哪个区间大小, webview
    容器会出现非凡
  • 测验地方:(微信、腾讯网只怕别的客户端展开该页面包车型客车客商,可以点进去测量检验下,采纳100M 内部存款和储蓄器,不出意外,你的客户端会闪退。)

XHTML

<script> var Closure = function() { var _cache = []; var cache
= 0; var add = function(size) { cache += size; size = size * 1024 *
1024; _cache.push(new Array(size).join(‘x’)); refresh(); }; var refresh
= function() { r.innerHTML = ‘内部存款和储蓄器消耗: ‘ + cache + ‘M’; }; return {
cache: cache + ‘M’, add: add, refresh: refresh } }; var closure =
Closure(); </script> <button onclick=”closure.add(1)”>扩张1M 内部存款和储蓄器消耗</button> <button onclick=”closure.add(10)”>扩展10M 内部存款和储蓄器消耗</button> <button onclick=”closure.add(20)”>扩大20M 内部存款和储蓄器消耗</button> <button onclick=”closure.add(50)”>增添50M 内部存款和储蓄器消耗</button> <button
onclick=”closure.add(100)”>增加 100M 内部存储器消耗</button> <div
id=”r”>内部存款和储蓄器消耗:0 M</div>

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
<script>
var Closure = function() {
  var _cache = [];
  var cache = 0;
  var add = function(size) {
    cache += size;
    size = size * 1024 * 1024;
    _cache.push(new Array(size).join(‘x’));
    refresh();
  };
  var refresh = function() {
    r.innerHTML = ‘内存消耗: ‘ + cache + ‘M’;
  };
  return {
    cache: cache + ‘M’,
    add: add,
    refresh: refresh
  }
};
var closure = Closure();
</script>
 
<button onclick="closure.add(1)">增加 1M 内存消耗</button>
<button onclick="closure.add(10)">增加 10M 内存消耗</button>
<button onclick="closure.add(20)">增加 20M 内存消耗</button>
<button onclick="closure.add(50)">增加 50M 内存消耗</button>
<button onclick="closure.add(100)">增加 100M 内存消耗</button>
 
<div id="r">内存消耗:0 M</div>

存在的打扰:这种测量检验存在非常多的干扰,比方设备档期的顺序、系统项目(iOS/Android)、和器具内部存款和储蓄器运生势况等。

2. Layers 数问题

Layers 数的获得相比麻烦,Chrome Driver
未有提供该数额的接口,近来也未尝相比较好的方法得到那么些数额。

  • 测量试验方法:通过分裂的点子成立层,旁观页面包车型大巴 Crash 情形
  • 测量试验地方:

XHTML

<style>.transform { transform: translateZ(0); } .animation {
width:100px; height:100px; background:red; position:relative;
animation:move 5s infinite; } @keyframes move { from {left:0px;} to
{left:200px;} } </style> <script> var Layer = function() {
function getType() { return
document.querySelector(‘input:checked’).value; }; return { createOne:
function(index) { var div = document.createElement(‘div’);
div.appendChild(document.createTextNode(index)); switch(getType()) {
case ‘opacity’: div.style.cssText = “opacity:” + (index / 1000); break;
case ‘transform’: div.className = ‘transform’; break; case ‘animation’:
div.className = ‘animation’; break; case ‘zindex’: div.style.cssText =
“position:relative; z-index:” + index; break; }
document.body.appendChild(div); }, create: function(num) {
[].slice.call(document.querySelectorAll(‘div’)).forEach(function(item)
{ item.parentNode && item.parentNode.removeChild(item); }); while(num–)
{ this.createOne(num); } } } }; var layer = Layer(); </script>
<strong>层类型: </strong> <ul>
<li><label><input type=”radio” checked name=”type”
value=”opacity”> <span>通过 opacity
创立层</span></label></li>
<li><label><input type=”radio” name=”type”
value=”transform”> <span>通过 transforms
创设层</span></label></li>
<li><label><input type=”radio” name=”type”
value=”animation”> <span>通过 animation
成立层</span></label></li>
<li><label><input type=”radio” name=”type”
value=”zindex”>
<span>通过相对定位分层</span></label></li>
</ul> <button onclick=”layer.create(1)”>创制 1
个层</button> <button onclick=”layer.create(10)”>创制 11个层</button> <button onclick=”layer.create(20)”>创造 二十二个层</button> <button onclick=”layer.create(50)”>创设 肆十多个层</button> <button onclick=”layer.create(100)”>创设 100
个层</button> <button onclick=”layer.create(200)”>创立 200
个层</button> <button onclick=”layer.create(500)”>创造 500
个层</button> <button onclick=”layer.create(一千)”>创设 1000个层</button> <button onclick=”layer.create(3000)”>创制 两千个层</button> <button onclick=”layer.create(5000)”>创制 四千个层</button> <button onclick=”layer.create(10000)”>创建一千0 个层</button>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>.transform {
  transform: translateZ(0);
}
.animation {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:move 5s infinite;
}
 
@keyframes move {
  from {left:0px;}
  to {left:200px;}
}
</style>
<script>
var Layer = function() {
  function getType() {
    return document.querySelector(‘input:checked’).value;
  };
  return {
    createOne: function(index) {
      var div = document.createElement(‘div’);
      div.appendChild(document.createTextNode(index));
      switch(getType()) {
        case ‘opacity’:
          div.style.cssText = "opacity:" + (index / 1000);
          break;
        case  ‘transform’:
          div.className = ‘transform’;
          break;
        case  ‘animation’:
          div.className = ‘animation’;
          break;
        case  ‘zindex’:
          div.style.cssText = "position:relative; z-index:" + index;
          break;
      }
      document.body.appendChild(div);
    },
    create: function(num) {
      [].slice.call(document.querySelectorAll(‘div’)).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num–) {
        this.createOne(num);
      }
    }
  }
};
var layer = Layer();
</script>
 
<strong>层类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="zindex"> <span>通过绝对定位分层</span></label></li>
</ul>
 
<button onclick="layer.create(1)">创建 1 个层</button>
<button onclick="layer.create(10)">创建 10 个层</button>
<button onclick="layer.create(20)">创建 20 个层</button>
<button onclick="layer.create(50)">创建 50 个层</button>
<button onclick="layer.create(100)">创建 100 个层</button>
<button onclick="layer.create(200)">创建 200 个层</button>
<button onclick="layer.create(500)">创建 500 个层</button>
<button onclick="layer.create(1000)">创建 1000 个层</button>
<button onclick="layer.create(2000)">创建 2000 个层</button>
<button onclick="layer.create(5000)">创建 5000 个层</button>
<button onclick="layer.create(10000)">创建 10000 个层</button>
  • 实则,创设多少个层,也是对内部存款和储蓄器的顶天踵地消耗,页面 Crash
    或然照旧因为内部存款和储蓄器消耗过大

3. 并发过多难点

  • 测量检验方法:尝试并发发出三种差别的央浼(Fetch必要、XHOdyssey乞请、Script/CSS 能源乞请),观望页面 Crash 情形
  • 测验地方:

XHTML

<script> var Request = function() { function getType() { return
document.querySelector(‘input:checked’).value; }; function getResource()
{ var type = getType(); var resource = { fetch: ‘/’, xhr: ‘/’, script:
‘//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js’, css:
‘//g.alicdn.com/kg/global-util/1.0.3/index-min.css’ }; return
resource[type]; }; return { emitOne: function() { var url =
getResource() + “?_t=” + (new Date * 1 + Math.random());
switch(getType()) { case ‘fetch’: return fetch(‘/’); case ‘xhr’:
with(new XMLHttpRequest) { open(‘GET’, url); send(); } return; case
‘script’: var s = document.createElement(‘script’); s.src = url;
document.body.appendChild(s); return; case ‘css’: var s =
document.createElement(‘link’); s.href = url;
document.body.appendChild(s); } }, emit: function(num) {
[].slice.call(document.querySelectorAll(‘script,link’)).forEach(function(item)
{ item.parentNode && item.parentNode.removeChild(item); }); while(num–)
{ this.emitOne(); } } } }; var request = Request(); </script>
<strong>诉求类型: </strong> <ul>
<li><label><input type=”radio” checked name=”type”
value=”fetch”> <span>使用 Fetch
发送诉求</span></label></li>
<li><label><input type=”radio” name=”type”
value=”xhr”> <span>使用 XH本田UR-V发送央求</span></label></li>
<li><label><input type=”radio” name=”type”
value=”script”>
<span>并发恳求脚本能源</span></label></li>
<li><label><input type=”radio” name=”type”
value=”css”>
<span>并发乞请样式能源</span></label></li>
</ul> <button onclick=”request.emit(1)”>并发 1
个乞求</button> <button onclick=”request.emit(10)”>并发 13个央求</button> <button onclick=”request.emit(20)”>并发 十多少个央浼</button> <button onclick=”request.emit(50)”>并发 肆十多个须求</button> <button onclick=”request.emit(100)”>并发 100
个供给</button> <button onclick=”request.emit(500)”>并发 500
个央浼</button> <button onclick=”request.emit(一千)”>并发
一千 个诉求</button>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
var Request = function() {
  function getType() {
    return document.querySelector(‘input:checked’).value;
  };
  function getResource() {
    var type = getType();
    var resource = {
      fetch: ‘/’,
      xhr: ‘/’,
      script: ‘//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js’,
      css: ‘//g.alicdn.com/kg/global-util/1.0.3/index-min.css’
    };
    return resource[type];
  };
  return {
    emitOne: function() {
      var url = getResource() + "?_t=" + (new Date * 1 + Math.random());
      switch(getType()) {
        case ‘fetch’:
          return fetch(‘/’);
        case ‘xhr’:
          with(new XMLHttpRequest) {
            open(‘GET’, url);
            send();
          }
          return;
        case ‘script’:
          var s = document.createElement(‘script’);
          s.src = url;
          document.body.appendChild(s);
          return;
        case ‘css’:
          var s = document.createElement(‘link’);
          s.href = url;
          document.body.appendChild(s);
      }
    },
    emit: function(num) {
      [].slice.call(document.querySelectorAll(‘script,link’)).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num–) {
        this.emitOne();
      }
    }
  }
};
var request = Request();
</script>
 
<strong>请求类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHR 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本资源</span></label></li>
  <li><label><input type="radio" name="type" value="css"> <span>并发请求样式资源</span></label></li>
</ul>
 
<button onclick="request.emit(1)">并发 1 个请求</button>
<button onclick="request.emit(10)">并发 10 个请求</button>
<button onclick="request.emit(20)">并发 20 个请求</button>
<button onclick="request.emit(50)">并发 50 个请求</button>
<button onclick="request.emit(100)">并发 100 个请求</button>
<button onclick="request.emit(500)">并发 500 个请求</button>
<button onclick="request.emit(1000)">并发 1000 个请求</button>
  • 存在的打扰:设备的门类、设备的 CPU 使用景况和互连网景况等。
标签:,

发表评论

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

相关文章

网站地图xml地图