哈囉！我是 Harry，這次想和大家分享的是前端工程師的「工作日常」，我們可能會接到什麼需求，又該如何完成需求，這些都是工程師再熟悉不過的日常生活。

如果你想嘗試前端，卻對前端職場感到陌生而卻步，也許這個系列可以幫助你找到自己的方向。

系列內容

本系列的主要內容，都會提供當下的場景以及收到的需求，並提供對應的解決方案，大致上可以將架構分為：

• 場景描寫（我的產品是什麼）
• 需求描寫（遇到什麼問題）
• 需求分析（列出解決方案）
• 完成需求（執行解決方案）

舉例來說 —

場景描寫

我們的產品是一個展示圖片的網頁，網頁已經完成並上線了，你正喝著咖啡欣賞著自己寫下的優美程式碼，此時 PM 的聲音將你拉回現實：

需求描寫

「有用戶反應載入的速度很慢，圖片根本就跑不出來！可以幫忙看一下是什麼問題嗎？」

這時候，你的第一個反應可能是，「我的程式有問題⋯怎麼可能，失、失序了⋯」，這是很正常的反應，我們辛苦寫出來的程式碼居然被質疑有問題，這對工程師來說無疑是個沈重的打擊。

需求分析

但身為一個專業的前端工程師，我們必須拿出專業的態度來檢視並解決這個問題，所以首先我們要想一下自己的程式哪裡可能會有破綻 —

• 「圖片列表一次拿幾張圖？100 張？」
• 「畫面頂多顯示 10 張就極限了，是不是一次顯示 100 張太浪費資源了？」
• 「如果拿了 100 張但只需要顯示 10 張⋯該怎麼做呢？」

通常透過這樣的自問自答，就能夠發現問題的所在，沒錯！我們的確不需要一次顯示 100 張圖，因為「畫面上看不到的圖片下載下來就是浪費」，我們無法確保使用者真的會看完 100 張圖對吧？

所以我們重新整理思路，圖片出現在畫面上了再去拿圖片資源，這個行為的重點是什麼，他在技術上該怎麼稱呼？

Lazy Loading、懶加載、按需加載

現在我們已經列出了解決問題的方案，最後我們重新將 PM 提出的需求內化一次 —
「透過對圖片加入 Lazy Loading 來優化網頁速度」
完美。

完成需求

剩下的就是動手寫程式，把這個需求解決掉，繼續享受美好的放空時光。

結語

這裏我簡單的舉例了這系列所進行的模式，不知道這樣的情境模擬有沒有讓各位看官有身歷其境的感覺呢？

之後的文章就會加入程式碼來讓整體體驗更加豐富，我預計會用 CodeSandbox 來做示範，如果對它不太熟悉的朋友們可以先去玩玩看！

這次的系列前言就到這裡結束，如果有想聽的題材也歡迎在底下留言讓我知道，我們下次見。

掰掰～