web学习笔记(二十六)

目录

1.JS执行队列

1.1JS是单线程

[1.2Web Worker](#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头部的值,这个值在网页端和移动设备端返回的数值不太一样,因此我们可以利用这个属性来判断用户使用的是什么设备,从而决定跳转我们的移动设备端还是网页端的页面。

javascript 复制代码
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,前者表示前进,后者表示后退。 |

相关推荐
weixin_437830947 分钟前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
汇能感知8 分钟前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun33 分钟前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao1 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾1 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
gnip1 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio1 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
小菜全1 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG2 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904272 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js