哈罗！我是 Harry，这次想和大家分享的是前端工程师的「工作日常」，我们可能会接到什麽需求，又该如何完成需求，这些都是工程师再熟悉不过的日常生活。

如果你想尝试前端，却对前端职场感到陌生而却步，也许这个系列可以帮助你找到自己的方向。

系列内容

本系列的主要内容，都会提供当下的场景以及收到的需求，并提供对应的解决方案，大致上可以将架构分为：

• 场景描写（我的产品是什麽）
• 需求描写（遇到什麽问题）
• 需求分析（列出解决方案）
• 完成需求（执行解决方案）

举例来说 —

场景描写

我们的产品是一个展示图片的网页，网页已经完成并上线了，你正喝着咖啡欣赏着自己写下的优美程序码，此时 PM 的声音将你拉回现实：

需求描写

「有用户反应载入的速度很慢，图片根本就跑不出来！可以帮忙看一下是什麽问题吗？」

这时候，你的第一个反应可能是，「我的程序有问题⋯怎麽可能，失、失序了⋯」，这是很正常的反应，我们辛苦写出来的程序码居然被质疑有问题，这对工程师来说无疑是个沈重的打击。

需求分析

但身为一个专业的前端工程师，我们必须拿出专业的态度来检视并解决这个问题，所以首先我们要想一下自己的程序哪里可能会有破绽 —

• 「图片列表一次拿几张图？100 张？」
• 「画面顶多显示 10 张就极限了，是不是一次显示 100 张太浪费资源了？」
• 「如果拿了 100 张但只需要显示 10 张⋯该怎麽做呢？」

通常透过这样的自问自答，就能够发现问题的所在，没错！我们的确不需要一次显示 100 张图，因为「画面上看不到的图片下载下来就是浪费」，我们无法确保使用者真的会看完 100 张图对吧？

所以我们重新整理思路，图片出现在画面上了再去拿图片资源，这个行为的重点是什麽，他在技术上该怎麽称呼？

Lazy Loading、懒加载、按需加载

现在我们已经列出了解决问题的方案，最後我们重新将 PM 提出的需求内化一次 —
「透过对图片加入 Lazy Loading 来优化网页速度」
完美。

完成需求

剩下的就是动手写程序，把这个需求解决掉，继续享受美好的放空时光。

结语

这里我简单的举例了这系列所进行的模式，不知道这样的情境模拟有没有让各位看官有身历其境的感觉呢？

之後的文章就会加入程序码来让整体体验更加丰富，我预计会用 CodeSandbox 来做示范，如果对它不太熟悉的朋友们可以先去玩玩看！

这次的系列前言就到这里结束，如果有想听的题材也欢迎在底下留言让我知道，我们下次见。

掰掰～