字节码缓存（Bytecode Cache），是浏览器性能优化机制中重要的一项，通过缓存 解析（pasing）+编译（compilation）的结果，减少网站的启动时间；当前市面上主流的浏览器都实现了字节码缓存功能；
Service Worker 一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。
解释：在用户浏览网络的时候，同一个域名下的网页大部分是有很多共同文件的，比如第三方js文件，css文件，所以我们不可能当用户每浏览一个网页或者刷新同一个网页时，所有文件都重新请求，那样的页面加载时间将会大大延长，用户体验也相当不好。
今天，我们将深入研究Chrome 的网络栈，以明确 web 加载原语(如<link rel= preload > & <link rel= prefetch >) 背后的工作原理，以便你能够更有效地使用它们。
当今互联网时代，用户对网站性能和加载速度的要求越来越高。作为前端开发人员，了解和实施适当的缓存策略是确保优质用户体验的重要一环。想象一下，您正在访问一个网站，页面加载缓慢，图片无法显示，样式丢失，这种情况不仅影响了您的心情，也可能让您转而寻找其它更快速稳定的同类型网站。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。
最近大家针对preload、HTTP/2 push和ServiceWorker的浏览器缓存实现展开了激烈的讨论，而这也引起了很多人的疑惑。
处理好浏览器缓存对提升系统的性能有很大的帮助，为什么要使用缓存，我们一般请求资源后直接使用，当我们再次请求资源时，还要继续从服务器拿到数据吗？答案不以为然，当第一次请求资源后，可以进行缓存，然后再次请求资源时可以直接从缓存中读取，提高了效率。
<link rel="preload" href="/path/to/style.css" as="style">
从 Chrome 68 开始，service worker 脚本检查更新的HTTP请求将默认不受 HTTP cache 的影响。这可以解决开发人员的共同难题，即在 service worker 脚本上设置无意的 Cache-Control 标头可能导致的更新延迟。
上图展示了一个 Web 应用最最简单的结构。客户端向服务器端发送 HTTP 请求，服务器端从数据库获取数据，然后进行计算处理，之后向客户端返回 HTTP 响应。
当用户请求一个页面时，浏览器获取 HTML 构造 DOM，获取 CSS 构造 CSSOM，然后通过匹配 DOM 和 CSSOM 生成一个渲染树。只要需要解析 JavaScript 时，浏览器就会延迟开始渲染页面的时间。作为开发人员，我们必须明确地告诉浏览器立即开始渲染页面。可以通过给脚本添加 HTML 中的 defer 和 async 属性。
Promise是可以链式调用的，由于每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用, 它并不像一般任务的链式调用一样return this。
介绍 首先，写给所有移动端开发的同学：PWA(Progressive Web Apps) 一定是将来的移动开发趋势，且学且珍惜。 Progressive Web Apps 比小程序还要方便，对于首次访问的用户可以直接在浏览器中进行访问，不需要安装应用。即使在比较糟糕的网络环境下，也能够快速地加载，且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏，能够有全屏浏览的体验。 PWA 和 Service Worker 是什么关系？Service Worker 是一个运行在浏览器后台进
http请求做为影响前端性能极为重要的一环，因为请求受网络影响很大，如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是，对于重复进入页面的用户，除了浏览器缓存，http缓存可以很大程度对已经加载过的页面进行优化。
在 HTML5 规范中提出了工作线程（Web Worker）的概念，允许开发人员编写能够脱离主线程、长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。
在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。在学习过程中发现，想要弄明白WorkBox，有一点很关键，我们需要搞懂Service Worker。
很多网站的资源后面都加了版本号，这样做的目的是：每次升级了JS或者CSS文件后，为了防止浏览器进行缓存，强制改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，以保证用户能及时获得网站的最新更新。
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以在第一和第三个步骤汇总优化性能。比如说，直接使用缓存而不发起请求，或者发起请求但后端存储和前端一致，就没有必要再将数据回传回来，这样就减少了相应数据。
https://juejin.cn/post/6947936223126093861
众所周知，JavaScript 是单线程的语言。当我们面临需要大量计算的场景时（比如视频解码等），UI 线程就会被阻塞，甚至浏览器直接卡死。现在前端遇到大量计算的场景越来越多，为了有更好的体验，HTML5 中提出了 Web Worker 的概念。Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。Web Worker 是一个统称，具体可以细分为普通的 Worker、SharedWorker 和 ServiceWorker 等，接下来我们一一介绍其使用方法和适合的场景。
本文首发于饿了么前端——知乎专栏 大家可以点击文章底部的阅读原文来访问原文 Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系
本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲，其分享了处理 JavaScript 的脚本优化建议，大幅地减少了下载时间和执行时间。
你的网页性能优化的再好，如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。
Service的意思是服务，Worker的意思是工人，那么Service Worker的意思就是服务员。这个员工是2014年6月HTML5新招的实习生，目前在试用中。在此之前，已经有一位老员工，它叫Web Worker。那么问题来了，Boss是谁？Boss就是浏览器。准确来说，每个页面的javascript运行主线程都是一个Boss。
渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可以让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。
原作者 | 黄玄 原文地址 | 来自知乎 首先感谢黄玄 为爱学习的前端同学们提供了如此优秀的文章。其次本文除了讲解PWA的实践之外，还讲解了很多浏览器渲染的机制相关，值得各位细细品读。 自 Vue.j
概述 在讲Service Worker之前先说一下另一个概念：PWA(Progressive Web Apps) Progressive Web App：是一个具有响应式布局的Web应用，可以离线工作，并能够安装到设备的主屏幕上。其实是在主屏幕上添加该Web应用的快捷方式。 Service Worker：一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静静更新以及地理
打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。
2、除了在插件内部contenscript background 和 popup之间传递消息以外，其他网站也可以给插件发送消息。方法如下 首先，需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息，相当于白名单，只有在白名单中的站点发送的消息，扩展才会监听
它允许在 Web 程序中并发执行多个 JavaScript脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且有浏览器中的 JavaScript引擎负责管理。这将使得线程级别的消息通信成为现实。使得在 Web 页面中进行多线程编程成为可能。
本文介绍了Web Worker和Service Worker的基本概念、用途以及区别。Web Worker可以在浏览器后台运行JavaScript，实现异步加载和执行，提高页面性能。Service Worker是Web Worker的升级版，具有更丰富的功能和更好的兼容性，支持多种浏览器。使用Service Worker可以离线推送、后台同步、消息推送等。
Web Worker 是浏览器内置的线程，用于执行非阻塞事件循环的 JavaScript 代码。由于 JavaScript 是单线程语言，一次只能处理一个任务。复杂任务的出现可能导致主线程被阻塞，严重影响用户体验。Web Worker 的作用是允许主线程创建 worker 线程，使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务，然后将结果返回给主线程。简而言之，worker 线程执行复杂计算，同时保持页面（主线程）的流畅性，不会造成阻塞。
关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。
Chrome算是程序员的标配了，从全球的市场份额来看，它在全球市场的份额已经超过 60%。
阿里妹导读：本文分享支付宝小程序 V8 Worker 相关工作沉淀和总结，包括技术演进、基础架构、基础功能、以及 JS 引擎能力输出，以及一些优化方案等。欢迎同学们共同探讨，指正。
Service Worker最佳实践 1 Service Worker介绍 Service Worker是一项比较新的Web技术，是Chromium团队在吸收了ChromePackaged App的E
在前段时间参加的CTF中，有一个词语又被提出来，Service Worker，这是一种随新时代发展应运而生的用来做离线缓存的技术，最早在2015年被提出来用作攻击向，通过配合xss点，我们可以持久化的xss控制。
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也是如此，现在各行业都在推出自己的App，但有没有人想过这样一种场景，如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App？那有没有使App更轻量，更易安装的技术实现呢？答案是“有的”。
什么是http缓存呢，当我们使用chrome浏览器，按F12打开控制台，在网络请求中有时候看到状态码是200，有时候状态码是304，当我们去看这种请求的时候，我们会发现状态码为304的状态结果是：Status Code: 304 Not Modified，而状态码为200的时候一般会有四种情况，一种是直接返回200，没有任何其他的标志，另一种是Status Code: 200 OK (from memory cache)，还有一种是Status Code: 200 (from disk cache)。最后一种不是太常见，Status Code: 200 (from Service Worker).后面这三种状态码看到的效果是灰色的，其实从给出的信息也能看出来是从缓存中获取上数据。下面我们来详细介绍一下他们都分别是什么时候出现的。
DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。HTML 解析器 (HTMLParser) 模块负责将 HTML 字节流转换为 DOM 结构。网络进程接收到响应头后会根据响应头中的 content-type 字段来判断文件的类型，若为 text/html，则为该请求创建一个渲染进程。渲染进程准备好后，网络进程和渲染进程之间会建立一个共享数据的管道，HTML 解析器并不是等整个文档加载完成之后再解析，而是网络进程加载了多少数据，HTML 解析器便解析多少数据。
pwa-之service worker 基本概念 pwa-之service worker 离线文件处理
有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现，一些问题已经得到了解决。有一个叫做 APP Cache 的 API 可以提供离线体验，但它的问题比较多。最重要的问题是，仍然没有一个好的统筹机制对资源缓存和自定义的网络请求进行控制。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
