本文节选自 Awesome CheatSheet/DOM CheatSheet，主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。 Blob 是 JavaScript 中的对象，表示不可变的类文件对象，里面可以存储大量的二进制编码格式的数据。Bl…

这篇文章主要探讨的是如何让 PWA 优雅合理的注册一个 Service Worker，从而让站点拥有 Service Worker 所提供的能力，如果看到标题的第一想法是 “Service Worker 注册一个这么简单的话题有啥可讲的”，看到后面可以发现还是有一些坑的

使用AppCache可以为我们提供几种支持内容离线工作的模式。如果这些模式正是你所需要的，那么恭喜你，你中了APPCache的大奖（尽管头等奖依然无人认领），但我们这些其余的人都挤在角落里来回摇摆（译者注：作者指的是由于设计上的原因，AppCache逐渐地被Web标准移除，虽然…

记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。 在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此…

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。 同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta…

Beacon API是一种从网页把信息传递给服务器的轻量并且高效的方法。我们来了解一下如何使用它，以及它与传统的 Ajax 技术有何不同。 Beacon API 是一个基于 JavaScript 的 Web API，用于将少量数据从浏览器发送到 Web 服务器，而无需等待响应。…

今天要聊的话题是前端最近的一个更新方向 PWA 中的核心 Service Worker 的更新问题。这是一个很容易被开发者忽略的问题，因为绝大部分开发者可能对它还不太熟悉。 经过近 2 年的发展，PWA 在 WEB 圈的知名度已经大大提升，即便你没用过可能也至少听说过。Serv…

1. 什么是 PWA？ 2. 首屏优化 2.1. 静态资源优化 2.2. 动态数据优化 2.3. 直出html优化 3. 替代离线包 但是离线包系统是非常成熟的系统，要完全替换掉它还需要考虑许多方面的问题。 3.1. 更新机制 离线包有个自动更新的机制，每隔一段时间就会去请求离…