webpack异步加载_webpack配置按需加载

webpack异步加载_webpack配置按需加载异步一定有一个回调函数 1、实现js和html分离 2、js脚本中执行postMessage,回调函数才会生效 3、回调函数的参数为一个对象,对象的data属性是js脚本中postMessage的参数 使用步骤 new对象=newWorker(‘异步执行的js文件路径’); 对象.onmessage=function(回调对象){通过对象.data调用postMessage返…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一个异步的脚本,不会阻塞浏览器渲染,运行在另一个全局上下文中,不能使用window

特点:
	.仅仅能被首次生成它的脚本使用,只能服务于新建它的页面,不同页面之间不能共享同一个 Web Worker。
	.当页面关闭时,该页面新建的 Web Worker 也会随之关闭,不会常驻在浏览器中
	.必须与主线程的脚本文件同源
	.不能直接操作DOM节点
	.不能使用window对象的默认方法和属性(如alert、confirm等)
	.传输数据并不是被共享而是被复制。
	.在同源的父页面中,workers可以依次生成新的workers
	.线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络

	.可以使用大量window对象之下的东西,包括WebSockets,IndexedDB以及FireFox OS专用的Data Store API等数据存储机制


基本使用:
	if (window.Worker) {
	  const worker=new Worker(url,options)
	}
			
	url:表示worker将执行的脚本的URL、路径、类似blob这样的url,它必须遵守同源策略。
	options:
		type:该值可以是 classic 或 module. 如果未指定,将使用默认值 classic.
		credentials:用以指定 worker 凭证,可以是 omit, same-origin,或 include。如果未指定,或者 type 是 classic,将使用默认值 omit (不要求凭证)
		name:在 DedicatedWorkerGlobalScope 的情况下,用来表示 worker 的 scope 的一个 DOMString 值,主要用于调试目的

事件监听:
	self:表示在worker内部使用的内置全局变量
	
	(1)worker.onmessage、self.onmessage
	
		var myWorker = new Worker('worker.js');
		
		first.onchange = function() {
		  myWorker.postMessage([first.value,second.value]);
		  console.log('Message posted to worker');
		}
		
		myWorker.onmessage = function(e) {
		  result.textContent = e.data;
		  console.log('Message received from worker');
		}
		
		//worker.js
		self.onmessage = function(e) {
		  console.log('Message received from main script');
		  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
		  console.log('Posting message back to main script');
		  self.postMessage(workerResult);
		}
		
 	(2)错误监听
 		worker.onmessageerror、self.onmessageerror 数据序列化、反序列化错误时触发
 		worker.onerror、self.onerror	运行中错误
 	
 	(3)监听在线、短线情况(可能存在兼容性问题)
 		self.onoffline=fn
 		self.ononline=fn
 
属性:
	self.name 		获取worker名称,即options中传入的name
	self.location	获取类似浏览器url内容的location
	self.navigator	获取navigator对象
	

方法:
	(1)发送消息
		worker.postMessage(data,[Transferable])、self.postMessage(data,[Transferable])
			第二个参数为Transferable对象数组,意味着对象在内存中的位置也会被转移,即零拷贝转移
			支持可转移的对象有:
				ArrayBuffer、MessagePort、ReadableStream、WritableStream、TransformStream、AudioData、ImageBitmap、VideoFrame、OffscreenCanvas
			多线程共享的内存:
				SharedArrayBuffer
				通过Atomics对象提供原子操作能力,解决多线程访问共享数据会出现数据竞争问题
	
	(2)终止worker
		worker.terminate();
		self.close();
	
	(3)向当前worker的作用域导入一或更多条脚本
		self.importScripts('foo.js', 'bar.js',...);
		也可用作JSONP
			function MakeServerRequest() 
			{
			    importScripts("http://SomeServer.com?jsonp=HandleRequest");
			} 
			
			JSONP回调
			function HandleRequest(objJSON) 
			{
			    postMessage("Data returned from the server...FirstName: " 
			                  + objJSON.FirstName + " LastName: " + objJSON.LastName);
			} 

Jetbrains全家桶1年46,售后保障稳定

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>

	<link rel="stylesheet" href="iconfont/iconfont.css">
	<link rel="stylesheet" href="css/1.css" type="text/css">
	<script src='jq/jquery-3.4.1.js'></script>
	<script src="js/bootstrap.min.js"></script>
	<script src='js/swiper.jquery.min.js'></script>
	<script src="js/swiper.animate1.0.2.min.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.min.css">

	<style>

	
	
	</style>
</head>
<body>
	
	<button>开启webWorker</button>
	<script>
	var num=1;
	var timer=null;
	timer=setInterval(function(){ 
   
		console.log(num++);
	},1000)

	document.querySelector('button').onclick=function(){ 
   
		var worker=new Worker('js/text1.js');
		worker.onmessage=function(eve){ 
   
			console.log(eve.data);
		};
	};
	</script>
	
</body>

</html>

异步js文件:

setTimeout(function(){ 
   

	console.log(22+'hh');
	//写了postMessage回调函数才会执行
	postMessage('黑皇');
},5000)

通过BlobURL实现:

var myTask = ` onmessage = function (e) { var data = e.data; data.push('hello'); console.log('worker:', data); // worker: [1, 2, 3, "hello"] postMessage(data); }; `;

var blob = new Blob([myTask]);
var myWorker = new Worker(window.URL.createObjectURL(blob));

myWorker.onmessage = function (e) { 
   
    var data = e.data;
    console.log('page:', data); // page: [1, 2, 3, "hello"]
    console.log('arr:', arr); // arr: [1, 2, 3]
};

var arr = [1,2,3];
myWorker.postMessage(arr);

通过DataURL实现:

// 由于Data URL的内容为必须压缩为一行,因此JavaScript无法利用换行符达到分号的效果。 
const script = `addEventListener('message', event => { console.log(event.data); postMessage('echo'); }`                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
const worker = new Worker(`data:,${ 
     script}`)                                                                                                                                                                                              
// 或 const worker = new Worker(`data:application/javascript,${script}`) 
worker.onmessage = event => console.log(event.data)                                                                                                                                                                                       
worker.postMessage('main thread')  

worker线程轮询

function createWorker(fn){ 
   
    const blob = new Blob([fn.toString()])
    const url = window.URL.createObjectURL(blob)
    const worker = new Worker(url)
    return worker
}

const webWorker = createWorker(function(){ 
   
    let cache;
    
    function compare(new, old){ 
    ... }
    
    setInterval(()=>{ 
   
        fetch('/api/xxx').then(res=>{ 
   
            let data = res.data
            if(!compare(data, cache)){ 
   
                cache = data
                self.postMessage(data)
            }
        })
    },1000)
})


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200794.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • jvm的垃圾回收算法_jvm垃圾回收策略

    jvm的垃圾回收算法_jvm垃圾回收策略前言相比C语言,JVM虚拟机一个优势体现在对对象的垃圾回收上,JVM有一套完整的垃圾回收算法,可以对程序运行时产生的垃圾对象进行及时的回收,以便释放JVM相应区域的内存空间,确保程序稳定高效的运行,但在真正了解垃圾回收算法之前,有必要对JVM的对象的引用做一个简单的铺垫JVM对象可达性分析算法Java虚拟机中的垃圾回收器采用可达性分析来探索所有存活的对象扫描堆中的对象,看是否能够沿着GCRoot对象为起点的引用链找到该对象,找不到表示可以被回收想象一下,对象在什么情况下会被认为是垃圾对象呢?

  • Effective STL笔记

    Effective STL笔记

  • soapclient php 扩展,PHP扩展—SOAP[通俗易懂]

    soapclient php 扩展,PHP扩展—SOAP[通俗易懂]一、概述及安装SOAP扩展可以用于编写SOAP服务器和客户端,支持SOAP1.1,SOAP1.2和WSDL1.1规格的子集。此扩展需要libxmlPHP扩展。这表示需要使用–enable-libxml,尽管这将隐式完成因为libxml是缺省开启的。要开启SOAP支持,配置PHP时要加上–enable-soap.二、相关函数is_soap_fault—…

  • 在线客服系统源码(PHP完全开源版)

    在线客服系统源码(PHP完全开源版)在线客服系统软件使开发和运营团队能够高速协作,因此要求源码系统能够快速响应业务变化,并快速提供出色的客户和员工服务体验。  在线客服源码演示及获取:https://gitee.com/wang_li989/kfxt  客服沟通问题加起来会成为重大的财务损失。您的组织快速有效地解决这些问题的能力直接影响到未满足的SLA义务和客户体验,这两个方面对公司的成功至关重要。在线客服系统是企业战略的核心组成部分。通过减少识别和解决问题所需的时间,您的组织可以提高客户忠诚度,最大限度地延长正常运行时间,并提供始终如

  • DeepLab v3_deeplab模型导出

    DeepLab v3_deeplab模型导出大年初一我居然在更博客。今年过年由于病毒横行,没有串门没有聚餐,整个人闲的没事干。。。医生真是不容易,忙得团团转还有生命危险,新希望他们平安。本篇不属于初级教程。如果完全看不懂请自行谷歌或搜索作者博客。deeplab官方提供了多种backbone,通过train.py中传递参数,–model_variant=”resnet_v1_101_beta”\可以更改backbone。…

  • linux下线刷硬盘

    linux下线刷硬盘

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号