为响应式图片提供实时变换 谷歌几乎对所有网站都使用移动优先索引。因此，与桌面相比，更重要的是针对移动设备优化 LCP。每个图像都需要根据布局的要求缩小。...使用 Service Worker 优先提供内容缓存 Service Worker 可以拦截来自用户浏览器的请求并为其提供缓存响应。...虽然 Service Worker 缓存的用途与 HTTP 或浏览器缓存相同，但它提供了细粒度的控制，即使用户离线也能工作。...您还可以使用 Service Worker 将缓存中的预缓存内容提供给网络速度较慢的用户，从而缩短 LCP 时间。 5....我们在上面讨论了一些与 JS 相关的优化，比如优化发送到浏览器的包和压缩内容。您还可以执行更多操作来优化客户端设备上的渲染。
Service Worker用于缓存的空间并没有在规范中被定义。具体的大小取决于浏览器并依赖于设备和存储条件。 文件不是唯一可以缓存的内容。...在浏览器分配可用空间是已经确定了常见的模式，当然这种行为可能会因浏览器的变化而变化。...我设计缓存策略时的前提就是当前移动设备占据了绝大多数网络流量。普通消费者的移动设备大致相当于Nexus 5手机，一旦安装了大型笨重的应用程序，并考虑到照片，视频和音乐下载，普通设备几乎没有可用空间。...苹果公司目前的为Service Worker制定的缓存限制是50MB，准确来说限制在50MiB，相当于约52MB。它也按“分区”分配，这是一种与iFrame相关的复杂概念。 但故事并没有就此结束。...这可以通过验证 navigator 是否存在 storage 对象（术语是StorageManager）来完成，之后还要验证 estimate 方法是否属于 StorageManager。
可以将相同的方法应用于其他繁重的脱机应用程序，例如操作系统或2D / 3D图形设计等，以便我们可以跨平台在低规格设备上一致地运行它们。...当前的目标是实现极低的延迟，以确保游戏输入与媒体之间的gap尽可能小。因此，传统的视频流传输方法不适用于将图像/音频流传输到客户端的情况。...之后，在第3步，客户端使用HTTP ping请求计算所有候选者的延迟。此延迟列表随后发送回协调器，以便它可以确定最适合为用户服务的worker。在下面的步骤4中，游戏生成。...WebRTC WebRTC旨在通过简单的API在本机移动设备和浏览器上实现高质量的对等连接。...不同会话之间的同步 Golang的劣势 Golang并不完美，它的通道缓慢。与锁定相比，Go通道只是处理并发和流事件的更简单方法，但是通道并不能提供最佳性能。通道下有一个复杂的锁定逻辑。
可以将相同的方法应用于其他繁重的脱机应用程序，例如操作系统或2D / 3D图形设计等，以便我们可以跨平台在低规格设备上一致地运行它们。...当前的目标是实现极低的延迟，以确保游戏输入与媒体之间的gap尽可能小。因此，传统的视频流传输方法不适用于将图像/音频流传输到客户端的情况。...此延迟列表随后发送回协调器，以便它可以确定最适合为用户服务的worker。在下面的步骤4中，游戏生成。WebRTC流连接是在用户和指定worker之间建立的。...WebRTC WebRTC旨在通过简单的API在本机移动设备和浏览器上实现高质量的对等连接。...Golang的劣势 Golang并不完美，它的通道缓慢。与锁定相比，Go通道只是处理并发和流事件的更简单方法，但是通道并不能提供最佳性能。通道下有一个复杂的锁定逻辑。
PC和Mobile开发技术演进 PC方向，从客户端到富客户端，到现在广泛使用的Web。 移动方向，目前主要还是原生应用和Mobile Web，PWA相关技术是未来发展方向。...PWA的特点 渐进式 - 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。 自适应 - 适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。...id=cheeaun.hackerweb" }]} Service Worker Service Worker 是一段脚本，与 Web Worker 一样，也是在后台运行。...页面注入service worker代码示例： if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js...（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。
PC和Mobile开发技术演进 PC方向，从客户端到富客户端，到现在广泛使用的Web。 移动方向，目前主要还是原生应用和Mobile Web，PWA相关技术是未来发展方向。...PWA的特点 渐进式 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。 自适应 适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。...PWA：使用标准的Web开发技术，可以支持离线可用，通过service worker进行更新和缓存，采用App shell模型基础开发，界面和交互类似应用。...一个PWA的manifest.json示例： Service Worker Service Worker 是一段脚本，与 Web Worker 一样，也是在后台运行。...页面注入service worker代码示例： Responsive Web Design RWD是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现
事实上，PWA 不仅解决了离线错误，还在恢复连接的时候将用户与内容连接起来。移动设备是渐进式 web 应用的主要使用场景。让我来告诉你为什么？...桌面浏览器 用户打开电脑（在家、学校或者办公室） 检查是否连上网络，没有则手动连接 打开 web 应用 移动端浏览器 拿出手机 默认手机已经连接上网络 直接打开 app 如上，用户对待两种场景的处理方式是不一样的...注册 Service Worker 越早在浏览器注册，Service Worker 就能越早的开始工作。最佳的做法是在应用的入口。...如果支持，那我们就可以利用 register 这个方法来注册这个 worker，这个方法告知了 service worker 文件的路径。...Fetch Fetch 不是一个必需的生命周期，但它提供了拦截请求资源的方法。当发送请求时，首先会触发这样的事件： // .
，CDN 这些常见的服务器和网络加速之外，通过客户端实现了更好的访问体验。...(在 Network 中选择 offline) 使用方法 注册 Service worker 要安装 Service worker，你需要在你的页面上注册它。...现在你可以到 chrome://inspect/#service-workers 这里，检查 service worker 是否对你的网站启用了。...callback 中，我们需要执行一下步骤： 1、开启一个缓存 2、缓存我们的文件 3、确定所有的资源是否要被缓存 fetch fetch 用来监听用户的网络请求，并给出回应。...从未访问过网站 B，但网站已经在你的设备上预加载过了，一切仅仅因为你访问过网站 A。
在移动设备上，它提示安装应用程序（将图标添加到主屏幕）: ? Service Workers 列表中的下一个是『Service Workers』选项卡。...显示所有是一个选项，可以快速访问所有安装在设备上Service Worker。 每个Service Worker都有一个状态指示器，您可以停止并重新启动。...当加载Service Workers使用Cache API缓存的资源时，DevTools的网络面板显示为来自Service Workers的： ? Firefox如何？...从这里您可以取消注册任何Service Worker，并在调试器中为任何类型的工作线程（也包括Web Workers）打开线程代码。 您还可以触发Push API push 事件来调试Push事件。...它提供自动检查，以确保您的Web应用程序是最佳构建的，并且包括对Service Worker的支持。 一个非常有用的工具，千万不要错过。 如果你喜欢这篇文章，请给我一些鼓掌，让更多的人看到它。
但是要开始使用 Service Workers，还需要先在前置 web 应用里注册 Service Worker。 注册 下面的代码说明了怎样在客户端浏览器里 注册 Service Worker。...比如一个一次性的操作，为 Service Worker 的工作做好准备；普遍的例子是从安装步骤中载入缓存。...我们会首先检查是否有缓存数据，如果没有，就调用 fetch 方法发送网络请求，并返回 promise 。...当您尝试为自己的 Web 应用实现最佳缓存时，您可以使用几种基本的缓存策略。 Mozilla 有一个 方便的资源 记录了几种不同的缓存策略。...; } }); 我们在这监听同步事件，并检查 SyncEvent 对象上的 tag，来确定是否是给点击的 'submit' 事件。
所以越来越多的基于 Web 技术的 Hybrid 客户端或者纯 Web 客户端开始涌现，比如非常知名的网易云客户端，无论是 PC 客户端还是移动客户端都已经切换到了 Web 技术栈。...当我们把原生应用和 Web 应用放在一起来考虑时，我们就会想是否能有一种方式可以结合两者的优点来为用户提供更好的服务呢？PWA 于是应运而生。... 配置 Service Worker 注册 Service Worker 配置完 Manifest 之后，只是能告诉浏览器你的应用是一个...PWA 应用，而实际的 PWA 的离线缓存等特性都还没有实现，这些都是在 Service Worker 中实现的。...只要有 Manifest 和 Service Worker 就能成功把 Web 应用 PWA 化。当然，也有一些更加简单 PWA 化的方法，比如说 pwabuilder。
今日我们为前端带盐 近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。...web APP 对比 原生APP 的优势 开发成本低 适配多种移动设备，不用IOS 安卓多套代码 迭代更新容易,省去了审核、发包、各种渠道发布带来的时间损耗 无需安装成本，拿来即用 web APP...hl=zh-cn 它其实是一个网络应用清单，一个JSON文件，开发者可以利用它控制在用户想要看到应用的区域（例如移动设备主屏幕）中如何向用户显示网络应用或网站，指示用户可以启动哪些功能，以及定义其在启动时的外观...Worker 是支持的, 接着，我们使用 ServiceWorkerContainer.register() 函数来注册 service worker， 这就注册了一个 service worker...Service Worker 的 新的标志性的存储 API — cache — 一个 service worker 上的全局对象，它使我们可以存储网络响应发来的资源，并且根据它们的请求来生成key。
这四种依次为： Service Worker Memory Cache Disk Cache Push Cache Service Worker Service Worker 是运行在浏览器背后的独立线程...使用 Service Worker 的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。...Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存...之后为了提升之后请求的缓存命中率，自然要把这个资源添加到缓存中去。具体来说： 根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)。...下一次请求相同资源时时，浏览器从自己的缓存中找出“不确定是否过期的”缓存。
这是一个将图片置于次要地位，以及重新确定脚本优先级的很好的方法。然而，有时我们可能需要更细粒度的控制。...有了 service worker 之后，我们需要注意 Safari 中的 range 请求[94]（如果您为 service worker 使用了 Workbox，它有一个 range 请求模块）。...使用 service worker 的一个很好的起点是 Workbox，它是一组专门为构建渐进式 web 应用程序而构建的 service worker 库。 49....您是否在 CDN/Edge 上使用了 service worker，例如用于 A/B 测试？...现在，我们已经非常习惯在客户端上运行 service worker，但是在 CDN 服务器上实现它们[99]，也可以帮助调整性能。
构建 PWA 背后的核心思想是为所有设备上的普通 Web 应用程序提供最佳用户体验。当我们通过浏览器访问 Web 应用程序时，整体体验永远赶不上原生应用程序提供的体验。...PWA 的构建块 1.响应式：由于 PWA 提供跨设备兼容性，因此它必须在所有设备上响应。 2.Service worker：这是一个脚本文件，可以在不影响页面性能的情况下在后台异步运行任务。...让我们再深入一点…… Service worker Service Worker 负责确保 PWA 可靠且独立于网络状态。...我们还可以让 service worker 监听网络变化期间发生的事件，并可以动态地服务、修改或拦截应用程序内的网络请求。...简而言之，PWA 的两个主要功能（例如一次性安装和缓存）是使用 Service Worker 脚本完成的。它还可以用于在用户不使用网站时处理推送通知。
整个页面使用 Service Worker 缓存，与服务器渲染部分内容片段，哪个方案更好？...与 Service Worker 相结合，可以显著提高重复访问的感知性能。...SSR 页面通常看起来具有欺骗性的加载完成和可交互性，但在执行客户端JS并绑定事件处理之前，页面实际上无法响应输入。这在移动设备上可能持续几秒甚至几分钟。...当可以在服务器、客户端页面和 Service Worker 之间共享相同模板和路由代码时，此方法最有效。...如果有疑问，Mobile-Friendly Test 工具对于测试你选择的方法是否符合预期，非常有用。
计算图实例 TensorFlow支持各种异构的平台，支持多CPU/GPU，服务器，移动设备，具有良好的跨平台的特性；TensorFlow架构灵活，能够支持各种网络模型，具有良好的通用性；此外，TensorFlow...另外，Worker Service还要负责将OP运算的结果发送到其他的Work Service；或者接受来自其他Worker Service发送给它的OP运算的结果。...执行本地子图 Worker Service派发OP到本地设备，执行Kernel的特定。它将尽最大可能地利用多CPU/GPU的处理能力，并发地执行Kernel实现。...每一个OP根据设备类型都会存在一个优化了的Kernel实现。在运行时，运行时根据本地设备的类型，为OP选择特定的Kernel实现，完成该OP的计算。 ?...此外，TensorFlow实现了矢量化技术，使得在移动设备，及其满足高吞吐量，以数据为中心的应用需求，实现更高效的推理。
值得庆幸的是，桌面和移动设备上这些功能都得到了广泛的支持。这些技术里，service-worker 是核心，但也是最复杂的一个 API，下面就一一介绍一下这些 API。...使用 service worker 使用 service worker 有固定的书写步骤： 注册。使用 ServiceWorker.register() 方法首次注册 service worker。...如果注册成功，service worker 就会被下载到客户端并尝试安装或激活； 下载。...ignoreSearch，布尔类型，表示是否忽略 url 中的 query 部分，默认是 false； ignoreMethod 布尔类型，设置为 true 表示在匹配时不会验证 Request 对象的...在移动端通常会把通知发送到顶部的状态栏，PC 端，以 win10 为例，消息通知一般在右下角。 用法 要使用该 API，需要获得用户的允许。
Service Worker没能命中缓存，则会用fetch()方法继续获取资源，此时memory cache或者disk cache进行下一次找缓存工作。...Service Worker 的 fetch() 方法获取的资源，即便它并没有命中 Service Worker 缓存，甚至实际走了网络请求，也会标注为 ServiceWorker缓存。...根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)根据HTTP头部字段（Cache-control，Pragma等）决定是否加入disk...10 Nov 2018 09:10:11 GMT浏览器储存这个值和内容下一次请求相同资源时时，浏览器从自己的缓存中找出“不确定是否过期的”缓存。...缺陷：资源更新速度以秒以下单位则会失效，因为它的时间单位最低为秒文件是服务器动态生成的，那么方法的更新时间永远都是生成时间，尽管文件未变化Etag & If-None-MatchEtag & If-None-Match
总之，不要选择这种方法，它只使用极少场合（例如，当应用需要访问用户的GCP账户）。 客户端代码可以用service account验证。这个账户代表一个应用，不是用户。权限十分有限。推荐这种方法。...将模型嵌入到移动或嵌入式设备 如果需要将模型部署到移动或嵌入式设备上，大模型的下载时间太长，占用内存和CPU太多，这会是app响应太慢，设备发热，消耗电量。...这么设置后，TensorFlow不会释放获取的内存（避免内存碎片化），直到程序结束。这种方法无法保证确定的行为（比如，一个程序内存超标会导致另一个程序崩溃），所以在生产中，最好使用前面的方法。...你可以从两个AllReduce实现选择做分布策略：基于gRPC的AllReduce算法用于网络通信，和NCCL实现。最佳算法取决于worker的数量、GPU的数量和类型和网络。...在移动和嵌入设备上运行，TFLite减小模型的大小有什么方法？ 什么是伪量化训练，有什么用？ 什么是模型并行和数据并行？为什么推荐后者？ 在多台服务器上训练模型时，可以使用什么分布策略？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
