张越
张越

「读书笔记」第四版JavaScript高级程序设计（第二十七章）

前言

也不完全是笔记，也做了一些自己的补充

javascript是单线程的吗？

javascript是单线程的，但是javascript可以把工作嫁接给独立的线程。同时不影响单线程模型（不能操作DOM）。

每打开一个网页就相当于一个沙盒，每一个页面都有自己独立的内容。工作者线程相当于一个完全独立的二级子环境。在子环境中不能与依赖单线程模型API交互（DOM操作），但是可以与父环境并行执行代码。

工作者线程与线程的区别

  1. 工作者线程的底层实现原理就是线程
  2. 工作者线程可以并发
  3. 工作者线程与主线程之间可以使用SharedArrayBuffer实现共享内存，在js中可以使用Atomics实现并发控制。
  4. 工作者线程不共享全部的内存
  5. 工作者线程与主线程可能不在一个进程中
  6. 创建工作者线程的开销也很大（工作者线程应该用于一些长期运行的任务）

工作者线程的类型

  1. ServiceWorker 服务工作者线程
  2. SharedWorker 共享工作者线程
  3. WebWorker，Worker，专用工作者线程

WorkerGlobalScope

在工作者线程中，没有window对象，全局对象是WorkerGlobalScope的子类的实例

  • 专用工作者线程全局对象是DedicatedWorkerGlobalScope子类的实例
  • 共享工作者线程全局对象是SharedWorkerGlobalScope的实例
  • 服务工作者是ServiceWorkerGlobalScope的实例

专用工作者线程 Worker or WebWorker

创建专用工作者线程




    
    
    Document

专用工作者线程的安全限制

工作者线程的脚本文件，只能和父级同源。（但是在工作者线程中，可以使用importScripts加载其他源的脚本）

使用Worker对象

创建的Worker对象在工作线程终止前，是不会被垃圾回收机制回收的
  • onerror, 父上下文监听工作者线程的错误
  • onmessage, 父上下文监听工作者线程发送的消息
  • onmessageerror, 父上下文监听工作者线程发送消息产生的错误（比如消息无法被反序列化）
  • postMessage()，父上下文向工作者线程发送消息
  • terminate()，终止工作者线程

DedicatedWorkerGlobalScope

工作者线程中全局作用域是DedicatedWorkerGlobalScope对象的实例，可以通过self关键字访问全局对象

  • self.postMessage, 向父上下文发送消息
  • self.close, 关闭线程
  • self.importScripts, 引入其他脚本

专用工作者线程的生命周期

生命周期分为初始化，活动，终止。但父上下文是无法区分工作者线程的状态。调用Worker后，虽然worker对象可用，但是worker不一定初始化完毕。可能存在延迟。如果不调用close或者terminate，工作者线程会一直存在，垃圾回收机制也不会回收worker对象。但是调用close和terminate是有一些区别的。如果工作者线程关联的网页被关闭，工作者线程也会被终止。

  1. 在工作者线程的内部，调用close，工作者线程不会立即结束，而且在本次宏任务执行完成后结束。
  2. 在父上下文调用terminate，工作者线程会立即结束。
// 专用工作者线程
self.postMessage('a')
self.close()
self.postMessage('b')

// 父上下文
const worker = new Worker('./worker.js')
worker.onmessage = ({ data }) => {
  console.log('data:', data);
}

// consloe
// data: a
// data: b

// 工作者线程
self.onmessage = ({data}) => console.log(data);

// 父上下文
const worker = new Worker(location.href  + '/worker.js')
// 定时器等待线程初始化完成
setTimeout(() => {
  worker.postMessage('a')
  worker.terminate()
  worker.postMessage('b')
}, 1000);

// consloe
// a

行内创建工作者线程

专用工作者线程可以通过Blob对象的URL在行内创建，而不需要远程的js文件。


const workerStr = `
  self.onmessage = ({data}) => {
    console.log('data:', data);
  }
`;
const workerBlob = new Blob([workerStr]);
const workerBlobUrl = URL.createObjectURL(workerBlob);
const worker = new Worker(workerBlobUrl);

// data: abc
worker.postMessage('abc');

父上下文的函数，也可以传递给专用工作者线程，并且在专用工作者线程中执行。但是父上下文的函数中不能使用闭包的变量，以及全局对象。

const fn = () => '父上下文的函数';
// 将fn转为字符串的形式，然后自执行
const workerStr = `
  self.postMessage(
    (${fn.toString()})()
  )
`
const workerBlob = new Blob([workerStr]);
const workerBlobUrl = URL.createObjectURL(workerBlob);
const worker = new Worker(workerBlobUrl);
worker.onmessage = ({ data }) => {
  // 父上下文的函数
  console.log(data)
}
const a = 'Hi'
// error, Uncaught ReferenceError: a is not defined
const fn = () => `${a}, 父上下文的函数`;
const workerStr = `
  self.postMessage(
    (${fn.toString()})()
  )
`
const workerBlob = new Blob([workerStr]);
const workerBlobUrl = URL.createObjectURL(workerBlob);
const worker = new Worker(workerBlobUrl);
worker.onmessage = ({ data }) => {
  // 父上下文的函数
  console.log(data)
}

工作者线程中动态执行脚本

工作者线程中，可以使用importScripts加载执行脚本。importScripts加载的js会按照顺序执行。所有导入的脚本会共享作用域，importScripts不会同源的限制。

我经过测试，在父上下文中使用 onerror 监听错误，是可以捕获到importScripts加载的非同源脚本的错误，并且有具体的错误信息。

// 父上下文
const worker = new Worker('http://127.0.0.1:8080/worker.js')
window.onerror = (error) => {
  // Uncaught ReferenceError: a is not defined
  console.log(error)
}

// 工作者线程
importScripts('http://127.0.0.1:8081/worker.js')

// 工作者线程中importScripts加载的脚本
const fn = () => {
  console.log(a)
}
setTimeout(() => fn(), 3000);

多个工作者线程

工作线程还可以继续创建工作者线程。但是多个工作者线程会带来额外的开销。并且顶级工作者线程，和子工作者线程，必须和父上下文在同一个源中。

工作者线程的错误

try……catch, 无法捕获到线程中的错误，但是在父上下文中，可以使用onerror事件捕获到

专用工作者线程的通信

postMessage

之前已经在demo中给出例子，这里不再赘述

MessageChannel

MessageChannel API有两个端口，如果父上下文需要实现与工作线程的通讯, 父上下文需要将端口传到工作者线程中

// 父上下文
const channel = new MessageChannel()
const worker = new Worker('http://127.0.0.1:8080/worker.js')

// 将端口2发送给工作者线程中
worker.postMessage(null, [channel.port2]);

setTimeout(() => {
  // 通过MessageChannel发送消息
  channel.port1.postMessage('我是父上下文')
}, 2000)
// 工作线程
let channelPort = null

self.onmessage = ({ ports }) => {
  if (!channelPort) {
    channelPort = ports[0]
    self.onmessage = null
    // 通过channelPort监听消息
    channelPort.onmessage = ({ data }) => {
      console.log('父上下文的数据:', data);
    }
  }
}

BroadcastChannel

同源脚本可以使用BroadcastChannel进行通讯，使用BroadcastChannel必须注意的是，如果父上下文在工作线程初始化完成之前，就发送消息，工作线程初始化完成后，是接受不到消息的。消息不会存在消息队列中。

// 父上下文
const channel = new BroadcastChannel('worker')
const worker = new Worker('http://127.0.0.1:8080/worker.js')
// 等待工作线程初始化完毕
setTimeout(() => {
  channel.postMessage('消息')
}, 2000)
// 工作线程
const channel = new BroadcastChannel('worker')
channel.onmessage = ({ data }) => {
  console.log(data)
}

Channel Messaging API

Channel Messaging API 可以用在 "文档主体与iframe"，"两个iframe之间"，"使用SharedWorker的两个文档"，或者两个"worker"之间进行通许。

专用工作者线程的数据传输

结构化克隆算法

使用postMessage发送数据的时候，浏览器后台会对数据（除了Symbol之外的类型）进行拷贝。虽然结构化克隆算法对循环引用的问题做了兼容处理，但是对于复杂对象结构化克隆算法有性能损耗。

可转移对象

将数据的所有权。由父级上下文转让给工作线程。或者由工作线程转让给父级上下文。转移后，数据就会在之前的上下文中被抹去。postMessage的第二个参数，是可选参数，是一个数组，数组的数据需要被转让所有权的数据。


// 父上下文
const worker = new Worker('http://127.0.0.1:8080/worker.js')
const buffer = new ArrayBuffer(30)
// 30
console.log('发送之前:', buffer.byteLength)
// 等待工作线程初始化完毕
setTimeout(() => {
  worker.postMessage(buffer, [buffer])
  // 0
  console.log('发送之后:', buffer.byteLength)
}, 2000)

// 工作线程
self.onmessage = ({ data }) => {
  // 30
  console.log('工作线程接受之后', data.byteLength);
}

关于postMessage的第二个参数

之前可以使用 worker.postMessage(null, [channel.port2]) 发送channel接口的时候。工作线程的onmessage事件的参数，会接收ports，但是换成其他数据是接收不到的。postMessage应该是对channel的数据做了特殊的处理。

SharedArrayBuffer

SharedArrayBuffer可以在父上下文和工作线程中共享，SharedArrayBuffer和ArrayBuffer的api相同，不能直接被操作需要视图。

// 父上下文
const worker = new Worker('http://127.0.0.1:8080/worker.js')
const sharedBuffer = new SharedArrayBuffer(10)
const view = new Int8Array(sharedBuffer);
view[0] = 1;
// 1
console.log('发送之前:', view[0]);
worker.postMessage(sharedBuffer)
setTimeout(() => {
  // 打印出，2
  console.log('发送之后:', view[0])
}, 2000)
// 工作者线程
self.onmessage = ({ data }) => {
  const view = new Int8Array(data);
  view[0] = '2'
}

并行线程共享资源，会有资源征用的隐患。可以使用Atomics解决，Atomics与SharedArrayBuffer可以查看第二十章的笔记。

线程池

开启新的工作者线程开销很大，可开启保持固定数量的线程。线程在忙碌时不接受新任务，线程空闲后接收新任务。这些长期开启的线程，被称为线程池。

线程池中线程的数量，可以参考电脑cpu的线程数， navigator.hardwareConcurrency, 将cpu的线程数设置线程池的上限。

下面的是数中的封装，我在github中也没有找到太热门的库封装的线程池可用，https://github.com/andywer/th... 已经是5年前更新的了。

共享工作者线程 SharedWorker

注意：

  1. Safari不支持SharedWorker
  2. SharedWorke中的console不一定能打印在父上下文的控制台中。（我在Chrome中实验了一下，共享工作者线程中的console，确实不会出现在页面的控制台中)

共享工作者线程和创建，安全限制和专用工作者线程都是相同的，共享工作者线程，可以看作是专用工作者线程的扩展。

SharedWorker可以被多个同源的上下文（同源的网页标签）访问。SharedWorker的消息接口和专用工作者线程也略有不同。

SharedWorker，没办法使用行内的worker, 因为通过URL.createObjectURL, 是浏览器内部的URL, 无法在其他标签页使用。

SharedWorker的唯一标示

worker每次new都会返回一个新的worker实例，SharedWorker只会在不存在相同标示的情况下返回新的实例。SharedWorker的标示可以是worker文件的路径, 文档源。

// 只会实例化一个共享工作者线程
new SharedWorker('http://127.0.0.1:8080/worker.js')
new SharedWorker('http://127.0.0.1:8080/worker.js')

但是如果我们给相同源的SharedWorker，不同的标识，浏览器会任务它们是不同的共享工作者线程

// 实例化二个共享工作者线程
new SharedWorker('http://127.0.0.1:8080/worker.js', { name: 'a' })
new SharedWorker('http://127.0.0.1:8080/worker.js', { name: 'a' })

在不同页面，只要标示相同，创建的SharedWorker都是同一个链接

SharedWorker对象的属性

  • onerror 监听共享工作者线程对象上的抛出的错误
  • port 与共享工作者线程通讯的接口，SharedWorker会隐式的创建，用于与父上下文通信

共享工作者线程中的全局对象是SharedWorkerGlobalScope的实例，全局实例上的属性和方法

  • onconnect，当共享工作者线程建立链接时会触发, 参数包含ports数组，port可以把消息穿回给父上下文。sharedWorker.port.onmessage, sharedWorker.port.start(), 都会触发onconnect事件。
  • close
  • importScripts
  • name

共享工作者线程的生命周期

专用工作者线程只和一个页面绑定，而共享工作者线程只要还有一个上下文链接，它就不会被回收。共享工作者对象无法通过terminate关闭，因为共享工作者线程没有terminate方法，浏览器会负责管理共享工作者线程的链接。

链接共享工作者线程

发生connect事件时，SharedWorker构造函数会隐式的创建MessageChannel，并把其中一个port转移给共享工作者线程的ports数组中。

但是共享线程与父上下文的启动关闭不是对称的。每次打开会建立链接，connect事件中的ports数组中port数量会加1，但是页面被关闭，SharedWorker无法感知。

比如很多页面链接了SharedWorker，现在一部分现在关闭了，SharedWorker并不知道那些页面关闭，所以ports数组中，存在被关闭的页面的port，这些死端口会污染ports数组。

书中给出的方法是，可以在页面销毁之前的beforeunload事件中，通知SharedWorker清除死端口。

SharedWorke示例

示例一

// 父页面
const worker = new SharedWorker('http://127.0.0.1:8080/worker.js')
worker.port.onmessage = ({ data }) => {
    // 打印 data: 2
    console.log('data:', data);
}
worker.port.postMessage([1, 1]);
// 共享工作者线程
const connectedPorts = new Set();
self.onconnect = ({ports}) => {
    if (!connectedPorts.has(ports[0])) {
        connectedPorts.add(ports[0])
        ports[0].onmessage = ({ data }) => {
            ports[0].postMessage(data[0] + data[1])
        }
    }  
};

示例二

分享线程生成id，标示接口，并发送给页面。在页面beforeunload，将id发送给分享工作者线程中，分享工作者线程清除死端口。 
// 父页面1
const worker = new SharedWorker('http://127.0.0.1:8080/worker.js')
let portId = null
worker.port.onmessage = ({ data }) => {
    if (typeof data === 'string' && data.indexOf('uid:') > -1) {
        // 记录接口的id
        portId = data.split(':')[1];
    } else {
        console.log('接口的数量:', data);
    }
}

window.addEventListener('beforeunload', (event) => {
    worker.port.postMessage(`删除:${portId}`);
});
// 父页面2
const worker = new SharedWorker('http://127.0.0.1:8080/worker.js')
let portId = null
worker.port.onmessage = ({ data }) => {
    if (typeof data === 'string' && data.indexOf('uid:') > -1) {
        // 记录接口的id
        portId = data.split(':')[1];
    } else {
        console.log('接口的数量:', data);
    }
}

window.addEventListener('beforeunload', (event) => {
    worker.port.postMessage(`删除:${portId}`);
});

// 分享工作者线程
const uuid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
}
// 记录接口的map
const connectedPortsMap = new Map();

self.onconnect = ({ports}) => {
    if (!connectedPortsMap.has(ports[0])) {
        const uid = uuid();
        connectedPortsMap.set(uid, ports[0])
        // 向页面发送接口的id，这个id用于删除接口
        ports[0].postMessage(`uid:${uid}`);
        ports[0].onmessage = ({ data }) => {
            if (typeof data === 'string' && data.indexOf('删除:') > -1) {
                const portId = data.split(':')[1];
                // 删除死接口
                connectedPortsMap.delete(portId);
            }
        }
    }  
};

setInterval(() => {
    // 发送接口的数量
    connectedPortsMap.forEach((value) => {
        value.postMessage(connectedPortsMap.size)
    })
}, 3000)

服务工作者线程

感觉这个章节翻译的有点差，很多话读的很别扭，不流畅。而且很多章节都没有给出示例代码，我很多章节都手敲了一遍例子代码，放在文章李

是浏览器中的代理服务器线程，可以拦截请求或者缓存响应，页面可以在无网的环境下使用。与共享工作者线程类似，多个页面共享一个服务工作者线程。服务工作者线程中，服务工作者线程可以使用Notifications API、Push API、Background Sync API。为了使用Push API服务工作者线程可以在浏览器或者标签页关闭后，继续等待推送的事件。

服务工作者线程，常用于网络请求的缓存层和启用推送通知。服务工作者线程，可以把Web应用的体验变为原生应用程序一样。

Notification API 基础

浏览器用于显示桌面通知的API, 下面是例子

// 检查是否允许发送通知
// 如果已经允许直接发送通知
if (Notification.permission === "granted") {
  let notification = new Notification('西尔莎罗南', {
    body: '西尔莎罗南'
  });
} else if (Notification.permission !== "denied") {
  // 如果还没有允许发送通知，我们请求用户允许
  Notification.requestPermission().then(function (permission) {
    // 如果用户接受权限，我们就可以发起一条消息
    if (permission === "granted") {
      let notification = new Notification('西尔莎罗南', {
        body: '西尔莎罗南'
      });
    }
  })
}

Push API 基础

Push API实现了Web接受服务器推送消息的能力。Push API具体的实施代码，可以看我的这个例子, 实现了一个简单的推送。

过程，客户端生成订阅信息，发送给服务端保存。服务端端可以根据需要，在合适的时候，使用订阅信息向客户端发送推送。

https://github.com/peoplesing...

Background Sync API 基础

服务工作者线程，用于定期更新数据的API。

本来想实验以一下这个API，但是注册定时任务时，提示“DOMException: Permission denied.”错误，暂时没有解决。

ServiceWorkerContainer

服务工作者线程没有全局的构造函数，通过 navigator.serviceWorker 创建，销毁，服务工作者线程

创建服务工作者线程

与共享工作者线程一样，在没有时创建新的链接，如果线程已存在，链接到已存在的线程上。

// 创建服务工作者线程
navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js');

registerf返回一个Promise对象，在同一页面首次调用register后，后续调用register没有任何返回。

navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js').then(() => {
  console.info('注册成功')
}).catch(() => {
  console.error('注册失败')
})

如果服务工作者线程用于管理缓存，服务工作线程应该在页面中提前注册。否则，服务工作者线程应该在load事件中完成注册。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js').then(() => {
      console.info('注册成功')
    }).catch(() => {
      console.error('注册失败')
    })
  });
}

使用ServiceWorkerContainer对象 （容器对象）

ServiceWorkerContainer对象是浏览器对服务工作者线程的顶部封装，ServiceWorkerContainer可以在客户端中通过navigator.serviceWorker访问

  • navigator.serviceWorker.oncontrollerchange, 在注册新的服务工作者线程时触发(准确的说是在注册新版本的服务工作者线程，并接管页面时触发)
const btn = document.getElementById('btn')

btn.onclick = () => {
    navigator.serviceWorker.register('./sw2.js')
}

navigator.serviceWorker.oncontrollerchange = () => {
    console.log('触发controllerchange事件')
    // sw2
    console.log(navigator.serviceWorker.controller)
}

navigator.serviceWorker.register('./worker.js')
// sw1
console.log('hehe')
// sw2
self.addEventListener('install', async () => {
    // 强制进入已激活的状态
    self.skipWaiting();
})

self.addEventListener('activate', async () => {
    // 强制接管客户端
    self.clients.claim();
})
  • onerror，服务工作者线程，发生错误时触发
  • onmessage，监听服务工作者线程发送的消息，收到消息时触发
  • ready，返回Promise，内容是已经激活的ServiceWorkerRegistration对象
  • controller，返回当前页面的serviceWorker对象，如果没有激活的服务工作者线程返回null
  • register(), 创建更新ServiceWorkerRegistration对象
  • getRegistration(scope), 返回Promise, 内容与与ServiceWorkerContainer关联，并且与scope(路径)匹配的ServiceWorkerRegistration对象。
  • getRegistrations(), 返回Promise, 内容是与ServiceWorkerContainer关联的所有ServiceWorkerRegistration对象
  • startMessage(), 开始接受服务工作者线程通过postMessage派发的消息，如果不使用startMessage，Client.postMessage()派发的消息会等待DOMContentLoaded事件之后被调度。startMessage可以尽早的调度。（使用ServiceWorkerContainer.onmessage时，消息会自动发送，不需要startMessage）

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    let sw1;
    let sw2;
    navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js').then(sw => {
      console.log(sw);
      sw1 = sw;
    }) 
    navigator.serviceWorker.ready.then((sw) => {
      console.log(sw);
      sw2 = sw;
    })
    setTimeout(() => {
      // true
      console.log(sw1 === sw2)
    }, 1000)
  });
}

使用ServiceWorkerRegistration对象 （注册对象）

ServiceWorkerRegistration，表示成功注册的服务工作者线程。可以通过register返回的Promise中访问到。在同一页面调用register，如果URL相同，返回的都是同一个ServiceWorkerRegistration对象。

navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js').then(sw => {
  // ServiceWorkerRegistration对象
  console.log(sw);
})
  • onupdatefound, 线程安装中的状态触发
  • scope, 返回服务工作者线程的路径
  • navigationPreload，返回与注册对象关联的NavigationPreloadManager对象
  • pushManager，返回注册对象关联的pushManager对象（主要用于注册消息，方便服务端推送消息）
  • installing，返回状态为installing的服务工作者线程
  • waiting，返回状态为waiting的服务工作者线程
  • active，如果有则返回状态 activating（激活中） 或 active(活动)的服务工作者线程
  • showNotifications，显示通知，可以配置title和body
  • update，更新ServiceWorker
  • unregister，取消ServiceWorker

使用ServiceWorker对象

如何获取ServiceWorker对象？有两种以下的途径

  1. ServiceWorkerRegistration对象的active属性
  2. ServiceWorkerContainer对象的controller属性

ServiceWorker对象继承Work，但是不包含terminate方法

  • onstatechange，ServiceWorker.state变化时触发
  • scriptURL，返回注册的工作者线程的完整URL，相对路径会被解析为完整的路径
  • state，返回工作者线程的状态，installing，installed，activating，activated，redundant

ServiceWorker的安全限制

  1. 受到同源的限制
  2. 只能用于HTTPS的协议，127.0.0.1或者localhost下可以使用HTTP协议。

如果在非HTTPS的协议下，navigator.serviceWorker是undefined。window.isSecureContext可以判断当前上下文是否安全。

ServiceWorkerGlobalScope

服务工作者线程内部，全局对象是ServiceWorkerGlobalScope的实例。ServiceWorkerGlobalScope继承WorkerGlobalScope，因此拥有它的属性和方法。线程内部通过self访问全局的上下文。ServiceWorkerGlobalScope的实例的做了以下的扩展。

  • caches，返回CacheStorage对象
  • clients，返回工作者线程的Clients接口
  • registration，返回服务工作者线程的注册对象ServiceWorkerRegistration
  • skipWaiting，强制工作者线程进入活动的状态
  • fetch，在 服务工作者线程中，用于发起网络请求的方法

专用工作者线程，和共享工作者线程只有一个onmessage事件作为输入，但服务工作者线程可以接受多种事件

  • self.onintall, 服务工作者线程进入安装的时触发（activating之前的状态）
  • self.onactive, 服务工作者线程进入激活状态时触发 (activating之后的状态)
  • self.onfetch, 服务工作者线程可以拦截页面的fetch请求
  • self.onmessage, 服务工作者线程接收postMessage发送的消息时触发
  • self.onnotificationclick，用户点击 ServiceWorkerRegistration.showNotification()，生成的通知触发
  • self.onnotificationclose，用户关闭 ServiceWorkerRegistration.showNotification()，生成的通知触发
  • self.onpush，接受到服务端推送的消息时触发

服务工作者线程作用域的限制

// worker.js在根目录线下
navigator.serviceWorker.register('http://127.0.0.1:8080/worker.js')
// http://127.0.0.1:8080下的所有请求都会被拦截
fetch('http://127.0.0.1:8080/foo.js');
fetch('http://127.0.0.1:8080/foo/fooScript.js');
fetch('http://127.0.0.1:8080/baz/bazScript.js');

// worker.js在foo目录下
navigator.serviceWorker.register('http://127.0.0.1:8080/foo/worker.js'})
// foo目录下的请求会被拦截
fetch('/foo/fooScript.js')
// 其他路径的请求不会被拦截
fetch('/foo.js')
fetch('/baz/bazScript.js')

如果想排除某个路径下的请求，可以使用末尾带斜杠的路径

// foo路径下的请求，都不会被拦截
navigator.serviceWorker.register(
  'http://127.0.0.1:8080/worker.js',
  {
    scope: '/foo/'
  }
)

服务工作者线程缓存

  1. 服务工作者线程的不会自动缓存任何请求
  2. 服务工作线程不会到期自动失效
  3. 缓存必须手动的更新和删除
  4. 缓存版本必须手动管理
  5. 缓存策略为LRU，当缓存的数据超过浏览器的限制时

CacheStorage

通过 self.caches 访问 CacheStorage 对象。CacheStorage时字符串和Cache对象的映射。CacheStorage在页面或者其他工作者线程中，都可以访问使用。

// 访问缓存，如果没有缓存则会创建
self.caches.open(key)

CacheStorage也拥有类似Map的API，比如has，delete，keys()，但是它们都是返回Promise的

match，matchAll

分别返回匹配的第一个Response

(async () => {
    const request = new Request('https://www.foo.com')
    const response1 = new Response('fooResponse1')
    const response2 = new Response('fooResponse2')
    const v1 = await caches.open('v1')
    await v1.put(request, response1)
    const v2 = await caches.open('v2')
    await v2.put(request, response2)
    const matchCatch = await caches.match(request)
    const matchCatchText = await matchCatch.text()
    // true
    console.log(matchCatchText === 'fooResponse1')
})();

Cache

CacheStorage对象是字符串和Cache对象的映射。Cache对象则是Request对象或者URL字符串，和Response对象之间的映射。

  • put, put(Request, Response)添加缓存，返回Promise
  • add(request), 使用add发送fetch请求，会缓存响应
  • addAll(request[]), 会对数组中的每一项调用add。

Cache也拥有delete(), keys()等方法，这些方法都是返回Promise的

(async () => {
    const request1 = new Request('https://www.foo.com');
    const response1 = new Response('fooResponse');
    const cache = await caches.open('v1')
    await cache.put(request1, response1)
    const keys = await cache.keys()
    // [Request]
    console.log(keys)
})()
  • matchAll，返回匹配的Response数组
  • match，返回匹配的Response对象

(async () => {
    const request1 = new Request('https://www.foo.com?a=1&b=2')
    const request2 = new Request('https://www.bar.com?a=1&b=2', {
        method: 'GET'
    })
    const response1 = new Response('fooResponse')
    const response2 = new Response('barResponse')
    const v3 = await caches.open('v3')
    await v3.put(request1, response1)
    await v3.put(request2, response2)
    const matchResponse = await v3.match(new Request('https://www.foo.com'), {
        ignoreMethod: true, // 忽略匹配GET或者POST方法
        ignoreSearch: true, // 忽略匹配查询字符串
    });
    const matchResponseText = await matchResponse.text()
    // fooResponse
    console.log(matchResponseText)
})();

catch对象的key，value使用的是Request, Response对象的clone方法创建的副本

(async () => {
    const request = new Request('https://www.foo.com');
    const response = new Response('fooResponse');
    const cache = await caches.open('v1')
    await cache.put(request, response)
    const keys = await cache.keys()
    // false
    console.log(keys[0] === request)
})();

最大存储空间

获取存储空间，以及目前以用的空间

navigator.storage.estimate()

Client

  • id，客户端的全局唯一标示
  • type，客户端的类型
  • url，客户端的URL
  • postMessage，向单个客户端发送消息
  • claim，强制工作者线程控制作用域下所有的客户端。当一个ServiceWorker被初始注册时，页面在下次加载之前不会使用它。 claim() 方法会立即控制这些页面。

关于服务工作者线程控制客户端的问题

一开始注册服务工作者时，页面将在下一次加载之前才使用它。有两种方法可以提前控制页面

// 页面
navigator.serviceWorker.register('./worker.js').then((registration) => {
  setTimeout(() => {
    fetch('/aa')
  }, 2000)
}).catch(() => {
  console.log('注册失败')
});
// sw
self.addEventListener('fetch', () => {
  // sw没有控制客户端，所以无法拦截fetch请求，抛出错误
  throw new Error('呵呵')
})

第一种解决方法, 使用claim强制获得控制权，但是可能会造成版本资源不一致


self.addEventListener('activate', async () => {
    self.clients.claim();
})

self.addEventListener('fetch', () => {
    // 可以抛出错误
    throw new Error('呵呵')
})

第二种解决方法，刷新页面

navigator.serviceWorker.register('./worker.js').then((registration) => {
    setTimeout(() => {
        fetch('/aa')
    }, 3000)
    registration.addEventListener('updatefound', () => {
        const sw = registration.installing;
        sw.onstatechange = () => {
            console.log('sw.state', sw.state)
            if (sw.state === 'activated') {
                console.log('刷新页面')
                // 刷新页面后可以抛出错误
                window.location.reload();
            }
        }     
    })
}).catch(() => {
    console.log('注册失败')
});

服务工作者线程的一致性

服务工作者线程，最重要的就是保持一致性（不会存在a页面使用v1版本的服务工作者线程，b页面使用v2版本的服务工作者线程）。

  1. 代码一致性，服务工作者线程在所有标签页都会同一个版本的代码

  2. 数据一致性，

    • 服务工作者线程提早失败：语法错误，资源加载失败，都会导致服务工作者线程加载是比
    • 服务工作者线程激进更新：当加载的服务工作者线程，或者服务工作者线程内部依赖的资源，有任何差异，都会导致安装新版本的服务工作者线程（新安装的工作者线程会进入installed态）
    • 未激活服务工作者线程消极活动，在使用register安装服务工作者线程后，服务工作者线程会安装，但不会被激活（除非所有受到之前版本的控制的标签页被关闭，或者调用self.skipWaiting方法）
    • 活动的服务工作者线程粘连，只要至少有一个客户端与关联到活动的服务工作者线程，浏览器 就会在该源的所有页面中使用它。对于新版本的服务工作者线程会一直等待。

生命周期

  1. 已解析(parsed)
  2. 安装中 (installing)
  3. 已安装(installed)
  4. 激活中(activating)
  5. 已激活(activated)
  6. 已失效(redundant)

已解析 parsed

调用 navigator.serviceWorker.register() 会进入已解析的状态，但是该状态没有事件，也没有对应的ServiceWorker.state的值。

安装中 installing

在客户端可以通过检查registration.installing是否被设置为了ServiceWorker实例，判断是否在安装中的状态。当服务工作者线程到达安装中的状态时，会触发onupdatefound事件。

navigator.serviceWorker.register('./sw1.js').then((registration) => {
    registration.onupdatefound = () => {
        console.log('我已经达到了installing安装中的状态')
    }
    console.log(registration.installing)
});

在服务工作者线程的内部，可以通过监听install事件，确定安装中的状态。

在install事件中，可以用来填充缓存，可以使用waitUntil的方法，waitUntil方法接受一个Promise，只有Promise返回resolve时，服务工作者线程的状态才会向下一个状态过渡。

self.addEventListener('install', (event) => {
    event.waitUntil(async () => {
        const v1 = await caches.open('v1')
        // 缓存资源完成后，才过渡到下一个状态
        v1.addAll([
            'xxxx.js',
            'xxx.css'
        ])
    })
})

已安装 installed

在客户端可以通过检查registration.waiting是否被设置为了ServiceWorker实例，判断是否是已安装的状态。如果浏览器中没有之前版本的的ServiceWorker，新安装的ServiceWorker会直接跳过这个状态，进入激活中的状态。否则将会等待。

navigator.serviceWorker.register('./worker.js').then((registration) => {
    console.log(registration.waiting)
});

如果有已安装的ServiceWorker，可以使用self.skipWaiting，强制工作者线程进入活动的状态

激活中状态 activating

如果浏览器中没有之前版本的ServiceWorker，则新的服务工作者线程会直接进入这个状态。如果有其他服务者线程，可以通过下面的方法，使新的服务者线程进入激活中的状态

  1. self.skipWaiting(), 强制进入激活中的状态
  2. 原有的服务工作者线程客户端数量变为0（标签页都被关闭）在下一次导航事件新工作者线程进入激活中的状态。
const btn = document.getElementById('btn');

navigator.serviceWorker.register('./sw1.js').then((registration) => {
    // 第一次加载没有活动的（之前版本）服务工作者进程, waiting直接跳过所以为null
    console.log('waiting:', registration.waiting);
    // 当前激活的是sw1的服务工作者线程
    console.log('active:', registration.active);
});

btn.onclick = () => {
    navigator.serviceWorker.register('./sw2.js').then((registration) => {
        // 加载新版本的服务工作者线程，触发更新加载
        // 因为之前已经有在活动的服务工作者线程了，waiting状态的是sw2的线程
        console.log('waiting:', registration.waiting);
        // 激活状态的是sw1的线程
        console.log('active:', registration.active);
    })
}

「读书笔记」第四版JavaScript高级程序设计（第二十七章）_第1张图片

在客户端中可以大致通过判断registration.active是否为ServiceWorker的实例判断。（active为ServiceWorker的实例，可能是是激活状态或者激活中的状态）

在服务工作者线程中，可以通过添加activate事件处理来判断，该事件处理程序常用于删除之前的缓存


const CATCH_KEY = 'v1'

self.addEventListener('activate', async (event) => {
  const keys = await caches.keys();
  keys.forEach((key) => {
    if (key !== CATCH_KEY) {
      caches.delete(key)
    }
  });
})

注意：activate事件发生，并不意味着页面受控。可以使用clients.claim()控制不受控的客户端。

已激活的状态 activated

在客户端中可以大致通过判断registration.active是否为ServiceWorker的实例判断。（active为ServiceWorker的实例，可以是激活状态或者激活中的状态）

或者可以通过查看registration.controller属性，controller属性返回已激活ServiceWorker的实例。当新的服务工作者线程控制客户端时，会触发navigator.serviceWorker.oncontrollerchange事件

或者navigator.serviceWorker.ready返回的Promise为resolve时，工作者线程也是已激活的状态。

const btn = document.getElementById('btn');

navigator.serviceWorker.register('./sw1.js').then((registration) => {
    // 已激活的线程sw1
    console.log('activated', navigator.serviceWorker.controller)
});

btn.onclick = () => {
    navigator.serviceWorker.register('./sw2.js').then((registration) => {
        // 在等待的线程sw2
        console.log('waiting', registration.waiting)
        // 已激活的线程sw1
        console.log('activated', navigator.serviceWorker.controller)
    })
}

已失效的状态 redundant

服务工作者会被浏览器销毁并回收资源

更新服务工作者线程

下面操作会触发更新检查：

  1. 使用navigator.serviceWorker.register()，加载不同URL, 会检查
  2. 发生了push，fetch事件。并且至少24小时没有更新检查。
  3. 浏览器导航到了到服务工作者线程作用域中的一个页面。

如果更新检查发现差异，浏览器会使用新脚本初始化新的工作者线程，新的工作者线程将会达到installed的状态。然后会等待。除非使用self.skipWaiting(), 强制进入激活中的状态。或者原有的服务工作者线程客户端数量变为0（标签页都被关闭）在下一次导航事件新工作者线程进入激活中的状态。

刷新页面不会让更新服务工作者线程进入激活状态并取代已有的服务工作者线程。比如，有个打开的页面，其中有一个服务工作者线程正在控制它，而一个更新服务工作者线程正在已安装状态中等待。客户端在页面刷新期间会发生重叠，即旧页面还没有卸载，新页面已加载了。因此，现有的服务工作者线程永远不会让出控制权，毕竟至少还有一个客户端在它的控制之下。为此，取代现有服务工作者线程唯一的方式就是关闭所有受控页面。

updateViaCache

使用updateViaCache可以控制，服务工作者线程的缓存

  • none，服务工作者线程的脚本以及importScripts引入都不会缓存
  • all，所有文件都会被http缓存
  • imports，服务工作者线程的脚本不会被缓存，importScripts的文件会被http缓存

navigator.serviceWorker.register('/serviceWorker.js', {
  updateViaCache: 'none'
});

服务工作者线程与页面通信

// 页面
navigator.serviceWorker.onmessage = ({ data }) => {
    console.log('服务者线程发送的消息:', data);
}

navigator.serviceWorker.register('./worker.js').then((registration) => {
    console.log('注册成功')
}).catch(() => {
    console.log('注册失败')
});
// sw
self.addEventListener('install', async () => {
    self.skipWaiting();
});

self.addEventListener('activate', async () => {
    self.clients.claim();
    const allClients = await clients.matchAll({
        includeUncontrolled: true
    });
    let homeClient = null;
    for (const client of allClients) {
        const url = new URL(client.url);
        if (url.pathname === '/') {
            homeClient = client;
            break;
        }
    }
    homeClient.postMessage('Hello')
});

拦截fetch请求

self.onfetch = (fetchEvent) => {
  fetchEvent.respondWith(fetch(fetchEvent.request));
};

fetchEvent.respondWith 接受Promise，返回Respose对象，

从缓存中返回


self.onfetch = (fetchEvent) => {
  fetchEvent.respondWith(caches.match(fetchEvent.request));
};

从网络返回，缓存作为后备

self.onfetch = (fetchEvent) => {
  fetchEvent.respondWith(fetch(fetchEvent.request).catch(() => {
    return caches.match(fetchEvent.request)
  }));
};

从缓存返回，网络作为后备


self.onfetch = (fetchEvent) => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then((response) => {
      return response || fetch(fetchEvent.request).then(async (res) => {
        // 网络返回成功后，将网络返回的资源，缓存到本地
        const catch = await catchs.open('CatchName')
        await catch.put(fetchEvent.request, res)
        return res;
      })
    })
  );
};

通用后备

在服务者线程加载时就应该缓存资源，在缓存，和网络都失效时候，返回通用的后备。

参考

你可能感兴趣的:(前端,html,node.js,chrome,vue.js)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他