前端

服务端

计算机基础

PWA (Progressive Web App)是一种渐进式Web应用程序，它是基于Web技术构建的应用程序，可以像本地应用程序一样运行在各种设备和平台上，包括桌面、移动设备和平板电脑等。

PWA具有许多本地应用程序的功能，例如离线访问、推送通知、主屏幕快捷方式等，同时还具有网页应用程序的优势，例如可访问性、跨平台性等。PWA可以通过Web浏览器安装到设备中，无需通过应用商店进行下载和安装。

PWA使用一组现代Web技术，例如Service Workers、Web App Manifests、HTTPS等，以提供一个类似于本地应用程序的体验。使用PWA，用户可以在设备上安装应用程序，无需访问应用商店，而且在网络不可用时，应用程序仍然可以正常工作。

PWA是一种新兴的Web技术，它正在成为Web应用程序的未来，许多公司和组织正在将其应用于其Web应用程序，以提供更好的用户体验和更高的用户参与度。

渐进式Web应用程序（PWA）是一种通过使用现代网页技术构建的应用程序，它具有传统原生应用的体验和性能。它意在将网页和移动应用的优势结合起来，提供一个快速、可靠且更加吸引人的用户体验。

PWA的关键特性包括：

1. **渐进式** - 适用于所有用户，无论用户使用的设备和浏览器如何，都能提供基本功能，因为它是以渐进增强作为核心理念构建的。
2. **响应式** - 能够适配任何形式的设备：桌面、手机、平板或未来的设备。
3. **离线工作** - 通过Service Workers可以管理网络请求，缓存应用的资料，从而使应用能够在离线或网络质量不佳的情况下运行。
4. **类似应用的交互体验** - PWA可以通过像Manifest和Service Workers这样的技术，提供全屏体验、推送通知等原生应用特性。
5. **安全** - 通过HTTPS提供，确保应用层面的数据传输安全。
6. **可发现性** - 由于是基于Web的，因此PWA可以通过搜索引擎发现，这比传统的原生应用更具有优势。

例如，Twitter的PWA—Twitter Lite，就是一个非常成功的案例。Twitter Lite通过PWA技术，使得用户即使在网络不稳定的地区也能快速加载并使用Twitter。这不仅提升了用户体验，还显著增加了用户的参与度和页面浏览次数。

什么是渐进式Web应用程序（PWA）？

在HTML中，`<script>`标签的`async`和`defer`属性用于控制外部JavaScript文件的加载和执行方式。

- `async`属性：当使用`async`属性时，脚本文件会被异步加载。这意味着脚本文件的下载会在HTML解析的同时进行，但不保证脚本会按顺序执行。一旦脚本下载完毕，它会立即执行，同时HTML的解析可能会暂停，直到脚本执行完毕。

- `defer`属性：使用`defer`属性时，脚本文件也会异步加载，但脚本的执行会被推迟到整个HTML文档解析完毕后。这保证了脚本的执行顺序是按照它们在HTML文档中出现的顺序。

总的来说，这两个属性都是为了改善页面的加载时间与用户体验，但`async`适用于那些不依赖于其他脚本且脚本顺序执行不重要的场景，而`defer`则适用于需要保证脚本执行顺序的场景。

script标签中的“async”和“defer”属性的作用是什么？

提高PWA（Progressive Web App）的性能可以从以下几个方面进行：

1. **服务工作器优化**：服务工作器（Service Worker）是PWA的核心，负责资源的缓存和离线功能。合理设置缓存策略，如使用缓存优先（cache-first）策略对静态资源进行缓存，对API请求使用网络优先（network-first）策略以确保数据的实时性。

2. **懒加载**：实现图片、视频或长列表的懒加载，只在用户滚动到它们时才加载这些资源。这可以显著减少初次加载页面时的数据传输量，并提高页面响应速度。

3. **Minify 和压缩资源**：使用工具如Webpack或者Gulp来压缩JavaScript、CSS和HTML文件，减少文件体积，加快加载速度。

4. **使用HTTP/2**：HTTP/2 提供了头部压缩、服务器推送等功能，可以减少延迟，提高加载效率。确保服务器支持HTTP/2可以显著提升资源加载速度。

5. **优化图片**：对图片进行格式优化（如使用WebP格式），并根据设备进行适当的尺寸调整，减少不必要的数据加载。

6. **使用Web Assembly**：对性能要求极高的任务，可以考虑使用Web Assembly来提高执行效率，特别是在处理图形渲染或视频编解码等场景。

7. **动态导入**：对JavaScript模块使用动态导入（Dynamic Imports），按需加载模块，减少不必要的JavaScript加载和解析时间。

8. **预加载和预获取**：使用 `<link rel="preload">` 和 `<link rel="prefetch">` 为未来的导航请求资源，可以提前加载关键资源。

9. **优化CSS和JavaScript执行性能**：减少重绘（Repaints）和回流（Reflows）的产生，优化动画的性能，避免长时间运行的JavaScript任务阻塞主线程。

通过这些具体的技术策略和方法，可以有效提高PWA的性能，提升用户体验。

PWA面试题手册

什么是渐进式Web应用程序（PWA）？

script标签中的“async”和“defer”属性的作用是什么？

如何提高PWA的性能？