web学习笔记(二十六)

news2025/1/19 22:17:27

目录

1.JS执行队列

1.1JS是单线程

1.2Web Worker

1.3同步和异步

1.4JS执行机制

2.location对象

2.1什么是location对象

2.2url包含的信息

 2.3location对象属性

2.4location对象的方法 

3.navigator对象和history对象 

3.1navigator对象

3.2history对象 


 

1.JS执行队列

1.1JS是单线程

        JavaScript语言的一大特点就是单线程,也就是说,同一时间只能做一件事情。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作D0M而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

       单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果 JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

1.2Web Worker

        为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步 和异步。Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面 。当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

Web Worker:在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行,当子线程执行完毕之后再回到主线程上,在这个过程中并不影响主线程的执行过程

        web worker 对象的出现 ,就是为了javascript创造多线程环境(同一时间能做多件事),语序主线程创建worker线程,将一些任务分配给后者运行。在主线程运行的同时,worker线程(外部的j其他s文件)在后台运行,两者互不干扰。一个worker是使用一个构造函数创建的一个对象

1.3同步和异步

   同步:前一个任务结束,才能执行下一个任务。代码执行循序和任务排列是一致的。同步任务都在主线程上执行,形成一个执行栈

    异步:在做一个任务时,如果时间长,还可以同时做另一个任务,主线程和子线程同步进行。

js的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:

  1.  普通事件,如click, resize等
  2.  资源加载,如load、error等
  3.  定时器,包括 setInterval, setTimeout 等

1.4JS执行机制

(1)先执行执行栈中的同步任务

(2)异步任务(回调函数)放入任务队列中。

(3)当执行栈中所有的同步任务执行完毕,系统就会按照次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈(即放到执行栈的最后),开始执行。

(4)类似异步任务放入高速的临时停车点。

事件循环: 主线程不断地重复获取任务,执行任务,再获取任务,这种机制叫事件循环。

2.location对象

2.1什么是location对象

 location是window的属性,但本身也是一个对象。用于获取或者设置窗体的Url,并且可以拿来解析url。

2.2url包含的信息

url叫统一资源定位符,其实就是文件的地址,每个文件的·地址都是唯一的。

URL的一般语法格式为:

http://www.baidu.cn/index.html?name=ryan&pwd=168#link

组成

说明

protocol

通信协议常用的http,ftp,maito等

host

主机(域名) www.baidu.com

port

端口号可选,省略时使用方案的默认端口如http的默认端口为80

path

路径由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址

query

参数 以键值对的形式,通过&符号分隔开来

fragment

片段#后面内容常见于链接锚点

 2.3location对象属性

2.4location对象的方法 

location对象方法

返回值

location.assign()

跟href—样,可以跳转页面(也称为重定向页面)

location.replace()

替换当前页面,因为不记录历史,所以不能回退页面

location.reload()

重新加载页面,相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5

3.navigator对象和history对象 

3.1navigator对象

navigator对象里面包含了很多和浏览器有关的信息,我们最常用的是userAgent属性,这个属性可以返回由客户端发送服务器的user-agent头部的值,这个值在网页端和移动设备端返回的数值不太一样,因此我们可以利用这个属性来判断用户使用的是什么设备,从而决定跳转我们的移动设备端还是网页端的页面。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/ig))) {
	{
window.location.href =	/ / 手机
} else {
window.location.href =//电脑
}
//利用正则表达式进行判断,最后结果返回一个数组或者是null,当值为null时讲页面跳转到网页端页面,当结果不为空时进入移动端页面。

3.2history对象 

history是历史记录对象,里面可以记录我们与浏览器的交互过程。history对象一般在实际开发中比较少用,但是会在一些0A办公系统中见到。该对象包含用户(在浏览器窗口中) 访问过的URL。

history.back()

表示后退一步的操作

 history.forward()

表示前进一步的操作

 history. go()

可以在括号内写入1或-1,前者表示前进,后者表示后退。

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

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

相关文章

manjaro 安装 wps 教程

内核: Linux 6.6.16.2 wps-office版本: 11.10.11719-1 本文仅作为参考使用, 如果以上版本差别较大不建议参考 安装wps主体 yay -S wps-office 安装wps字体 (如果下载未成功看下面的方法) yay -S ttf-waps-fonts 安装wps中文语言 yay …

数据结构之时间复杂度和空间复杂度

目录 一.什么是数据结构? 二.什么是算法? 三.算法效率 1.如何衡量算法的好坏 2.算法的复杂度 四.时间复杂度 1.时间复杂度的概念 2.例题展示 五.空间复杂度 1.概念 2.注意事项 空间的销毁>归还对空间的使用权内存空间属于操作系统的进程 …

【工具相关】zentao用例管理平台部署实践

文章目录 一、备份还原1、数据备份1.1、前言1.2、版本备份1.3、数据备份 2、数据恢复2.1、版本恢复2.2、数据恢复 二、问题处理1、ERROR: SQLSTATE[HY000] [2002] Connection refused 一、备份还原 1、数据备份 1.1、前言 禅道系统从10.6版本以后,新增数据备份设…

element-ui radio 组件源码分享

今日简单分享 radio 组件的实现原理,主要从以下三个方面来分享: 1、radio 页面结构 2、radio 组件属性 3、radio 组件方法 一、radio 页面结构 1.1 页面结构如下: 二、radio 属性 2.1 value / v-model 属性,类型为 string / …

谷歌新作:AI 检测文件内容类型,5ms 即可完成 | 开源日报 No.192

google/magika Stars: 5.0k License: Apache-2.0 magika 是一个利用深度学习来检测文件内容类型的工具。 使用自定义、高度优化的 Keras 模型,仅约 1MB 大小,在单个 CPU 上能够在毫秒内实现精确的文件识别。在超过 1M 文件和 100 种内容类型&#xff0…

供应链管理(SCM):界面设计全面扫盲,得供应链者得天下

大家伙,我是大千UI工场,专注UI分享和项目接单,本期带来供应链系统的设计分享,欢迎大家关注、互动交流。 一、什么是SCM SCM系统是供应链管理(Supply Chain Management)系统的缩写。供应链管理是指协调和管…

立式学习灯哪个牌子好?教你6个挑选窍门,甩掉坑货!

很多用户对立式学习灯的理解存在偏差,认为只要选择昂贵的、热度高的台灯就能万事大吉,实测不然!要知道,目前的市场上充斥着各类不专业立式学习灯,其中就包括不少所谓的网红品牌、跨界品牌,它们普遍通过造型精致、明星代…

Vue+SpringBoot打造考研专业课程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

CTP-API开发系列之三:柜台系统简介

CTP-API开发系列之三:柜台系统简介 CTP-API开发系列之三:柜台系统简介中国金融市场结构---交易所柜台系统通用柜台系统极速柜台系统主席与次席 CTP柜台系统CTP组件名称对照表CTP柜台系统程序包CTP柜台系统架构图 CTP-API开发系列之三:柜台系统…

实现粘性布局position:sticky

对于粘性定位这个概念,很多人都没有注意到,所以写这篇文章总结一下。 粘性定位它基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative;…

查看Linux文件的所有者、用户组等所属信息

在Linux系统中,要查看文件或目录的所有者、用户组以及其他权限信息,可以使用以下命令: ls 命令: 使用 -l(长格式)选项来查看详细信息,包括所有者、用户组、大小、修改时间以及权限等。 ls -l /p…

【JavaScript 漫游】【031】window 对象总结

文章简介 本篇文章为【JavaScript 漫游】专栏的第 030 篇文章,记录了浏览器模型中 window 对象的相关知识点。 window 对象概述 浏览器里面,window 对象(注意,w 为小写)指当前的浏览器窗口。它也是当前页面的顶层对…

【开发工具】Git模拟多人开发场景理解分支管理和远程仓库操作

我们来模拟一个多人多分支的开发场景。假设你有一个新的空白远程仓库,假设地址是 https://github.com/user/repo.git。 克隆远程仓库到本地 $ git clone https://github.com/user/repo.git这会在本地创建一个 repo 目录,并自动设置远程主机为 origin。 创建本地开发分支并推送…

安卓部分手机使用webview加载链接后白屏(Android低版本会出现的问题)

前言 大爷:小伙我这手机怎么打开你们呢这个是白屏什么都不显示。 大娘:小伙我这也是打开你们呢这功能,就是一个白屏什么也没有,你们呢的应用不会有病毒吧。 小伙:我的手机也正常; 同事:我的也正…

使用RabbitMQ实现延时消息自动取消的简单案例

一、流程图 二、导包 <!--消息队列 AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 三、配置文件 #消息队列 …

Python PyQt5 多Tab demo

参考&#xff1a; https://cloud.tencent.com/developer/news/388937 importsysfromPyQt5.QtWidgetsimportQVBoxLayout,QWidget,QFormLayout,QHBoxLayout,QLineEdit,QRadioButton,QCheckBox,QLabel,QGroupBox,QApplication,QTabWidgetclassTabDemo(QTabWidget):def__init__(se…

C++内存泄漏检测

C进阶专栏&#xff1a;http://t.csdnimg.cn/aTncz 相关系列文章 C技术要点总结, 面试必备, 收藏起来慢慢看 C惯用法之RAII思想: 资源管理 C智能指针的自定义销毁器(销毁策略) 目录 1.内存泄漏概述 1.1.内存泄漏产生原因 1.2 内存泄漏导致的后果 1.3 内存泄漏解决思路 2.宏…

Linux——线程(2)

在上一篇博客中我介绍了Linux中的线程是什么样的&#xff0c;就如同进程可以通过 fork创建&#xff0c;可以被终止&#xff0c;可以退出一样&#xff0c;线程也可以被我们用户控制&#xff0c;这 篇博客我会介绍线程的控制&#xff0c;并且基于线程的控制所产生的一些问题进行 …

安装系统后,如何单个盘空间扩展多个盘空间?

1、计算机-管理-存储-磁盘空间 2、压缩C盘符&#xff0c;分出多余空间 3、将多余空间扩展&#xff0c;然后修改盘符名称

为什么会不断出现低价窜货链接

品牌在做控价的过程中&#xff0c;会进入一个怪圈&#xff0c;就是不管如何治理&#xff0c;低价、乱价、窜货链接都在不断出现&#xff0c;甚至有些低价链接会占据电商首页的位置&#xff0c;其实这些在一定程度上讲是正常的&#xff0c;品牌在不断发展&#xff0c;链接也是动…