您的位置:奥门新浦京网址 > Wed前段 > 开始使用Web,框架比较

开始使用Web,框架比较

发布时间:2019-11-18 18:37编辑:Wed前段浏览(54)

    开始使用Web Workers

    2012/11/28 · HTML5, JavaScript · 来源: 伯乐在线     · HTML5, Javascript

    英文原文:tutsplus,编译:伯乐在线 – 胡蓉(@蓉Flora)

    单线程(Single-threaded)运行是JavaScript语言的设计目标之一,进而言之是保持JavaScript的简单。但是我必须要说,尽管JavaScript具有如此语言特质,但它绝不简单!我们所说的“单线程”是指JavaScript只有一个线程控制。是的,这点令人沮丧,JavaScript引擎一次只能做一件事。

    “web workers处在一个严格的无DOM访问的环境里,因为DOM是非线程安全的。”

    现在,你是不是觉得要想利用下你机器闲置的多核处理器太受限制?不用担心,HTML5将改变这一切。

    JavaScript的单线程模式

    有学派认为JavaScript的单线程特质是一种简化,然而也有人认为这是一种限制。后者提出的是一个很好的观点,尤其是现在web应用程序大量的使用JavaScript来处理界面事件、轮询服务端接口、处理大量的数据以及基于服务端的响应操作DOM。

    在维护响应式界面的同时,通过单线程控制处理如此多事件是项艰巨的任务。它迫使开发人员不得不依靠一些技巧或采用变通的方法(如使用setTimeout(),setInterval(),或调用XMLHttpRequest和DOM事件)来实现并发。然而,尽管这些技巧毫无疑问地提供了解决异步调用的方法,但非阻塞的并不意味着是并发的。John Resig在他的博客中解释了为什么不能并行运行。

    限制

    如果你已经和JavaScript打过一段时间的交道,那么你一定也遭遇过如下令人讨厌的对话框,提示你有脚本无响应。没错,几乎大多数的页面无响应都是由JavaScript代码引起的。

    图片 1

    以下是一些运行脚本时造成浏览器无响应的原因:

    • 过多的DOM操作:DOM操作也许是在JavaScript运行中代价最高的。所以,大批量的DOM操作无疑是你代码重构的最佳方向之一。
    • 无终止循环:审视你代码中复杂的嵌套循环永远不是坏事。复杂的嵌套循环所做的工作常常比实际需要做的多很多,也许你可以找到其他方法来实现同样的功能。
    • 同时包含以上两种:最坏的情况就是明明有更优雅的办法,却还是在循环中不断更新DOM元素,比如可以采用DocumentFragment。

     

    JS 框架比较:AngularJS vs ReactJS vs EmberJS

    2016/12/08 · JavaScript · 1 评论 · AngularJS, EmberJS, ReactJS

    原文出处: Nataliya Orlovska   译文出处:码农网 – 小峰   

    选择最适合项目需求的JavaScript框架,可以提高你发布有竞争力的web app的能力。

    最后,你对基于JavaScript的app或网站找到了一条奇妙的思路。选择正确的框架可能对你项目的成功有着相当大的影响。它可以影响你按时完成项目并在将来维护代码的能力。JavaScript框架,如Angular.js,Ember.js或React.js,给你的代码带来结构,并保持其有序化,从而使您你的app更灵活,更具可扩展性,并更容易开发。

    图片 2

    Gumbo:Google推出纯C编写的HTML5解析器

    2013/08/15 · HTML5 · 1 评论 · HTML5

    本文由 伯乐在线 - 黄利民 翻译。未经许可,禁止转载!
    英文出处:gumbo。欢迎加入翻译组。

    Gumbo是一个 HTML5 解析算法实现,只用 C99 标准库编码实现,没有其他外部依赖。其设计目标是为其他工具和库的开发提供支持,这些工具和库包括 linters(JS检查器)、验证器、模板语言以及重构和分析工具。

     

    好帮手Web Workers

    幸好有了HTML5和Web Workers,你可以真正生成一条异步的线程。当主线程处理界面事件时,新的worker可以在后台运行,它甚至可以有力的处理大量的数据。例如,一个worker可以处理大型的数据结构(如JSON),从中提取变量信息然后在界面中显示。好了,废话不多说,让我们看一些实际的代码吧。

     

    创建一个Worker

    通常,与web worker相关的代码都放在一个独立的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker,它会异步加载并执行这个JavaScript文件。

    JavaScript

    var primeWorker = new Worker('prime.js');

    1
    var primeWorker = new Worker('prime.js');

     

    启动Worker

    要启动一个Worker,则父线程向worker传递一个信息,如下所示:

    JavaScript

    var current = $('#prime').attr('value'); primeWorker.postMessage(current);

    1
    2
    var current = $('#prime').attr('value');
    primeWorker.postMessage(current);

    父页面可以通过postMessage接口与worker进行通信,这也是跨源通信(cross-origin messaging)的一种方式。通过postMessage接口除了可以向worker传递私有数据类型,它还支持JSON数据结构。但是,你不能传递函数,因为函数也许会包含对潜在DOM的引用。

    “父线程和worker线程有它们各自的独立空间,信息主要是来回交换而不是共享。”

    信息在后台运行时,先在worker端序列化,然后在接收端反序列化。鉴于此,不推荐向worker发送大量的数据。

    父线程同样可以声明一个回调函数,来侦听worker完成任务后发回的消息。这样,父线程就可以在worker完成任务后采取些必要的行动,比如更新DOM元素。如下代码所示:

    JavaScript

    primeWorker.addEventListener('message', function(event){ console.log('Receiving from Worker: '+event.data); $('#prime').html( event.data ); });

    1
    2
    3
    4
    primeWorker.addEventListener('message', function(event){
        console.log('Receiving from Worker: '+event.data);
        $('#prime').html( event.data );
    });

    event对象包含两个重要属性:

    • target:用来指向发送信息的worker,在多元worker环境下比较有用。
    • data:由worker发回给父线程的数据。

    worker本身是包含在prime.js文件中的,它同时侦听message事件,从父线程中接收信息。它同样通过postMessage接口与父线程进行通信。

    JavaScript

    self.addEventListener('message', function(event){ var currPrime = event.data, nextPrime; setInterval( function(){ nextPrime = getNextPrime(currPrime); postMessage(nextPrime); currPrime = nextPrime; }, 500); });

    1
    2
    3
    4
    5
    6
    7
    8
    self.addEventListener('message',  function(event){
        var currPrime = event.data, nextPrime;
        setInterval( function(){
        nextPrime = getNextPrime(currPrime);
        postMessage(nextPrime);
        currPrime = nextPrime;
        }, 500);
    });

    在本文例子中,我们寻找下一个最大的质数,然后不断将结果发回至父线程,同时不断更新界面以显示新的值。在worker的代码中,字段self和this都是指向全局作用域。Worker既可以添加事件侦听器来侦听message事件,也可以定义一个onmessage处理器,来接收从父线程发回的消息。

    寻找下一个质数的例子显然不是worker的理想用例,但是在此选用这个例子是为了说明消息传递的原理。之后,我们会挖掘些可以通过web worker获得益处的实际用例。

     

    终止Workers

    worker属于占用资源密集型,它们属于系统层面的线程。因此,你应该不希望创建太多的worker线程,所以你需要在它完成任务后终止它。Worker可以通过如下方式由自己终止:

    JavaScript

    self.close();

    1
    self.close();

    或者,由父线程终止。

    JavaScript

    primeWorker.terminate();

    1
    primeWorker.terminate();

     

    安全与限制

    在worker的代码中,不要访问一些重要的JavaScript对象,如document、window、console、parent,更重要的是不要访问DOM对象。也许不用DOM元素以至不能更新页面元素听上去有点严格,但是这是一个重要的安全设计决定。

    想象一下,如果众多线程都试着去更新同一个元素那就是个灾难。所以,web worker需要处在一个严格的并线程安全的环境中。

    正如之前所说,你可以通过worker处理数据,并将结果返回主线程,进而更新DOM元素。尽管它们不能访问一些重要的JavaScript对象,但是它们可以调用一些函数,如setTimeout()/clearTimeout()、setInterval()/clearInterval()、navigator等等,也可以访问XMLHttpRequest和localStorge对象。

     

    同源限制

    为了能和服务器交互,worker必须遵守同源策略(same-origin policy)(译注:可参考国人文章同源策略)。比如,位于

     

    Google Chrome与本地访问

    Google Chrome对worker本地访问做了限制,因此你无法本地运行这些例子。如果你又想用Chrome,那么你可以将文件放到服务器上,或者在通过命令启动Chrome时加上–allow-file-access-from-files。例如,苹果系统下:

    $ /Applications/Google Chrome.app/Contents/MacOS/Google Chrome –allow-file-access-from-files

    然而,在实际产品生产过程中,此方法并不推荐。最好还是将你的文件上传至服务器中,同时进行跨浏览器测试。

     

    Worker调试和错误处理

    不能访问console似乎有点不方便,但幸亏有了Chrome开发者工具,你可以像调试其他JavaScript代码那样调试worker。

    图片 3

    为处理web worker抛出的异常,你可以侦听error事件,它属于ErrorEvent对象。检测该对象从中了解引起错误的详细信息。

    JavaScript

    primeWorker.addEventListener('error', function(error){ console.log(' Error Caused by worker: '+error.filename + ' at line number: '+error.lineno + ' Detailed Message: '+error.message); });

    1
    2
    3
    4
    5
    primeWorker.addEventListener('error', function(error){
        console.log(' Error Caused by worker: '+error.filename
            + ' at line number: '+error.lineno
            + ' Detailed Message: '+error.message);
    });

    多个Worker线程

    尽管创建多个worker来协调任务分配也许很常见,但还是要提醒一下各位,官方规范指出worker属于相对重量级并能长期运行在后台的脚本。所以,由于Web worker的高启动性能成本和高进程内存成本,它们的数量不宜过多。

     

    简单介绍共享workers

    官方规范指出有两种worker:专用线程(dedicated worker)和共享线程(shared worker)。到目前为止,我们只列举了专用线程的例子。专用线程与创建线程的脚本或页面直接关联,即有着一对一的联系。而共享线程允许线程在同源中的多个页面间进行共享,例如:同源中所有页面或脚本可以与同一个共享线程通信。

    “创建一个共享线程,直接将脚本的URL或worker的名字传入SharedWorker构造函数”

    两者最主要的区别在于,共享worker与端口相关联,以保证父脚本或页面可以访问。如下代码创建了一个共享worker,并声明了一个回调函数以侦听worker发回的消息 ,同时向共享worker传输一条消息。

    JavaScript

    var sharedWorker = new SharedWorker('findPrime.js'); sharedWorker.port.onmessage = function(event){ ... } sharedWorker.port.postMessage('data you want to send');

    1
    2
    3
    4
    5
    var sharedWorker = new SharedWorker('findPrime.js');
    sharedWorker.port.onmessage = function(event){
        ...
    }
    sharedWorker.port.postMessage('data you want to send');

    同样,worker可以侦听connect事件,当有客户端想与worker进行连接时会相应地向其发送消息。

    JavaScript

    onconnect = function(event) { // event.source包含对客户端端口的引用 var clientPort = event.source; // 侦听该客户端发来的消息 clientPort.onmessage = function(event) { // event.data包含客户端发来的消息 var data = event.data; .... // 处理完成后发出消息 clientPort.postMessage('processed data'); } };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    onconnect = function(event) {
        // event.source包含对客户端端口的引用
        var clientPort = event.source;
        // 侦听该客户端发来的消息
        clientPort.onmessage = function(event) {
            // event.data包含客户端发来的消息
            var data = event.data;
            ....
            // 处理完成后发出消息
            clientPort.postMessage('processed data');
        }
    };

    由于它们具有共享的属性,你可以保持一个应用程序在不同窗口内的相同状态,并且不同窗口的页面通过同一共享worker脚本保持和报告状态。想更多的了解共享worker,我建议你阅读官方文档。

     

    实际应用场景

    worker的实际发生场景可能是,你需要处理一个同步的第三方接口,于是主线程需要等待结果再进行下一步操作。这种情况下,你可以生成一个worker,由它代理,异步完成此任务。

    Web worker在轮询情况下也非常适用,你可以在后台不断查询目标,并在有新数据时向主线程发送消息。

    你也许遇到需要向服务端返回大量的数据的情况。通常,处理大量数据会消极影响程序的响应能力,然后导致不良用户体验。更优雅的办法是将处理工作分配给若干worker,由它们处理不重叠的数据。

    还有应用场景会出现在通过多个web worker分析音频或视频的来源,每个worker针对专项问题。

     

    结论

    随着HTML5的展开,web worker规范也会持续加入。如果你打算使用web worker,看一看它的官方文档不是坏事。

    专项线程的跨浏览器支持目前还不错,Chrome,Safari和Firefox目前的版本都支持,甚至IE这次都没有落后太多,IE10还是不错的。但是共享线程只有当前版本的Chrome和Safari支持。另外奇怪的一点是,Android 2.1的浏览器支持web worker,反而4.0版本不支持。苹果也从iOS 5.0开始支持web worker。

    想象一下,在原本单线程环境下,多线程会带来无限可能哦~

     

    译注:本人对此JavaScript技术领域并不是特别熟悉,如有误翻的地方,请大家及时批评指正,我将及时修改!!!最后,推荐两篇相关国人优秀文章

    《HTML5 web worker的使用 》

    《深入HTML5 Web Worker应用实践:多线程编程》

     

     

    英文原文:tutsplus,编译:伯乐在线 – 胡蓉(@蓉Flora)

    文章链接:

    【如需转载,请在正文中标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

     

    赞 1 收藏 评论

    Javascript场景的易变性

    Web开发的变化发生的很快。几乎每个月都会引入一个新的JavaScript框架,并且现有的框架经常被更新。由于这些框架是开放源代码的,因此世界各地的大型社区也都可以不断地使之丰满起来。因此,了解每个框架的优点和它们之间的区别并不是一件容易的事情。

    Gumbo 的目标和特性:

    • 完全符合 HTML5 规范
    • 对错误输入有健壮性和弹性
    • 简单的API,易于其他语言封装
    • 支持对源文件定位
    • 相对轻量级,无外部依赖
    • 通过所有 html5lib-0.95 测试
    • 在超过25亿的谷歌索引页面上测试过

     

    关于作者:胡蓉

    图片 4

    胡蓉:某互联网公司交互设计师。在这么一个梦想者云集的互联网乐土中,用心培育着属于自己的那一片天地。做自己热爱的,然后一直坚持下去~(新浪微博:@蓉Flora) 个人主页 · 我的文章

    图片 5

    深入Angular vs React vs Ember

    许多开发人员因为JavaScript框架的种类繁多而感到眼花缭乱——框架外观和功能非常不同。

    让我们来比较一下三个最流行和广泛使用的JavaScript框架的优势:AngularJS,ReactJS和EmberJS。

    框架

    AngularJS

    ReactJS

    Ember.js

    是什么?

    超级JavaScript MVW框架

    一个不止用于构建用户界面的JavaScript库

    一个用于创建高要求的web应用程序的框架

    建立

    由MiškoHevery建立于2009年

    创建者:Jordan Walke,2013年开源

    最初由Yehuda Katz于2007年创建叫做SproutCore,后被Facebook收购,并于2011年更名为EmberJS

    官方主页

    https://angularjs.org/

    https://reactjs.net/

    http://emberjs.com/

    Github

    https://github.com/angular/angular.js

    https://github.com/facebook/react

    https://github.com/emberjs/ember.js

    Bug 报告

    https://github.com/angular/angular.js/issues

    https://github.com/facebook/react/issues

    许可证

    MIT

    MIT

    BSD-3-Clause

    被使用的热门网站

    Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store

    Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog

    Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon

    最适合使用的地方

    构建高度活跃和交互式的Web应用程序。

    数据设置频繁更改的大型Web应用程序

    动态SPA

    非目标:

    • 执行速度。因为Gumbo是纯C编写,所以速度上有优势。虽然如此,但这并不是在拟定用途下的重要考量,也不是主要设计因素。
    • 支持 UTF-8 以外的编码。在大多数情况下,处理客户端代码之前,可以用另外的库将输入流转换为UTF-8的文本。
    • 支持 C89 标准。目前大多数主要的编译器都支持C99,主要的特例( Microsoft Visual Studio)应该能够在C++模式下编译,需要细微调整。 (欢迎报告错误)。

     

    AngularJS: 框架领域的冠军

    Angular.js是一个开源的Web应用程序框架,具有由Google提供的Model-View-Controller(MVC)架构(Angular 1)和Model-View-ViewModel(MVVM)架构(Angular 2)。它是上面提到的三个框架中最古老的。因此,它拥有最大的社区。 Angular.js通过使用指令扩展HTML的功能来解决开发SPA(单页应用程序)的问题。此框架强调让你的app快速完成和运行。

    未来可能加入的一些特性:

    • 支持近期HTML5规范变动从而支持模板标签
    • 支持分段分析
    • 全功能错误报告机制
    • 与其他语言绑定

     

    如何安装Gumbo 及其用例,请查看 Gumbo的 Github 主页:

    打赏支持我翻译更多好文章,谢谢!

    打赏译者

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:开始使用Web,框架比较

    关键词: