随着移动设备的普及，用户对网页的性能要求越来越高。对于移动端网页而言，缩短页面加载时间、减小页面体积成为了攻克性能问题的重中之重。本文将介绍如何使用 PWA 和 AMP 技术实现双赢的网页性能优化方案。
什么是 PWA 和 AMP？
PWA（Progressive Web Apps）是一种通过增强现有 Web 技术的方式，让 Web 应用具备原生应用的一些体验和能力的技术。PWA 能够让用户在离线的情况下依旧能访问网站的内容，具有快速、可靠、安全等特点。
AMP（Accelerated Mobile Pages）是一种优化手机 Web 浏览器查看网页的框架，帮助网页更快地加载。在 AMP 中，页面文件相对简单，注重内容呈现和访问速度，一般情况下对异步渲染有更高要求。
PWA 和 AMP 如何实现网页性能优化
PWA 缓存技术
使用 PWA 缓存技术，能够将网页内容缓存在用户本地，即使没有网络，用户也能够继续浏览以前缓存的内容。PWA 的缓存主要分为两种：静态缓存和动态缓存。
静态缓存是指 Web 应用程序的基础 HTML、CSS 和 JavaScript 文件所在的缓存，并存储在浏览器中，包括当前页面和其他页面内容。动态缓存是指用户访问时延迟加载的数据，当用户到达某个页面时，动态缓存将保存该页面内容并存储至浏览器中。
-- -------------------- ---- -------
-- --------
-------------------------------- - -- -
------------
---------------------------------- -- -
------ --------------
----
--------------
-----------------
-------------
------------------------------------
---
--
--
---AMP 进行异步加载优化
AMP 是使用缩减版 HTML 实现的，最新的 AMP 版本已经升级为 HTML5 规范，但仅支持特定的 HTML 标记和特殊的 AMP 标签。与 PWA 不同，AMP 的目标是创建快速的 Web 内容，而不是创建一个 Web 应用程序。
在 AMP 中，很多功能都被精简了，包括 CSS 和 JavaScript 的使用，不允许自定义 JavaScript 和外部脚本。同时，AMP 还提供了自己的标记，如 amp-img、amp-audio 等，这些标记都是经过 AMP 校验的。
在网络较慢的情况下，使用异步加载可以提高页面效率，减少页面加载时间，从而提升用户体验。在 AMP 中，使用 amp-lazyload 标签可以实现图片的异步加载。
// amp-lazyload 示例代码 <amp-img src="https://example.com/image.png" width="300" height="300" layout="responsive" alt="example image" class="lazy"> <div placeholder>正在加载...</div> <div fallback>加载失败。</div> </amp-img> <script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>
PWA 和 AMP 的双赢方案
结合 PWA 和 AMP，能够实现双赢的优化方案。PWA 可以缓存容易被重复访问的内容，在用户离线时提供无缝体验，而 AMP 可以减少首次页面加载的时间，让用户能够快速访问内容。同时，这两种技术都是以提高用户体验为目标的，结合使用可以进一步提升这个目标的实现程度。
结论
PWA 和 AMP 技术无疑已经成为了优秀前端开发中的关键技术。结合这两种技术，可以实现更加完善和可靠的网页性能优化方案。在制定性能优化计划之前，我们需要了解当今的前端开发技术，同时也需要知道网站访问者的需求和体验。加强对这两种技术的了解可以让我们更好地应对性能瓶颈问题，从而使网站提供更好的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cef309babaf620fb390b6