web学习笔记(二十六)

简介: web学习笔记(二十六)

1.JS执行队列

1.1JS是单线程.


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


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

1.2Web Worker

本创建多个线程。于是,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)类似异步任务放入高速的临时停车点。

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

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

2.location对象

2.1什么是location对象

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

2.2url包含的信息

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

URL的一般语法格式为: image.png

2.3location对象属性

2.4location对象的方法

image.png

3.navigator对象和history对象

3.1navigator对象

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

1. 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,前者表示前进,后者表示后退。
相关文章
|
4月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
26 0
|
2月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
4月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
34 0
|
4月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
32 0
|
4月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
28 0
|
4月前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
32 0
|
4月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
31 0
|
4月前
|
JavaScript 前端开发
web学习笔记(二十三)
web学习笔记(二十三)
56 0
|
4月前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
32 0
|
4月前
|
JavaScript 前端开发
web学习笔记(二十一)
web学习笔记(二十一)
27 0