【HTML5高级第二篇】WebWorker多线程、EventSource事件推送、History历史操作

文章目录

    • 一、多线程
      • 1.1 概述
      • 1.2 体会多线程
      • 1.3 多线程中数据传递和接收
    • 二、事件推送
      • 2.1 概述
      • 2.2 onmessage 事件
    • 三、history

一、多线程

1.1 概述

前端JS默认按照单线程去执行,一段时间内只能执行一件事情。举个栗子:比方说古代攻城游戏,带来十万大军,先让1000人去当炮灰(攻城),其他人就在后面看着等着,然后炮灰燃尽(这1000人攻城失败),然后第二批敢死队继续攻城,其他人还是等着…依次类推,最后十万大军败阵下来。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

这样的话就会造成一个问题,如果将一个比较复杂的js放到html前面去加载,这个js需要大量的时间进行运算,那么就会造成页面的阻塞。这样用户体验会特别不好。

html代码:

<script src="factorial.js"></script>
<body><button>click me</button>
</body>

factorial.js代码:

function feiBo(n){if(n === 1 || n === 2)return 1;return feiBo(n-1) + feiBo(n-2);
}console.log(feiBo(50))

为了解决这个问题,HTML5中新增了 Worker 函数,来开启额外的线程。这样就相当于多线程操作,在同一个时间内可以执行多个任务。

<script>new Worker("factorial.js");
</script>
<body><button>click me</button>
</body>

报错:

在这里插入图片描述

这时 Worker 函数需要开启服务才可以正常使用,开启服务的命令:node server

找到 server.js 所在目录,运行开启服务的命令即可

1.2 体会多线程

html中嵌入的js代码:

new Worker("out.js");setTimeout(function(){alert("打扰一下...3秒到了...请付费体验....")
},3000)

out.js代码:

var count = 1;
setInterval(function(){console.log(count++);
},1000)

1.3 多线程中数据传递和接收

js 文件通过script[src]引入 js中this指向window

在这里插入图片描述

但是我们通过 Worker 函数开启的额外线程中的 js ,this不再指向 window。this指向开辟的额外线程的全局对象

在这里插入图片描述

上面额外线程的全局对象中,有一个方法 postMessage ,可以在当前线程内向主线程发送数据

额外线程代码:

function feiBo(n){if(n === 1 || n === 2)return 1;return feiBo(n-1) + feiBo(n-2);
}console.log("开始计算...");
postMessage(feiBo(40));//向主线程发送数据
console.log("计算完成....")

主线程:

var wk = new Worker("out.js");
console.log(wk);//打印额外线程对象

在这里插入图片描述

发现有和额外线程全局对象两个相同的事件,onmessage onerror

//onmessage 事件 用于接收数据
wk.onmessage = function(e){console.log(e);
}

在这里插入图片描述

事件对象中有一个data属性,存储额外线程传递过来的数据:

二、事件推送

2.1 概述

一般情况下,前端向服务器发送请求,服务器接收到请求,响应数据给前端,在浏览器对这些数据进行渲染,然后链接断开(无状态链接)。这时,服务端想要主动给前端返回数据,这是不可能的。所以,在HTML5中,新增加一个 EventSource 构造函数,用于从后台数据,参数是访问路径,这个路径和接口一样,是前后端一起研究讨论出来的。

//创建EventSource对象  创建完对象后  NetWork面板中可以看到,每隔1-3秒,后台不停的向前端推送数据
new EventSource('/hehe');

在这里插入图片描述

var es = new EventSource('/hehe');
console.log(es);

在这里插入图片描述

2.2 onmessage 事件

onmessage 事件:用于接收数据。接收的数据存储在事件对象的data属性中。

获取指定路径推送过来的数据,渲染到页面

<ul id="list"></ul>
<script>var list = document.getElementById('list');//创建EventSource对象  创建完对象后  NetWork面板中可以看到,每隔1-3秒,后台不停的向前端推送数据var es = new EventSource('/hehe');console.log(es);//onmessage 用于在前端接收数据es.onmessage = function(e){// console.log(e)// console.log(e.data)var li = document.createElement("li");li.innerHTML = e.data;list.appendChild(li);}
</script>

三、history

  • go() 该方法用于跳转到历史记录列表中指定位置

  • forward()该方法用于加载历史记录列表中的下一个URL

    调用该方法等价于点击了前进按钮或者是调用了history.go(1)

  • back() 该方法用于加载历史记录列表中的上一个URL

    调用该方法等价于点击了后进按钮或者是调用了history.go(-1)

  • pushState() 该方法用于向历史记录中添加新的历史记录

    history.pushState(obj, title, url) 参数概述

    • obj: 添加的数据 是一个对象
    • title: 新的网页标题 一般省略
    • url: 新的网页的url
  • replaceState() 该方法用于替换当前的历史记录

    history.replaceState(obj, title, url) 参数概述

    • obj: 添加的数据 是一个对象
    • title: 新的网页标题 一般省略
    • url: 新的网页的url
    history.pushState(111,"",'index.html#aaa');
    history.pushState(222,"",'index.html#bbb');
    history.pushState(333,"",'index.html#ccc');
    history.pushState(444,"",'index.html#ddd');// history.replaceState(555,"","index.html#eee")// 监测历史记录的改变
    window.onpopstate = function(e){console.log(e)console.log("状态改变...")//只有通过 前进 后退箭头 或者history.back()  history.forword() history.go() 方法操作才能获取传递的值console.log("传递的数据在state中:",e.state);
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins自动构建(Gitee)

Gitee简介安装JenkinsCLI https://blog.csdn.net/tongxin_tongmeng/article/details/132632743 安装Gitee jenkins-cli install-plugin gitee:1.2.7 # https://plugins.jenkins.io/gitee/releases获取安装命令(稍作变更) JenkinsURL Dashboard-->配置-->Jenkins Locatio…

鸿蒙系列-如何使用好 ArkUI 的 @Reusable?

如何使用好 ArkUI 的 Reusable&#xff1f; OpenHarmony 组件复用机制 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为 系统组件&#xff0c;由开发者定义的称为 自定义组件。 在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合…

NIO原理浅析(三)

epoll 首先认识一下epoll的几个基础函数 int s socket(AF_INET, SOCK_STREAM, 0); bind(s, ...); listen(s, ...);int epfd epoll_create(...) epoll_ctl(epfd, ...); //将所有需要监听的socket添加到epfd中while(1) {int n epoll_wait(...);for(接受到数据的socket) {//处…

Kotlin 环境下解决属性初始化问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

react使用hook封装一个tab组件

目录 react使用hook封装一个tab组件Tabbar.jsx使用组件效果 react使用hook封装一个tab组件 Tabbar.jsx import PropsTypes from "prop-types"; import React, { useEffect, useState } from react; export default function Tabbar(props) {const { tabData , cur…

使用pip下载第三方软件包报错超时处理方法

报错如下&#xff1a; WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by ‘ReadTimeoutEr ror(“HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Read timed out. (read timeout15)”)’: /p…

Maven编译java及解决程序包org.apache.logging.log4j不存在问题

1、首先新建一个文件夹&#xff0c;比如hello Hello里新建pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…

git快速使用

1、下载git 设置签名 2、基本概念 工作区&#xff1a;写代码的地方。 暂存区&#xff1a;.git的.index 工作区&#xff1a;.git 3、常用操作 本地codinggit init&#xff0c; 初始化一个本地仓库&#xff0c;项目根目录下会出现个.gitgit remote add origin gitgithub.com…

[杂谈]-快速了解LoRaWAN网络以及工作原理

快速了解LoRaWAN网络以及工作原理 文章目录 快速了解LoRaWAN网络以及工作原理1、LoRaWAN网络元素1.1 终端设备&#xff08;End Devices&#xff09;1.2 网关&#xff08;Gateways&#xff09;1.3 网络服务器&#xff08;Net Server&#xff09;1.4 应用服务器&#xff08;Appli…

OpenCV(二十一):椒盐噪声和高斯噪声的产生

目录 1.图像噪声介绍 2.椒盐噪声的产生 3.高斯噪声的产生 1.图像噪声介绍 噪声介绍 图像噪声是指在图像中存在的不期望的、随机的像素值变化&#xff0c;这些变化来源于多种因素。噪声可能导致图像细节模糊、失真或难以分辨。 以下是几种常见的图像噪声类型&#xff1a; 1…

Unity中神秘的Transform和transform(小写)的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…

Mac Homebrew中常用的 Brew 命令

Mac 中常用的 Brew 命令集 Brew&#xff08;Homebrew&#xff09;是一个强大的包管理器&#xff0c;用于在 macOS 上安装、更新和管理各种软件包。它使得在 Mac 上安装开发工具、应用程序和库变得轻松和便捷。本博客将介绍一些在 Mac 中常用的 Brew 命令&#xff0c;以帮助您更…

【Springcloud】Sentinel熔断和降级

【Springcloud】Sentinel熔断和降级 【一】基本介绍【1】什么是熔断和降级【2】为什么使用熔断和降级【3】Sentinel熔断和降级【4】核心概念 【二】下载方式【1】Windows平台安装包下载【2】打开控制台 【三】使用案例【1】添加依赖【2】添加Sentinel配置【3】添加TestUserCont…

线上问诊:数仓开发(一)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 文章目录 系列文章目录前言一、Hive on yarn二、数仓开发1.ODS开发2.DIM开发3.DWD开发 总结 前言 上次我们已经将MYSQL的数据传送到了HDFS&#xff0c;但…

commet与websocket

commet与websocket Comet 前言 Comet是一种用于web的技术&#xff0c;能使服务器能实时地将更新的信息传送到客户端&#xff0c;而无须客户端发出请求&#xff0c;目前有两种实现方式&#xff0c;长轮询和iframe流。 实现方式 长轮询 长轮询是在打开一条连接以后保持&…

关于HarmonyOS元服务的主题演讲与合作签约

一、感言 坚持中&#xff0c;总会有很多意想不到的收获。 前几次参与HDC时更多的是观众、开发者、专家的身份&#xff0c;以参观、学习、交流为主。 通过几年的努力&#xff0c;和HarmonyOS功能成长&#xff0c;在2023年的HDC大会中&#xff0c;有了我的演讲&#xff0c;并带领…

无涯教程-Android Mock Test函数

本节介绍了与 Android 相关的各种模拟测试。您可以在本地计算机上下载这些样本模拟测试,并在方便时离线解决。每个模拟测试均随附一个模拟测试键,可让您验证最终分数并为自己评分。 Mock Test I Mock Test II Mock Test III Mock Test IV Q 1 -什么是Android&#xff1f; A -A…

VMware虚拟机安装CentOS6.9设置静态ip

1.设置虚拟网络编辑器 点击编辑–>虚拟网络编辑器 2.更改系统网络适配器选项 这里的子网掩码与网关&#xff0c;与第一步的一致 3.修改虚拟机主机名 vi /etc/sysconfig/networkNETWORKINGyue HOSTNAMEchen4.配置IP映射 vi /etc/hosts192.168.121.138 chen5.配置网卡…

PyQt5报错Process finished with exit code -1073740791 (0xC0000409)

点击按钮之后&#xff0c;就直接退出程序&#xff0c;控制台出现一个提示&#xff1a;解决办法&#xff1a; 在PyCharm中打开Run菜单&#xff0c;找到Edit Configurations进入&#xff0c;勾选Emulate terminal in output console即可。 然后再运行一下程序&#xff0c;就可以…

Sublime Text汉化,主打简单明了

在Sublime中设置中文的步骤如下&#xff1a; 1.打开Sublime Text&#xff0c;使用快捷键ShiftCtrlP&#xff08;MacOS下cmdShiftP&#xff09;&#xff0c;弹出查找栏。 2.在搜索框中输入关键字"install"&#xff0c;出现下拉选项&#xff0c;点击选择其中的"P…