js333 > 计算机互联网 > 编译为原生WebAssembly金沙js333娱乐场:,完全支持

原标题:编译为原生WebAssembly金沙js333娱乐场:,完全支持

浏览次数:140 时间:2019-11-06

展望asp.netcoreBlazor项目c#编译为原生WebAssembly,

Blazor项目之前为微软员工Steve Sanderson创建,现在由微软的asp.net团队进行研究测试和维护,当前的Blazor项目github地址为

特别提示:Blazor目前只是一个实验性质的项目,官方提醒Blazor还不是一个可以应用到产品级的项目。

Blazor具有现代网站框架的所有部分:

用于构建可组合UI的组件模型
路由
布局
表格和验证
依赖注入
JavaScript互操作
开发期间在浏览器中实时重新加载
服务器端渲染
在浏览器和IDE中全面调试.NET
丰富的智能感知和工具
能够通过asm.js在较早的(非WebAssembly)浏览器上运行

发布和应用大小修剪

Blazor的asp.net core官方版本正在计划发布一个vs扩展,通过这个vs扩展。大家就可以使用和体验c#编译原生WebAssembly,我会持续跟进的!

如果你有空闲时间,想了解以后网站架构的发展趋势,可以去github关注Blazor项目。

Blazor项目之前为微软员工Steve Sanderson创建,现在由微软的asp.net团队进行研究测试和维护,当...

下一步?

从上面的测试例子可以看到通过 WebAssembly 可以很好的优化JS代码,不过这里的测试例子还比较简单,不能覆盖很多的情况,同时 WebAssembly 还并没有推出稳定版本,所以不要莽撞的在应用中使用 WebAssembly。但是我们可以提前试用一下,尤其已经可以在NodeJS中试用了。

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注**“前端那些事儿”,带你探索前端的奥秘。**

金沙js333娱乐场 1

构建工具可以自动运行 web 开发过程中各种不同的任务,例如预处理、编译、图片优化、代码压缩、代码检查以及运行测试。这些任务可以统一由一个单独的可执行包来管理。最受人欢迎的选项包括:

Egret Engine5.0发布:率先支持WebAssembly、完全支持 ES6、支持项目模块化升级

2017年05月25日 来源:厂商投稿 作者:厂商投稿 搞趣网官方微博

Egret Engine5.0发布,率先支持WebAssembly性能大幅提升

白鹭引擎团队历经半年封闭开发于5月24日推出 Egret Engine5.0,本次大版本更新率先支持 黑科技WebAssembly技术、完全支持 ES6、增添支持项目模块化升级等新功能,实现开发运行性能大幅提升。这些功能对于开发者都有哪些帮助,现已被一一揭晓。

一、率先支持 WebAssembly

什么是 WebAssembly?

WebAssembly是由谷歌、苹果、微软和Mozilla的工程师合力创建的最新国际前沿技术,能够运用在未来浏览器中承诺可带来20倍更快性能的字节码。WebAssembly项目创造全新的字节码(一种机器可读的指令集,能够更快为浏览器加载高级语言),让桌面和移动端浏览器相比较网页或者应用的整体源代码变得更加高效。

为什么要做 WebAssembly?

众所周知JavaScript 是解释型语言,慢,是解释性语言的主要特点。 Google 在 2009 年在 V8 中引入了 JIT 技术 (Just in time compiling 简称即时编译)。 有了JIT这个buff, Javascript 可实现瞬间提升 20 - 40 倍的速度。但是 JIT 技术也存在缺陷,在即时编译的时候有些类型无法确定,这个时候 JIT 非但没有提高效率可能适得其反,所以催生了两种思路解决这个问题。

一种思路是使用 Typescript、Dart 等强类型语言,实现所有的类型都标注清楚,可把这些语言再编译成 JavaScript 来运行。

还有一种思路就是以火狐的 Asm.js 为代表的,做一个 JavaScript 子集,利用标注的方法标注变量类型。

金沙js333娱乐场 2

Asm.js 相对于 JIT 和原生的性能对比

上图长度越短说明性能越好,可以发现 Asm.js 是远远高于 JIT 的,因为其他方式只能使 JIT 性能快一点,即让即时编译速度再快一点,而 Asm.js 已经是编译好的字节码直接运行。

WebAssembly 的工作方式如下:

金沙js333娱乐场 3

Egret Engine5.0可以直接将 H5 游戏代码编译成机器码运行,对比Egret Engine4.0版效率提升可达300%。

金沙js333娱乐场 4

在同一测试平台中,Egret Engine5.0对比Egret Engine4.0效率可提升300%

智能切换

Egret Engine5.0团队进行封闭开发期间,精心研磨着重重写了引擎底层从而支持 WebAssembly技术,为开发者提供更好的性能。如果浏览器不支持 WebAssembly ,5.0版引擎能够自动智能切换成正常 JavaScript 版本,开发者无需担忧正常使用。

二、完全支持 ES6、支持项目模块化升级

完全支持 ES6

除了黑科技 WebAssembly技术加持,Egret Engine5.0也完全支持 ES6 (JavaScript语言的下一代标准)新特性,开发效率将大幅提升,提高了代码健壮性和容错率,开发者可以随心所欲的使用 ES6 新特性。

支持项目模块化升级

同时,研发团队还对Egret Engine5.0进行了模块化分离,可以支持项目模块化升级。

例如,开发者经常反馈的声音问题,Egret Engine5.0在升级后解决了这个问题,但由于是线上项目引擎升级可能会导致不可预测的问题,所以开发者会选择谨慎升级。而Egret Engine5.0支持模块化升级后,开发中如果声音有问题可以单独升级声音模块,且不会影响其他模块的正常使用,其它模块升级则同理适用,极大的方便项目管理。

除了以上的特性外,白鹭工具团队也带来了全新的游戏创作工具 Paper,寓意轻松、快捷,致力于让大家更加高效的创作 H5 游戏。Paper 以可视化制作游戏为主,编写代码为辅,可以进一步的解放开发者。目前该款工具还处于内测阶段,正式上线时间待定,颇为值得开发者期待。

Egret Engine5.0的推出标志着 H5 开发从 JIT 方式向 WebAssembly 方式的迈进,同时也标志着向模块化管理项目的进步,白鹭引擎希望用更好的产品服务众多忠诚开发者,开发者近期可下载最新版引擎,率先触及黑科技产品带来的极致性能开发效率体验。

文中图片引用自网络,如有侵权请联系我们予以删除

这玩意儿到底好在哪?

你很可能会问:“为啥所有人都在谈论WebAssembly?”这是因为WebAssembly对于JS来说绝对是一个巨大的改进,但我们常常会问自己:“这样,就够了吗?”当然不是,WebAssembly对于浏览器来说也有着非同一般的意义。 支持WebAssembly的浏览器可以识别二进制格式的文本,它有能力编译比JS文本小得多的二进制包。 这将给web应用带来类似与本地应用的性能体验!这四不四听起来很棒啊?!如果浏览器不得不解析完整的JS代码,这将会耗去好多时间(特别是在移动平台上),而浏览器对WebAssembly格式的解码速度显然要快得多得多得多:) 下面献上JS作者BE大神的演讲视频地址(油管,需翻墙): Brendan Eich on JavaScript Taking Both the High and Low Roads - O'Reilly Fluent 2014

Lodash
类型 库
网站 lodash.com/
代码库 github.com/lodash/lodash/
当前版本 4.17.4
开发者 John-David Dalton
发布日期 2012年4月
体积 压缩后 4kb - 24kb
用于 通用于各种项目
使用率 低
Underscore
类型 库
网站 underscorejs.org/
代码库 github.com/jashkenas/underscore
当前版本 1.8.3
开发者 Jeremy Ashkenas
发布日期 2009年10月
体积 压缩后 6kb
用于 通用于各种项目
使用率 低
之所以把 Lodash 和 Underscore 放在一起讨论,是因为它们同样都提供了数以百计的 JavaScript 实用函数作来弥补原生的字符串、数、数组以及其他 JavaScript 基本对象在方法上的的不足。它们在功能上有一些重叠,因此你不会在同一个项目中同时使用这两个库。

两个数字求和

有许多的编译工具可以直接将 C, C++ 和 Rust 代码编译成 WebAssembly,这样我们就不用手写字节码了。也存在一种名为'WebAssembly AST'(简称wast)的中间代码格式,如下为一个简单的支持两个参数的求和函数 wast 代码。

(module
  (func $addTwo (param i32 i32) (result i32)
    (i32.add
      (get_local 0)
      (get_local 1)))
  (export "addTwo" $addTwo))

你可以使用这个在线工具将 wast 代码转换为 wasm 二进制代码。你也可以直接从这里下载 .wasm源码。

接下来如何用 Node.js 来运行 .wasm 文件呢?为了使用 .wasm文件,你需要通过文件模块将 .wasm 文件转换成 ArrayBuffer 格式。

const fs = require('fs');
const buf = fs.readFileSync('./addTwo.wasm');
const lib = Wasm.instantiateModule(toUint8Array(buf)).exports;

// `Wasm` does **not** understand node buffers, but thankfully a node buffer
// is easy to convert to a native Uint8Array.
function toUint8Array(buf) {
  var u = new Uint8Array(buf.length);
  for (var i = 0; i < buf.length; ++i) {
    u[i] = buf[i];
  }
  return u;
}

console.log(lib.addTwo(2, 2)); // Prints '4'
console.log(lib.addTwo.toString()); // Prints 'function addTwo() { [native code] }'

上面的 addTwo 方法与原生的 Javascript 方法相比,性能如何呢?如下为我们的测试结果:

const fs = require('fs');
const buf = fs.readFileSync('./addTwo.wasm');
const lib = Wasm.instantiateModule(toUint8Array(buf)).exports;

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

suite.
  add('wasm', function() {
    lib.addTwo(2, 2);
  }).
  add('js', function() {
    addTwo(2, 2);
  }).
  on('cycle', function(event) {
    console.log(String(event.target));
  }).
  on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  }).
  run();

function addTwo(a, b) {
  return a + b;
}

function toUint8Array(buf) {
  var u = new Uint8Array(buf.length);
  for (var i = 0; i < buf.length; ++i) {
    u[i] = buf[i];
  }
  return u;
}

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm ./addTwo.js
4
wasm x 43,497,742 ops/sec ±0.77% (88 runs sampled)
js x 66,021,200 ops/sec ±1.28% (83 runs sampled)
Fastest is js

优点:

JavaScript–Web世界的汇编语言

我们有许多面向Web应用的开发规范,这些设计优良的规范让Web开发者们的工作变得更加的简单。我们很难想象自己所创建和网站或应用没有任何规则、编程语言、框架和开发理念可以遵循。

而将所有这些事情组合到一起的Web规范有一个众所周知的名字: JavaScript !

JavaScript基本上已经成为了Web平台的标准开发语言。而随着越来越多的软件成为了Web应用,JavaScript更是获得了极大的发展。

但在过去几年,我们看到越来越多的项目问世,它们试图通过开发编译程序,将其他语言代码转化为 JavaScript,以此让开发者克服 JavaScript自身存在的一些短板。其中一些项目专注于给编程语言增加新的功能,比如微软的 TypeScript 和Google的 Dart ,或是加快 JavaScript的执行速度,例如 Mozilla 的 asm.js 项目和Google的 PNaCI 。

在默认环境下,JavaScript文档其实就是简单的文本文件,先是从服务器下载,然后由浏览器中的 JavaScript引擎解析并编译。用户可以通过Ajax技术在浏览网页时与服务器进行通信。

金沙js333娱乐场 5

在浏览器端目前是使用JavaScript来实现与用户进行动态交互等功能,虽然很多JavaScript框架都致力于性能优化,但是一套基于字节码的系统仍然会有更快更好的性能表现。

Vue.js
类型 框架
网站 vuejs.org
代码库 github.com/vuejs/vue
当前版本 2.0
开发者 Evan You
发布日期 2014年2月
体积 压缩后 19kb
用于 单页应用
使用率 低
Vue.js 是一个用于构建用户界面的轻量级渐进式的框架。其核心部分提供类似 React 的虚拟 DOM 来驱动视图层,同时它可以与其它库进行整合,也完全可以独立搭建一个完整的单页应用程序。Evan You 创造了 Vue.js,他原本是 AngularJS 的使用者,但他从 AngularJS 中抽取了他喜欢的部分进而创建了 Vue.js。

阶乘

从上面的例子,我们可以看到 WebAssembly 并没有显示出性能上的优势。接下来我们进行阶乘计算来进一步的测试:

(module
  (func $fac (param i32) (result i32)
    (if (i32.lt_s (get_local 0) (i32.const 1))
      (then (i32.const 1))
      (else
        (i32.mul
          (get_local 0)
          (call $fac
            (i32.sub
              (get_local 0)
              (i32.const 1)))))))
  (export "fac" $fac))

下面是计算 100!的测试比较结果。

const fs = require('fs');
const buf = fs.readFileSync('./factorial.wasm');
const lib = Wasm.instantiateModule(toArrayBuffer(buf)).exports;

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

suite.
  add('wasm', function() {
    lib.fac(100);
  }).
  add('js', function() {
    fac(100);
  }).
  on('cycle', function(event) {
    console.log(String(event.target));
  }).
  on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  }).
  run();

function fac(n) {
  if (n <= 0) {
    return 1;
  }
  return n * fac(n - 1);
}

function toArrayBuffer(buf) {
  var ab = new ArrayBuffer(buf.length);
  var view = new Uint8Array(ab);
  for (var i = 0; i < buf.length; ++i) {
    view[i] = buf[i];
  }
  return ab;
}

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm ./factorial.js
wasm x 2,484,967 ops/sec ±2.09% (87 runs sampled)
js x 1,088,426 ops/sec ±2.63% (80 runs sampled)
Fastest is wasm

这里我们可以看到,因为计算的复杂度上升,wasm 的优势就显示出来了。

Backbone.js 宣称自己是一个库,理由是它可以与其它项目整合。尽管我不像一些人那么武断,但我猜测大多数开发者都会认为它是一个框架。

精简的代码,更好的性能,更少的bug?

据WebAssembly的开发团队描述,使用WebAssembly意味着更少的原代码。与asm.js相比,它减少了大约25%的代码量。

WebAssembly 作为一个门新的语言,已经得到了许多 Javascript 引擎的支持。WebAssembly的目标是为了让 C 和 C++ 这样的编译型语言更容易地在浏览器上运行。而让我感到激动的特性是计算性能和内存操作上的优化,这样让 Javascript 可以实现更为快速的浮点数计算而不用等到 TC39 方案的到来。在这里,借助于 NodeJS 我将会为你展示一些初级的 WebAssembly 示例。并进行一些基本的测试示例来显示其在性能方面的影响作用。

注:文中的所有只在 Node 7.2.1 中进行了测试,并开启了 --expose-wasm参数,其它环境可能无法运行。

通过开启 --expose-wasm参数,在 NodeJS 就可以访问全局对象 Wasm, 通过它可以来创建 WebAssembly 模块。

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm
> Wasm
{ verifyModule: [Function],
  verifyFunction: [Function],
  instantiateModule: [Function],
  experimentalVersion: 11 }
>

通过 Wasm.instantiateModule() 和 Uint8Array 来创建 WebAssembly 模块。

$ ~/Workspace/node-v7.2.1-linux-x64/bin/node --expose-wasm
> Wasm.instantiateModule(new Uint8Array([0x00, 0x61, 0x73, 0x6d, 0x0b, 0x00, 0x00, 0x00]));
{}
>

为了创建一个最基本的 WebAssembly 模块,你需要传递一组 16进制的数据给 instaniateModule 来得到,如上创建的是一个最小的 WebAssembly 模块,因为每一个 .wasm 文件都必须以这一组16进制数据开始。

在较大型项目中使用它可能会使项目变得比较复杂
框架本身的开发已经放慢了
使用率已经出现衰落
其它值得关注的项目

从asm.js到WebAssembly?

asm.js 是一个JavaScript的一个严格的子集,可以被用来作为一个底层的、高效的编译器目标语言。asm.js提供了一个类似于C/C++虚拟机的抽象实现,包括一个可有效负载和存储的大型二进制堆、整型和浮点运算、高阶函数定义、函数指针等。

asm.js的思想是使用它所规定的方法来编写JavaScript代码,支持asm.js的引擎会将代码转变为十分高效的机器码。如果你是将C++代码编译为asm.js,将在浏览器端获得极大的性能提升。金沙js333娱乐场 6webassembly相较于asm.js的优势主要是涉及到性能方面。根据 WebAssembly FAQ 的描述:在移动设备上,对于很大的代码库,asm.js仅仅解析就需要花费20-40秒,而 实验 显示WebAssembly的加载速度比asm.js快了20倍,这主要是因为相比解析 asm.js 代码,JavaScript引擎破译二进制格式的速度要快得多。

Grunt

所以,WebAssembly到底是个什么鬼?

WebAssembly是一种新的字节码格式。它的缩写是".wasm", .wasm 为文件名后缀,是一种新的底层安全的二进制语法。。它被定义为“精简、加载时间短的格式和执行模型”,并且被设计为Web 多编程语言目标文件格式。 这意味着浏览器端的性能会得到极大提升,它也使得我们能够实现一个底层构建模块的集合,例如,强类型和块级作用域。(原文: And it gives us access to a set of low level building blocks, such as a range of types and operations. 这句话我实在不知如何翻译。。。) 不过别搞错了,这并不意味着WebAssmbly是为了取代 JavaScript而生哟~ 就像Bjarne Stroustup说的:“JS会活得很好,因为世界上只有两种类型的语言:一类语言被人们不断的地吐槽,而另一类语言压根儿没人用!”而 Eric Elliott 认为:“最好不要把WebAssembly仅仅当做一门编程语言,实际上它更像是一个编译器。”

库中包含的一些功能已经在在 ES2015 及后续的 JavaScript 版本中引入,因此有一定程度的冗余
AngularJS 1.x

为啥这玩意会影响每一个web开发者

因为webassembly让开发者有能力选择之前那些不能用来开发web应用的语言来进行web开发,或者他们也可以继续使用简单易用的JavaScript! W3C WebAssembly Community group给出了一些WebAssembly的用例,它们展示了WebAssembly如何使得web开发者更加轻松的工作:

  • 一些执行效率更高的语言可以被编译成在Web平台上执行的代码。

  • 提供了在浏览器端的开发者工具

  • 更加快捷的企业级应用客户端(例如:数据库)

WebAssembly的用途很多。举几个栗子:WebAssembly可以被嵌入到已经开发好的JavaScript/HTML代码中;或者某款应用的主要框架可以使用 WebAssembly 模块(如动画、可视化和压缩等),而用户界面仍然可以主要使用 JavaScript/HTML语言编写。

前端那些事

都有谁入了WebAssembly的坑?

包括Google, Microsoft,Mozilla只是这一长串名单中的少数几家公司。项目带头人们发起了 WebAssembly Community Group 这一社区,这个团队的愿景是“在一种新的,轻量的web编码格式的基础上,促进浏览器厂商们的合作.” 不过,WebAssembly项目还只是刚刚启动,虽然它有一个美妙的开头,但在WebAssembly成为一个大众认可的web标准之前,它还有很长的路要走。

近几年喜爱 jQuery 的人已经有所减少,但它对于一些并不需要太多 JavaScript 功能的项目来说仍是一个切实可行的选项。

你听说过 WebAssembly 吗?这是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 现在就让我们来看看WebAssembly到底是个啥?为什么它的出现和未来的发展跟我们每个人都息息相关,即使你并不是一个程序猿/媛~

Angurlar 2 及其后续版本与其1.x版本是完全不同的两个项目,它们也互不兼容 —— 如果当时 Google 能给 Angular 2 另取一个不同的名字可能就不会这么令人费解了吧!

金沙js333娱乐场 7

为客户端应用开发提供了单一解决方案
由于它使用了 jQuery,开发者会很快上手
良好的向后兼容性和升级选项
采用了现代 web 开发的标准
缺点:

至少在某种程度上,它将改变Web生态。

金沙js333娱乐场 8

小而简单
文档良好,易于学习
与大多数其它库与框架兼容
没有改变或扩展内建对象
在客户端和服务器端均可使用
缺点:

Angular 1.x仍然在持续开发中,但它也同时发布了 Angular 2(现在已经是 Angular 4!)。被搞糊涂了?请往下看……

Knockout.js
类型 框架
网站 knockoutjs.com
代码库 github.com/knockout/knockout
金沙js333娱乐场 ,当前版本 3.4.2
开发者 Steve Sanderson
发布日期 2010年7月
体积 压缩后 59kb
用于 单页应用
使用率 低
Knockout.js 是较老的 MVVM 框架之一。它使用观察者模式来保证用户界面与数据保持同步。它的特色在于其模板和依赖跟踪。

近年来管理大量 JavaScript 文件已经迅速成了每个项目中的例行任务。默认情况下,在浏览器中文件不会被编译,因此必须按照一定的顺序加载或者连接合并所有的依赖文件。对此现在有像 ES6 模块和 CommonJS 这样的解决方案,但浏览器对它们的支持并不好,所以一个模块打包工具就变得必不可少。

还想了解更多的项目吗?下面这些项目的流行程度可能不如上面提到的那些,但也是值得关注的:

分发包的体积较小
学习难度不高,网上可找到大量的帮助信息
语法简洁
容易扩展
缺点:

体积小,轻量级,不那么复杂
不会向 HTML 中添加逻辑
文档非常好
被许多应用程序采用,例如 Trello、WordPress.com、LinkedIn 和 Groupon。
缺点:

金沙js333娱乐场 9

Vue.js 使用 HTML 模板语法来绑定 DOM 和数据。其模型则是普通的 JavaScript 对象,当数据发生变化时,模型会去更新视图。它也提供了一些辅助性的工具,提供诸如脚手架、路由、状态管理及动画等功能。

Gulp.js
网站 gulpjs.com
代码库 github.com/gulpjs/gulp
当前版本 3.9.1
月下载量 300万
Gulp 尽管并非第一个任务执行工具,但它迅速成为了最受欢迎的选择并且我个人也非常喜欢它。Gulp 通过非常易读的 JavaScript 代码将源文件加载到流中,并将其通过管道在不同插件之间流转,然后输出。它很简单、快速而且有趣 —— 建议你在选择其它选项之前一定要试一试 Gulp.js。

Angular
类型 框架
网站 angular.io
代码库 github.com/angular/angular.js
当前版本 4.1
开发者 Google
发布日期 2016年9月
体积 压缩后 450kb
用于 单页应用
使用率 低
Angular 2.0 发布于2016年9月。它名为2.0,其实是一个完全重写的版本。项目引入一个模块化的基于组件的模型,并用 TypeScript(再编译为 JavaScript)写成。2017年3月4.0版本发布(由于一些语义化版本上的问题,3.0版本被直接跳过了),这更增加了在版本上的混乱。

Grunt
网站 gruntjs.com
代码库 github.com/gruntjs/grunt
当前版本 1.0.1
月下载量 200万
Grunt 是最早被大范围使用的 JavaScript 任务执行器之一,但是由于运行速度不佳和 JSON 配置复杂,导致被 Gulp 赶超。现在的 Grunt 已经解决了这些原本很糟糕的问题,所以它仍然是一个受欢迎的选择。

优点:

优点:

得到了几个大公司的采用
它为构建现代 web 应用提供了一套单一而完整的解决方案
它是“标准”的 MEAN 技术栈(MongoDB、Express JS、AngularJS 和 NodeJS)中的一个组成部分
缺点:

优点:

还是一个比较新的项目 —— 这可能意味着较大的风险
依赖于作者一个人维护这个项目
与其它竞争者相比,资源较少
Backbone.js

React
类型 库
网站 facebook.github.io/react/
代码库 github.com/facebook/react
当前版本 15.5.4
开发者 Facebook 及其他贡献者
发布日期 2013年3月
体积 压缩后 21kb
用于 单页应用
使用率 低
这可能是过去一年中被讨论最多的库了。React 宣称自己是一个用于创建用户界面的 JavaScript 库。它主要关注模型-视图-控制器(MVC)开发中的“视图”部分,使用 React 可以更为容易地创建具有状态的用户界面组件。它首创性地实现了虚拟 DOM,这是一种内存中的数据结构可以通过比较结构的变化来更有效率地更新页面。

Ember.js
类型 框架
网站 emberjs.com
代码库 github.com/emberjs/ember.js
当前版本 2.15.0
开发者 Ember team
发布日期 2011年12月
体积 压缩后 95kb
用于 单页应用
使用率 低
Ember.js 是基于模型—视图—视图模型(MVVM)模式的大型框架之一。它在一个单一包内实现了模板、数据绑定以及其它库的功能。具有 Ruby on Rails 经验的人会对它所倡导的约定优于配置的概念感到很熟悉。

优点:

优点:

与其它竞争者相比学习曲线更为陡峭
庞大的代码体积
无法从 Angular 1.x 升级
与其 1.x 版本相比,人们对 Angular 2.x 的接受和使用程度要低得多
同样,尽管作为一个 Google 项目,但 Google 自己并没有使用它?
Vue.js

优点:

优点:

与其它竞争者像 AngularJS 相比,抽象的层次较低(尽管这可能也是个优点)
需要由额外的组件来实现像数据绑定这样的功能
现在越来越多的框架已经不再使用 MVC 架构
Ember.js

jQuery
类型 库
网站 jquery.com
代码库 github.com/jquery/jquery
当前版本 3.2.1
开发者 jQuery 团队
发布日期 2006年8月
体积 压缩后 30kb
用于 通用于各种项目
使用率 72.4%的网站
jQuery一直是有史以来使用最多的 JavaScript 库,它还被包含在 WordPress、ASP.NET 和几个其它框架中一同分发。jQuery 引入了 CSS 选择器进行 DOM 节点的获取,并可以通过链式调用挂载事件处理器、执行动画以及 Ajax 操作,这些都对客户端开发产生了革命性的影响。

它也是一个用于构建现代 web 应用程序的单一而完整的解决方案
也仍是所谓 MEAN 技术栈的组成部分,尽管 Angular 2+ 的教程要比1.x版本少得多
对于那些熟悉 C# 和 Java 这种静态类型语言的人来说,用 TypeScript 作为开发语言也意味着是一种优点
缺点:

Webpack
网站 webpack.js.org
代码库 github.com/webpack/webpack
当前版本 2.5.1
月下载量 600万
Webpack 支持所有流行的模块形式,已经变成了 React 开发过程的标配。Webpack 虽然宣称自己是一个模块打包工具,但它也可以被用作一般的任务执行工具。

npm
网站 npmjs.com
代码库 github.com/npm/npm
当前版本 4.5.0
月下载量 300万
npm 是 Node.js 的包管理器,但它在脚本方面的能力可以被用于任务执行。npm 脚本对于依赖较少的简单项目非常有吸引力,但当面对复杂任务时它很快就会变成了一个不可行的选择了。

RequireJS

Browserify

Browserify
网站 browserify.org
代码库 github.com/substack/node-browserify
当前版本 14.3.0
月下载量 260万
Browserify 支持 Node.js 所使用的 CommonJS 模块,它把所有模块编译成一个单独的可在浏览器中执行的文件。

jQuery

Webpack

RequireJS
网站 requirejs.org
代码库 github.com/jrburke/r.js
当前版本 2.3.3
月下载量 100万
RequireJS 是一个运行在浏览器中的模块加载工具,它也可以在 Node.js 中使用。

本人长期维护的前端公众号欢迎大家关注

工具:模块打包

分发包的体积大
相对于其它框架正在朝着小型组件化结构的方向变化,人们认为 Ember.js 比较庞大且不可分割
学习曲线更为陡峭
Knockout.js

体积小,效率高,快速,灵活
简单的组件模型
良好的文档和线上资源
可以在服务器端渲染
当前非常受欢迎,正处于快速上升阶段
缺点:

React 的使用率统计数据较低可能是因为它主要被用在应用程序而不是网站中。大约有38%的开发者宣称他们正在使用 React.

体积小,轻量级,无依赖
优异的浏览器兼容性,甚至支持 IE6
良好的文档
缺点:

人们接受它很快,并且受欢迎程度一直在增加
容易上手,开发者满意度高
依赖少,性能好
缺点:

AngularJS
类型 框架
网站 angularjs.org
代码库 github.com/angular/angular.js
当前版本 1.6.4
开发者 Google
发布日期 2010年10月
体积 144kb
用于 单页应用
使用率 低
Angular 是这份列表中出现的第一个框架(或者说MVC 应用框架)。其最流行的的版本是1.x,它扩展了 HTML 使之具备双向绑定能力,从而将 DOM 操作与应用程序逻辑解耦。

Backbone.js
类型 框架
网站 backbonejs.org
代码库 github.com/jashkenas/backbone/
当前版本 1.3.3
开发者 Jeremy Ashkenas
发布日期 2010年10月
体积 压缩后 8kb
用于 单页应用
使用率 低
MVC 结构一般都出现在服务器端框架中,Backbone.js 则是最早提供客户端 MVC 的框架之一。它唯一的依赖就是其作者的另一个项目 Underscore.js。

需要学习新的概念和语法
必须依赖于构建工具才能使用
可能需要其它的库或框架来提供模型和控制器部分
可能与其它会改变 DOM 的代码和库不能兼容
Lodash 和 Underscore

npm

它们在客户端上的使用率并不是太高,但它们也都可以用在 Node.js 应用中,从而工作在服务器端。

Gulp.js

与使用原生 API 相比有性能损失
现在浏览器的兼容性问题已经得到了改善,所以它在这方面的价值显得不那么重要了
使用率不再增长了
业界已经出现了一些反对滥用 jQuery 的意见
React

下列项目按照流行程度排序……

优点:

Polymer :一个使浏览器支持 HTML5 web 组件的库,并且可以跨浏览器工作
Meteor :一个用于开发 web 应用程序的全栈式平台
Aurelia :一个非常新的、轻量级的、跨平台的框架
Svelte :一个非常新的项目,可以将框架代码转换成清晰的 JavaScript 代码
Conditioner.js :一个新的库,能够根据状态自动加载和卸载模块
工具:任务执行

与其它竞争者相比学习曲线更为陡峭
庞大的代码体积
无法升级到 Angular 2.x
尽管由 Google 开发,但 Google 并不在自己的产品中使用它?
Angular 2.x(现在是4.x)

本文由js333发布于计算机互联网,转载请注明出处:编译为原生WebAssembly金沙js333娱乐场:,完全支持

关键词:

上一篇:没有了

下一篇:inotify实现数据的实时备份,inotify实时数据的同步