web学习笔记(二十六)

目录

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.mzph.cn/news/725028.shtml

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

相关文章

在Jupyter Notebook中安装第三方库

pip vs. conda pip 可以在所有环境下安装python包。conda 可以在conda环境下安装所有包。 如果你已经安装了python,那么这个选择对你来说是非常容易的: 如果你是用Anaconda或者Miniconda安装的python,那么请使用conda命令来安装python包。如…

原来我不会递归的原因是不会调试

visual 2022 关于debug和release的区别&#xff0c; 原谅我现在才知道 飞机降落--蓝桥 #include<iostream> using namespace std; struct node {int a, b, c; }q[11];int t, n;bool book[11]; // 标记第 i 架飞机是否降落bool dfs(int num, int last) {if (num n) r…

【MogDB】实战MogDB数据库适配Halo博客系统1.6版本(基于springframework+hibernate+HikariPool)

前言 前一篇文章说了MogDB适配Halo,【MogDB】将流行的博客系统Halo后端的数据库设置为MogDB,但是适配的是2.x版本&#xff0c;由于2.x版本已经引入了对postgresql的支持&#xff0c;而MogDB对于postgresql有很好的兼容性&#xff0c;因此适配起来很简单。但是由于halo2.x的版本…

初识JS

目录 javascript的作用: 浏览器如何执行JS代码&#xff1a; JS的三部分组成&#xff1a; ECMAScript: DOM: BOM: JS的三种书写导入方式&#xff1a; JS注释&#xff1a; JS的输入输出语句&#xff1a; JS变量,数据&#xff1a; 变量的使用&#xff1a; 声明变量&…

Linux的包管理和软件仓库常见问题有哪些?怎么解决

Linux的包管理和软件仓库在使用过程中可能会遇到一些问题&#xff0c;这些问题通常涉及软件的安装、更新、依赖关系、仓库配置等方面。以下是一些常见问题及其解决方法&#xff1a; 1. **软件包依赖问题**&#xff1a; - **问题**&#xff1a;在安装软件时&#xff0c;系统…

嵌入式学习第二十五天!(网络的概念)

网络&#xff1a; 可以用来&#xff1a;数据传输、数据共享 1. 网络协议模型&#xff1a; 1. OSI协议模型&#xff1a; 应用层实际收发的数据表示层发送的数据是否加密会话层是否建立会话连接传输层数据传输的方式&#xff08;数据包&#xff0c;流式&#xff09;网络层数据的…

Vue+SpringBoot打造医院门诊预约挂号系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 功能性需求2.1.1 数据中心模块2.1.2 科室医生档案模块2.1.3 预约挂号模块2.1.4 医院时政模块 2.2 可行性分析2.2.1 可靠性2.2.2 易用性2.2.3 维护性 三、数据库设计3.1 用户表3.2 科室档案表3.3 医生档案表3.4 医生放号…

SpringCloud Alibaba 学习

一&#xff1a;SpringCloud Alibaba介绍 Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用微服 务的必需组件&#xff0c;方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发分布式应用服务。 依托 Spring Cloud Alibaba&…

3-1大佬分享:字节跳动代码设计理念

面试官: 你好&#xff0c;今天我们来聊一聊抽象工厂模式。首先&#xff0c;你能概述一下什么是抽象工厂模式吗&#xff1f; 求职者: 当然。抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一个接口来创建一系列相关或者相互依赖的对象&#xff0c;而不需要指定它们具体…

JavaScript实现点击鼠标弹钢琴的效果

思路&#xff1a; 图片设置宽900px&#xff0c;找到鼠标按下时的x坐标和img距离body的x坐标&#xff0c;两个值相减&#xff0c;然后除100取整&#xff0c;赋值给a&#xff0c;通过判断a的值来确定放出那个音乐。 完整代码&#xff1a; <!DOCTYPE html> <html lan…

基础算法(三)#蓝桥杯

文章目录 11、构造11.1、小浩的ABC11.2、小新的质数序列挑战11.3、小蓝找答案11.4、小蓝的无限集 12、高精度12.1、阶乘数码(高精度*单精度) 11、构造 11.1、小浩的ABC #include<bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(false);cin.tie(n…

MQTT连接阿里云物联网上报物模型数据

目录 1. 创建产品&#xff08;物联网平台 -> 产品 -> 创建产品&#xff09; 2. 为产品添加设备 3. 添加物模型 4. mqtt.fx连接测试 5. 调试物模型 6. 使用mqtt.fx上报温度数据 1. 创建产品&#xff08;物联网平台 -> 产品 -> 创建产品&#xff09; 我这里再新…

嵌入式Linux学习DAY27

消息队列通信&#xff1a; IPC对象&#xff1a;内存文件 消息队列查看&#xff1a;ipcs 消息队列删除&#xff1a; ipcrm -M/-Q/-S key---删除消息队列、内存共享、信号灯 ipcrm -q/-m/-s 消息队列ID/共享内存ID/信号灯ID 流程&#xff1a;创建消息队列->发送消息->…

利用Nginx简单实现端口转发

工作中&#xff0c;经常遇到端口转发的情况。实现的方式很多种&#xff0c;个人感觉还是用nginx实现方便一些。我的环境是ubuntu 22.04, 路由器开通端口段全部映射到这台机器&#xff0c;然后再由它转发给各兄弟机。 /etc/nginx/nginx.conf, 文末位置加入&#xff1a; stream…

迷宫641——2017蓝桥杯

1.这种“一路走到底”就是dfs 2.ps:我觉得要自己思考怎么样是走出去&#xff0c;怎么样是走不出去&#xff0c;对于提高分析问题从而建模编程的能力提高很有效。 走出去&#xff1a;就是坐标超出格子了 走不出去&#xff1a;就是一直绕圈子&#xff0c;什么是绕圈子&#xf…

Java开发快速学习,Java面试题汇总

前言 面试时间将近两个小时&#xff08;期间等待二面面试官来面我的时候等了半个多小时&#xff09;面试官问的东西很多&#xff0c;还挖了好几个坑&#xff0c;一个技术点套着一个技术点的问&#xff0c;一定要做好万全的准备。问了一些基本层面上的技术点都答出来了&#xf…

Vue基础练习 组件之间数据传递

父→子&#xff1a;在子组件注册时写入props&#xff0c;并指定验证要求&#xff0c;父组件时使用v-bind绑定传入数据 //父组件&#xff1a;<Menu class"Menu" :MenuList"MenuList" :showUnderLine"showUnderLine"></Menu>data(){r…

Java项目:39 springboot007大学生租房平台的设计与实现

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统有管理员、房东和用户 【主要功能】 1、后台&#xff1a;房源管理、信息审批管理、订单信息管理、房东管理、用户管理 2、前台&#xff1…

学习总结——JMeter做http接口功能测试

JMeter对各种类型接口的测试 默认做接口测试前&#xff0c;已经给出明确的接口文档&#xff08;如&#xff0c;http://test.nnzhp.cn/wiki/index.php?doc-view-59&#xff09;&#xff1b;本地配好了JMeter 3.x的运行环境&#xff1b; 打开JMeter&#xff0c;添加一个线程组…

TCP和UDP可以使用同一个端口号吗?

TCP和UDP可以使用同一个端口号吗&#xff1f; 首先说答案&#xff1a;可以。怎么理解呢&#xff1f; 我想这个问题要从计算机网络通信谈起&#xff0c;学过计算机网络的同学&#xff0c;可能都还记得7层或者4层网络模型&#xff0c;TCP/UDP属于其中的传输层协议&#xff0c;在…