张越
张越

「读书笔记」第四版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);
    })
}

image.png

在客户端中可以大致通过判断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
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他