渐进增强快速入门

2020年12月30日11:03:44 发表评论 32 次浏览

本文概述

在构建Web应用程序时, 通常希望确保它们在尽可能多的浏览器上可用。这与最初设计网络时非常吻合。

我对Web的最喜欢的事情之一是, 它被设计为最通用的访问性和表达性平台, 无论硬件, 软件, 网络基础结构, 语言, 文化, 地理位置或身心能力如何。

这是渐进增强功能发挥作用的地方。

什么是渐进增强?

为网络构建时想到的第一件事是确定谁可能是你的应用程序的用户。渐进增强功能着眼于这些用户在不同设备上的体验, 并确保无论他们使用什么设备, 他们都可以从你的网站获得他们想要的价值。

渐进增强作为一个概念涉及在用户体验的基本级别上构建应用程序, 然后在浏览器支持时添加功能增强。如今, 浏览器已嵌入几乎所有内容中-移动设备, 笔记本电脑, 游戏机, 冰箱, 手表等等。

这些设备中的每一个都有不同的屏幕尺寸, 浏览器支持的功能等, 这些特性使体验独一无二。

渐进增强与正常降级

"如果目标是为尽可能多的用户提供服务, 为什么不先构建最佳体验, 然后开始支持其他浏览器呢?"这是我遇到的一个常见问题, 另一种方法称为正常降级。

正常降级是一种为现代浏览器构建应用程序的实践, 同时确保它在尽可能多的旧浏览器中保持功能。从某种意义上讲, 你可以将平稳降级称为渐进增强的相反方法, 因为它涉及在尝试确保较旧浏览器的基本功能之前首先关注现代浏览器。

随着性能的逐步下降, 主要浏览器的先前版本成为主要关注点, 并进行了一些小的修复以尽可能地适应这些浏览器。任何比这些年龄大的东西或与之不同的东西都可能会带来糟糕的体验。

但是, 通过逐步增强, 重点从内容开始。在添加其他功能和增强功能之前, 使这些内容易于使用时, 无论使用何种设备, 很多用户都可以从你的网站获得更多价值。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

渐进增强快速入门1

这就是使渐进增强成为更推荐的概念的原因。

渐进增强的工作原理

描述渐进增强的一个流行类比是花生M&M。花生M&M具有三层。一些人只喜欢花生, 其他人喜欢与巧克力的结合, 而其他人则喜欢用硬糖包装的整个包装。

花生是你的内容, 巧克力涂层是你的展示层, JavaScript是硬糖壳。

花生M&M类推渐进增强

Web开发中, 这些层包括HTML, CSS和JavaScript。

的HTML

第一层是干净的语义HTML, 可在任何浏览器或设备上使用;它无处不在。这是你可以确定地依赖的一层, 因为浏览器将始终显示某些内容。顾名思义, HTML负责内容的结构和标记。

内容的结构正确意味着即使CSS和JavaScript不可用, 它也仍然有价值。

的CSS

使用CSS, 我们可以改善内容的视觉设计, 并继续为其提供更多含义。 CSS的支持级别在不同的浏览器中有所不同, 用户还可以禁用或指定与你的样式表不同的样式表。默认情况下, CSS会逐步增强, 因此, 当浏览器遇到无法识别的属性时, 会忽略该属性。

你的应用程序的布局甚至可以大大增强, 从而为支持它的浏览器提供更好的体验, 而不会破坏那些不支持它的浏览器。

的JavaScript

JavaScript是所有这些层中最不可靠的。首先, 许多人出于安全原因禁用JavaScript。使用JavaScript, 你可以继续为支持它的浏览器提供增强的功能。这里推荐的方法是特征检测而不是浏览器检测。这意味着你检查浏览器是否具有此功能, 而不是尝试检测它是哪个浏览器。

为什么要使用渐进增强?

浏览器在不断发展, 尝试专门针对每个浏览器是疯狂的。渐进增强功能可帮助你将应用程序作为功能系统进行规划, 并优先考虑内容, 从而使你能够构建稳定的应用程序, 使其可以在任何设备和浏览器上运行, 即使你不知道这些设备和浏览器。

提高性能

这些年来, 网站的规模不断扩大。根据HTTP档案, 2017年的平均网页大小为3MB。与2014年的平均1.6MB相比, 这是一个巨大的增长。页面大小的增加导致加载时间的增加。

优化性能不仅重要, 而且也很有必要。渐进增强功能优先考虑你的内容, 确保用户可以尽快开始使用你的网站。

改善可及性

渐进式增强涉及从一开始就使用语义HTML标记你的内容。这不仅可以确保始终提供你的内容, 还可以确保搜索引擎爬网程序和屏幕阅读器始终可以读取你的内容。

逐步增强网站的技巧

避免内联样式

为了确保HTML的干净和语义, 我们还必须将样式与标记分开。这允许页面和内容以多种方式设置样式并根据各种浏览器和设备的支持进行更改。

简洁的JavaScript

这是尚未正式定义的基本原则。但这涉及确保依赖于JavaScript的任何行为或功能都与实际内容或表示形式完全分开。为了分开表示, 我们应避免使用JavaScript格式化内容, 而应使用CSS。另一个示例是将行为与标记分开, 如下所示:

<input type="text" name="date" onchange="validateDate()" />

的不断变化属性已在此处与标记相关联, 并且不是渐进式的。推荐的方法是将两者分开:

<input type="text" name="date" id="date" />

然后将事件处理程序添加到元素:

window.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('date').addEventListener("change", validateDate);
});

对于兼容的JavaScript, 还应该将JavaScript移至外部文件, 而不是将其嵌入到<脚本>标签。

预加载字体

如今, 许多网站都使用Web字体, 这是可以理解的, 因为它们可以很漂亮。但是, 当用户使用慢速网络时, 他们将花费更长的时间来加载, 并且肯定会降低用户的体验, 因为在加载字体之前不会显示内容。

解决此问题的渐进方法是将系统字体设置为默认字体, 该字体应用作后退以呈现内容, 然后在加载完成后更改为Web字体。

响应度和媒体查询

在构建Web解决方案时, 不能过分强调使应用程序在所有设备上正常显示的重要性。建议的做法是遵循移动优先的方法, 该方法首先建立移动布局, 然后逐步扩展到更大的屏幕。

由于桌面布局通常比移动布局更复杂, 因此, 你可以最大限度地利用可重复使用的CSS。 Web响应能力是通过使用CSS媒体查询来实现的, 丰富的资源来自internetingishard.com的解释很好。使用CSS媒体查询, 可以以不同的布局呈现相同的内容。

逐渐延迟加载图像

延迟加载图像是一种用于通过减少呈现初始页面所需的请求和数据的数量来提高网页性能的技术。延迟加载后, 图像才会加载到浏览器的视口中。这对于提高性能非常有用, 但是通常涉及使用JavaScript库动态加载这些图像。

对于未启用JavaScript的设备, 这将成为一个问题, 我们必须找到一种方法来确保下载图像时不使用JavaScript。要考虑到渐进增强的延迟加载, 可以添加一个后备<img>一个内的元素<noscript>浏览器可以依赖的标签。

<img data-src="path/to/image.jpg" alt="渐进增强快速入门" class="lazy-load"></img>
<noscript>
    <img  src="path/to/image.jpg" alt="渐进增强快速入门"></img>
</noscript>

我也发现了懒加载器旨在实施渐进增强功能和有效的HTML, 你可以选择使用它们。

特征检测

同样重要的是要确保当我们尝试执行特定操作或加载脚本时, 我们会检查功能是否可用, 以便我们不会加载不必要的脚本或如果设备不支持脚本就会失败的脚本。

通过检查功能是否存在, 我们能够为使用支持所需功能的更新浏览器的用户量身定制增强的体验。

现代化是一个可以用于此目的的流行工具。它会自动检测用户浏览器中的下一代Web技术的可用性。这样, 我们可以避免在不需要额外脚本时加载它们。

总结

渐进增强不是一个新概念。这是一项重要的实践, 可帮助我们构建可在尽可能多的设备上使用的网站和应用程序, 同时仍能够在可用时进行扩展, 更改和实施新功能。在继续构建网络解决方案时, 请务必牢记渐进的增强功能。

你的前端占用了用户的CPU吗?

随着Web前端变得越来越复杂, 资源贪婪功能对浏览器的需求也越来越大。如果你有兴趣监视和跟踪生产中所有用户的客户端CPU使用率, 内存使用率等,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR, 它记录了Web应用程序或网站中发生的一切。你不必猜测为什么会发生问题, 而是可以汇总并报告关键的前端性能指标, 重播用户会话以及应用程序状态, 记录网络请求, 并自动发现所有错误。

现代化调试Web应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: