美文网首页web worker
为你写的网页“提速”---Web Worker

为你写的网页“提速”---Web Worker

作者: 我不叫奇奇 | 来源:发表于2016-12-21 20:39 被阅读50次

认识Web Worker

  1. Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象,worker可以让他所包含的js代码运行在后台
  • 特点:

    • 充分利用多核CPU的优势
    • 对多线程支持非常好
    • 不会影响页面的性能
    • 不能访问web页面和DOM API
    • 所有的主流浏览器均支持web worker,除了Internet Explorer
  1. Worker提供API

    1)检测当前浏览器是否支持Worker

    typeof(Worker) !== "undefined“ 
    

    2)创建Worker文件
    创建普通的 JS 文件,都可以用于 Web Worker 文件

    3)创建Web Worker对象

      var worker = new Worker("myTime.js");
    

参数就是在第二步创建的js文件的路径

  4)worker事件

* onmessage事件

用于监听 Web Worker 传递消息,通过回调函数接收传递的消息,通过回调函数的事件对象data 属性可以获取传递的消息

  • postMessage()

       w.postMessage( “worker success.” );
    

通过postMessage() 方法传递消息内容

     w.terminate();

在HTML页面中,通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。

流程:
  • 创建WebWorker对象
  • Worker对象
  • Worder事件
    * onmessage事件,当执行postMessage事件时会触发
    * postMessage()方法
    * terminate()方法

相关文章

  • 为你写的网页“提速”---Web Worker

    认识Web Worker Web Worker是 运行在后台的javascript,也就是说worker其实就是就...

  • 让Web Worker来给你的网页提提速

    前言 大家好,我是辉夜真是太可爱啦 。 我们都知道,现在的 CPU 都是多核的,性能都很高。 但是, JS 语言采...

  • web worker 处理多文件并行上传

    一 web worker: 什么是web worker Web Worker为Web内容在后台线程中运行脚本提供...

  • 关于Web Worker

    Web Worker Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 ...

  • Web Worker的使用

    什么是 Web Worker? Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主...

  • 初探 HTML5 Web Workers

    原文:初探 HTML5 Web Workers 一、Web Workers是什么 Web Worker为Web内容...

  • Service Worker 与 PWA

    Service Worker 是浏览器在后台独立于网页运行的脚本。PWA(Progressive Web App)...

  • Javascript:Web Worker基础

    参考资料Web Workersweb worker详解Blob对象 Web Worker分为专属Worker(De...

  • web worker

    web Worker web Worker 文件单独写在一个文件中,在main worker 中 执行的文件里使用...

  • Web Worker

    一、Web Worker 1. Web Worker是 运行在后台的javascript,也就是说worker其实...

网友评论

    本文标题:为你写的网页“提速”---Web Worker

    本文链接:https://www.haomeiwen.com/subject/anzqvttx.html