其实这个话题，对很多人而言，如果之前没有细致了解过 Chrome 设计架构，还真不好说出答案，不过好在 Chrome 官方写了四篇文章，详细的阐释 Chrome 适合实现多进程，以及其具体作用的。 Chrome 的多进程设计 输入 URL 浏览器做了什么 Renderer process 如何渲染页面 Chrome 与页面的事件交互 那么 Service Worker 是否运行在沙箱中呢？ 我们先看下 Chrome 的多进程架构。 图1 浏览器多进程模型 如图所示，Chrome 包含多个进程，而其中 Browser Process 主要负责浏览器的 UI(比如上面那些插件图标显示，每个tab 的控制，输入框的交互事件等等...)，Renderer Process 顾名思义，则是最为核心，我们每个页面渲染的进程，即我们每打开一个 Tab 访问某个页面，就会产生一个 Renderer Process。而 详情 »
大概这是之前看 The Cost Of JavaScript In 2018 中提到的以参考索引，其实里面很多点挺重要的，当然推荐大家阅读下全文 A Pinterest Progressive Web App Performance Case Study; 后面其实说几点自己印象非常深刻的点； 为什么做这次性能改造 其实很多时候做性能改造，都会面临这样的质疑，它不是对现有版本的任何功能性的迭代，而是从多个方面去提升一些所谓数据指标。因此很多 产品(🐩) 都会去质疑这一件事情，但是 Pinterest 这次改造给出了更为直接的数据，性能的优化与用户数据方面的正相关： 其中相比老版本，用户的停留时间和核心参与度都有非常大的提升；其中和广告相关的数据，也有非常显著的增加；不难理解，当用户用更短的时间触达到页面， 合理的设置 chunks 如果我们是做基于 vue 项目或者 React 的项目，我们可以参考下 Pinterest 的 JS Bundles; js vendor 包含一些第三方的库比如(React, Redux, React-Router) 等; 详情 »
PWA fetch 事件不生效 最近接入 PWA ([Progressive Web App](Progressive Web App)), 我们不是 从 0 开始做，而是基于现在已有的架构，我们是服务端 Node 层做大前端支持，前端构建基于 Ykit 来进行 less 和 es6 的处理。 大概照着 官方教程 做的时候，无非就是注册 service worker, 然后标记需要缓存的资源，然后再进行请求拦截。巴拉巴拉巴拉~~~ 感觉应该很 easy 的事情，然而问题来了： 我注册了 service worker , 打开控制台 然后你可以到这里点击这里： 查看缓存的资源列表。然后点击进去调试，没有发现异常，install active 事件都触发了，但是 唯独 fetch 事件没有触发。 大概弄清楚原因后，首先谷歌了， 详情 »
