在进行现代化Web前端开发时,使用着自己最爱的框架,有时候可能会情不自禁地用JavaScript解决所有的问题。很多时候这是无意识的,因为你日复一日的开发工作使用的正是JS。

这类似于亚伯拉罕·马斯洛(Abraham Maslow)在1966年描述的情况:

图片来自Unsplash,作者FaustoMarqués

实现UI时要考虑的因素

在所有情况下都使用JS的这种思维方式会产生不必要的处理负担,这些额外的JS操作都需要在最终用户的设备上运行。网站上的所有JS资源都需要通过网络浏览器下载、解析和执行。这通常是导致低端移动设备上的网站速度变慢和无响应,或使得网络速度变慢的原因。

那么我们应该如何走出思维困局:

这种思维方式对开发人员来说并不是一件易如反掌的事。可能你是一个关注JavaScript的前端开发人员,那么用这种方式解决大多数问题对你来说像呼吸一样自然。但是,你还得考虑你的最终用户。当涉及到Web性能时,客户端JS作为最大的问题一骑绝尘。

1. 是否可以用HTML完成?

计划和实现功能的基本结构和语义,先考虑是否可以使用纯HTML,而无需任何额外的样式和使用本机HTML元素和功能。如果需要一些其他样式或功能,则转到步骤2。

2.尝试使用HTML + CSS解决

使用CSS来应用所需的其他样式或动画,同时在脑海中谨记语义和可访问性。如果你要构建的特定UI片段中需要有一些额外的互动,则转到步骤3。

3.使用HTML + CSS + JS

添加满足要求所需的最少JS代码量。请记住,如果不用JS就可以解决问题,那么就应该不要用到JS。

完成后,向同事展示代码,让他们进行审核。这样的话,如果代码中还有些不必要的部分,那么就可以解决这些问题而不给用户增加客户端JS成本。

举个简单的例子

所举的这个例子,发生于Web前端开发中的几乎所有部分,但此处是一个简单的示例,用来证明我的观点。

假设你正在开发一个React项目,而你正在开发的功能具有一些UI部件,这些UI部件只有在一定的延迟(例如2秒)之后才可见。

使用React Hooks

如果你习惯于使用React和Hooks解决问题,那么最初的解决方案可能是这样的:

const [thingVisible, setThingVisible] = useState(false);

useEffect(() => {
  const timeoutId = setTimeout(() => {
    setThingVisible(true);
  }, 2000);

  return function cleanup() {
    clearTimeout(timeoutId);
  };
}, []);

return thingVisible ? <section>Here's a thing for you!</section> : null;

代码不错,且有效。也许你在功能强大的开发机器上都没有发现性能差异。甚至在这个示例中,可能也没有实际的性能问题。但是想象一下,如果这些堆积起来,突然之间,有数十或数百个类似的不必要的JS计算将在客户端运行,亦或者客户端正在执行一些更大、更长的执行。

使用HTML + CSS动画

使用CSS,你可以使用CSS动画和animation-delay对内容进行动画处理,以使其延迟显示在页面上。所有浏览器都支持此功能,甚至可以提供更好的终端用户体验,因为你可以淡入内容或使用任何其他方式使内容显现得更顺畅。

HTML:

<section class="fade-in">Here's a thing for you!</section>

CSS:

.fade-in {
  opacity: 0;
  animation: fadeIn 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

可以使用HTML处理,就不用CSS

同理,如果是可以或应该用HTML处理的一些内容,那么就不要使用CSS进行操作。

一个极端的例子是,假设我们不小心使用边距隔离两个单词,而不是在单词之间使用空格!这显然不是一个好主意,至少从以下几个方面来看:

  • 可能不遵循字体大小,字母间距等。
  • 没有必要,浪费精力
  • 如果有人需要复制文本,那么单词之间会没有空格

前端开发并不容易

Web前端开发不是一个容易掌握的主题。快速入门可以,但是要掌握它则需要一定程度的经验和学习的积累,才能够使用正确的工具,在恰当的水平上解决正确的问题。解决前端中的问题时会涉及到很多层次和细节。

此外,由于各种原因(例如性能,可用性或可维护性等),你需要了解何时应该在后端而不是在前端解决问题。

总而言之,请记住,有时候我们无需绞尽脑汁地寻求完美的解决方案,可能一些可行的方案就足以应付生产发布和供终端用户使用。

(文本完)

每日分享前端插件和前端开发教程,欢迎扫码关注我的公众号:前端新世界

03-13 02:18