在进行现代化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前端开发不是一个容易掌握的主题。快速入门可以，但是要掌握它则需要一定程度的经验和学习的积累，才能够使用正确的工具，在恰当的水平上解决正确的问题。解决前端中的问题时会涉及到很多层次和细节。
此外，由于各种原因（例如性能，可用性或可维护性等），你需要了解何时应该在后端而不是在前端解决问题。
总而言之，请记住，有时候我们无需绞尽脑汁地寻求完美的解决方案，可能一些可行的方案就足以应付生产发布和供终端用户使用。
（文本完）
每日分享前端插件和前端开发教程，欢迎扫码关注我的公众号：前端新世界