现如今，Web 应用已经成为人们日常生活和工作中不可或缺的一部分，但是传统的 Web 应用在性能和用户体验上仍然存在很大的问题，比如页面加载慢、响应时间长、不兼容移动端等。针对这些问题，我们介绍了两种优化方案：AMP 和 PWA，帮助 Web 应用开发者提供更好的用户体验，提升应用的性能和可用性。
AMP（Accelerated Mobile Pages，加速移动页面）
AMP 是由 Google 发起的一项开源项目，旨在提高移动设备上网页的速度。它能够通过缩小 HTML、CSS、JavaScript 的大小来加速页面的加载时间，并且会在页面加载之前先加载 Web 服务器缓存中的内容，避免了网络延迟时间。
下面的例子演示了如何在 HTML 文件中使用 AMP：
-- -------------------- ---- -------
--------- -----
----- - ----------
------
----- ----------------
------------- ------------
----- --------------- -------------------------------------------------------------------------------------
----- --------------- -------------------------------------------------------------
------- ----- ------------------------------------------------
------ -----------
-- -
------- -----
------ ---------
-
--------
-------
------
--------- ----------- ------ ----------
------ --- ------- -- -- ----------- ---------- -- ---- --- --- ------ --- ---- --- ------- ------- --- -------- -- -------- --- --- ---- --- ------------ ----- --------- --- --------------- ------ ------- --- ------------ --------------
-------
-------在上面的 HTML 文件中，我们可以看到如下几点：
html标签上有一个 ⚡ 符号，表示这是一个 AMP 页面；- 加载了 AMP 的 JS 文件，并使用了
amp-custom标签来自定义样式； - 这个页面采用了类似标记（markup）设计的方式，将内容分散到多个组件中。
使用 AMP，我们可以加速页面的加载速度，提升用户体验，但是也有一些限制，比如不能使用自己的 JavaScript，限制 CSS 的使用等。
PWA（Progressive Web Apps，渐进式 Web 应用）
PWA 是一种新型的 Web 应用，可以像原生应用一样，离线访问、推送通知、像应用一样打开、提供快速响应等特点，以及能够在所有设备（手机、电脑、平板等）上运行。
下面的例子演示了如何将 Web 应用转化为 PWA：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
---------- ---------------
----- -------------- -----------------------
----- ---------------- --------------- -----------------------
-------
------
---------- -----------
------- -- -- ------- -- --------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-
---------
-------
-------在上面的 HTML 文件中，我们可以看到如下几点：
- 引入了
manifest.json文件，用来定义图标、主题色、启动页面等信息； - 引入了 CSS 文件，为页面添加样式；
- 注册了 Service Worker，使得网站能够在离线状态下缓存资源且在后台运行。
使用 PWA，我们能够为用户提供类似原生应用的体验，并且可以使用离线缓存技术来提升性能和用户体验。但是也有一些限制，比如需要 HTTPS 支持，只能运行在支持 Service Worker 的浏览器中。
结论
在这篇文章中，我们介绍了两种优化方案：AMP 和 PWA。AMP 适用于移动设备上的网页，并且可以通过缩小 HTML、CSS、JavaScript 的大小来提升页面的加载速度；PWA 则可以让 Web 应用像原生应用一样运行，并且能够通过离线缓存技术来提升性能和用户体验。在实际开发中，我们可以根据实际需求选择适合自己的方案来优化 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f07b0b6fbf960197332f1f