Worker
一、作用及使用场景
在Web应用程序中创建多线程环境,可以运行独立于主线程的脚本,从而提高Web应用的性能和响应速度。
Worker.js主要应用场景包括:
-
数据处理:在数据量较大的情况下,使用Worker可以将数据分成多个线程处理,以提高数据处理效率。
-
长时间运行任务:例如对大量的图像或视频进行处理,使用Worker可以将这些处理过程放在后台线程中运行,保持主线程的响应性。
-
提高Web应用程序的性能:使用Worker可以将一些计算密集型操作转移到后台线程中,从而释放主线程资源,提高Web应用程序的响应速度。
需要注意的是,Worker运行在与主线程相对独立的线程中,无法直接访问主线程中的DOM元素,需要通过与主线程进行通信来获取数据或操作DOM元素。
二、使用
//worker.js
self.onmessage=(event)=>{//通过postmessage传递信息
console.log(event.data)//event.data是传递的信息
postMessage(event.data)//再将信息传递回去,主线程的onmessage会监听
}
//主线程
//worker内部发送请求获取worker.js,所以无法加载本地js,另外网络资源需要同源
let worker = new Worker('/worker.js')
//传递信息到worker.js, worker.js的onmessage会监听到
worker.postMessage([data1,data2]);
//监听worker.js传过来的信息
worker.onmessage=(event)=>{
//收到worker.js传递过来的信息
console.log(event.data)
//......do something
//结束worker
worker.terminate();
}
XMLHttpRequest
一、作用及使用场景
XMLHttpRequest(XHR)是一个内置于浏览器的API,它可以在不刷新页面的情况下向服务器发送HTTP请求,并接收来自服务器的响应数据,通常用于实现AJAX(Asynchronous JavaScript and XML)。
XHR可以通过异步方式获取数据,避免了页面刷新,从而提高了Web应用程序的性能和交互性。XHR可以向服务器发送各种类型的请求,如GET、POST、PUT、DELETE等,并可以发送和接收各种数据格式,如JSON、XML、HTML、文本等。
XHR主要用于解决前端与后端数据交互的问题。通过使用XHR,前端可以向后端发送请求,获取后端返回的数据,并将其动态更新到页面上。这使得前端与后端的交互变得更加方便和高效。
要使用XHR,需要创建一个XMLHttpRequest对象,然后设置请求的URL、请求的方法和请求的数据类型等,最后发送请求。一般来说,XHR的应用场景包括但不限于以下几个方面:
-
前后端数据交互:通过XHR,前端可以向后端发送请求,获取数据,并将其展示在页面上。
-
异步加载数据:XHR可以异步方式获取数据,避免了页面刷新造成的等待时间,通过这种方式提高了Web应用程序的性能和交互性。
-
文件上传和下载:XHR可以通过POST请求方式向后端上传文件,并可以通过GET请求方式从后端下载文件。
-
跨域请求数据:XHR可以通过跨域请求方式,获取其他域名下的数据,这在前端开发中也非常常见。
总之,XMLHttpRequest是一种非常强大的前端组件,可以帮助我们解决前端与后端数据交互的问题,提高Web应用程序的性能和交互性,并且有着广泛的应用场景。
二、简单应用
//创建请求
const xhr = new XMLHttpRequest();
let url='',method='GET',data={username:'',password:''}
xhr.open(url,method);
xhr.responseType='json'
xhr.setRequestHeader('Content-Type','application/json')
xhr.onload(()=>{
//status判断请求状态
if(xhr.status>=200&&xhr.status<=300){
//xhr.response响应结果
console.log(xhr.response)
}
})
xhr.onerror((e)=>{
console.log(e)
})
xhr.send(JSON.stringify(data))