0%

發表於 更新於 分類於 ， Disqus：

要知道 JavaScript 執行期（runtime）究竟在做什麼事情？絕對不能不知呼叫堆疊（Call Stack）、事件循環（Event Loop）及任務隊列（Job Queue）。

前陣子介紹了 JavaScript 執行期間如果只有同步（Synchronous）的程式碼時是非常容易理解的，因為我們只需要理解呼叫堆疊（Call stack）中的執行環境（Execution Context），就能夠透過變數物件（Variable）、執行物件（Activation Object）、作用域鍊（Scope Chain）來理解作用域（Scope）與以及閉包（Closure）等等概念。

那麼非同步要以什麼方式來理解呢？那就是靠任務循環（Event Loop）以及任務序列（Job Queue）的機制啦！

閱讀全文 »

發表於 更新於 分類於 Disqus：

Rule Of Three 原則

如果說 DRY 原則是將抽象發揮到極致，而 KISS 原則是保留抽象盡可能的使其單純化，那麼接下來三次原則（Rule Of Three principle）可以說是這兩個原則之間的中庸之道了。

而三次原則顧名思義其實就是重複到第三次才去抽象它！

還記得之前所提過的 YAGNI 原則（You aren’t gonna need it 原則）嗎？

三次原則可以說是提供了 YAGNI 原則一個準則，使得在重構上（refacting）的時機更有規則，但是為什麼會需要等待第三次才要抽象呢？接著就來思考這個問題。

閱讀全文 »

發表於 更新於 分類於 Disqus：

YAGNI 原則

繼 DRY 原則與 KISS 原則之後，最常被並列再一起討論的非 YAGNI 原則莫屬了，而 YAGNI 原則（You aren’t gonna need it），顧名思義為你不會需要它。但到底程式設計中我們會不需要什麼呢？

仔細回想一下，有沒有曾經在開發過程中為了預先擴充某樣功能而撰寫程式碼的經驗？

最終那些為了擴充的程式碼最後有真的派上用場還是就默默冷落在角落成為雞肋的存在？

抑或是派上了用場但與當初所預設的規格有所不同？

對於 YAGNI 原則來說，這些都是應該自己盡量避免的，而幾個可以達到 YAGNI 原則的概念：

閱讀全文 »

發表於 更新於 分類於 Disqus：

KISS 原則

繼上次避免重複原則（DRY principle）後這次要來介紹的程式三大開發原則之一的簡單原則（簡稱 KISS 原則，即為 Keep it simple and stupid.）。

這個開發原則在古文中早已有驗證，在老子《道德經》之中，有句話叫做「萬物之始，大道至簡，演化至繁。」意思簡單來說就是任何事物之中，一開始都是非常簡單而直白的，經過不斷演化之後，才到達繁的境界，而程式設計也理應如此。

而 KISS 原則追尋的便是那種大道至簡的精神。

那麼我們要如何追尋這個原則呢？

閱讀全文 »

發表於 更新於 分類於 Disqus：

DRY 原則

這次要來介紹的是我覺得開發程式中最有感的避免重複原則（簡稱 DRY 原則，意思即為 Don’t repeat youself!）。

根據此篇文章所述，在 The Pragmatic Programmer 一書中，DRY 發生的原因總共可以分為四種類別：

  • 強加的重複(Imposed duplication)
  • 無意的重複(inadvertent duplication)
  • 懶惰的重複(impatient duplication)
  • 開發者間的重複(inter-developer duplication)：

以下是四種類別所表示的意義：

閱讀全文 »

發表於 更新於 分類於 ， Disqus：

之前有文章寫到在替網頁進行優化時會使用到像是 Google Chrome 瀏覽器的 Lighthouse 網頁檢測工具，並且會給予一些可行方案與提示來協助我們優化。而其中指標（Metrics）提示可能會要我們去觀察像是第一次內容繪製（FCP，First Contentful Paint）或是第一次有意義的繪製（FMP，First Meaningful Paint）等等。

但這些指標名詞代表更實際的意義在哪裡？這篇文章就要來整理一下這些東西：

閱讀全文 »

發表於 更新於 分類於 ， Disqus：
lighthouse-logo

Lighthouse、PageSpeed Insights

Lighthouse 是由 Google 團隊所開發的檢測工具，主要用來檢測網站使用者體驗、效能與 SEO 等等網站優化的部分，若沒有聽過 Lighthouse，那麼應該有聽過同樣為 Google 為所開發的 PageSpeed Insights 檢測網站，而 PageSpeed Insights 也在 2018 年的某次改版中將 Lighthouse 評分整併到 PageSpeed Insights 中。

而兩者相較之下， PageSpeed Insights 整併後主要是增加了較多視覺報表呈現的部分，並且可以選擇語系來看分析後的優化方案；而 Lighthouse 則有多個管道可以查看檢測後的結果：

  • Google DevTools
  • Google Extensions Lighthouse
  • Web.dev

接下來便介紹這三個工具的用法與差異：

閱讀全文 »