終於、終於30天啦啦啦！！！

原本其實是有猶豫今年要不要報名的，因為去年結果讓我有點失落憔悴…

然後這次也沒有組團，沒拖人下水成功。雖然也還是有發現一些認識的朋友今年也有參加，但還是一度在猶豫要不要報名，所以我幾乎是拖到最後一天才報名的哈哈。

工作的這兩年，遇到的事情這樣看來應該不算少。我有把一些我有興趣的議題記錄下來的習慣，雖然回去看也就一些很零碎的關鍵字，甚至有些一度回想不起來是什麼玩意兒。 這些東西我是有可能另外寫出來做記錄發表的，所以這次抱著反正之後也還是想寫，那就參加寫吧的想法報名，沒完賽就算了。

不過其實原本是有兩個參賽主題的，但最後只選擇了一個。一方便是另外一個對現在我來說不太好組織，另外就是時間安排上，我是很後來才真正決定要報名的。

而且在開賽前幾天確診Orz
隔離了7天

「這些、那些、你可能不知道、我不知道的Web技術細節」記錄了一些受到工作同僚、朋友聊天討論啟發，進一步研究原本我不知道或沒那麼清楚的Web技術細節。儘管足有接近30篇，但其實與我原本記下的關鍵字還是少了不少。像是WebAssembly、WebRTC、WebGL、Mono Repo、Micro Frontend等等。有些東西我有一些接觸，也有不少是還需要花費大量時間學習的。

而且這個系列，每一篇都至少花 超過兩個小時 構思撰寫。並且我實在不是很像破壞每一篇的獨立和完整性。所以有些篇數對於一次要閱讀完怕是會有些吃力，但基本每一篇都可以獨立參考閱讀，而不需要在意閱讀順序性。

目錄(依發表時間序)

前言

Web Locks相關的API目前還是實驗性質的，這意味著未來可能有所變動，會與本片內容提及用法、作用有差異。雖然是實驗性質，但目前主流瀏覽器都已經支援。

使用方式

最基本用法是透過navigator.locks.request()取得一把鎖，如果無法取得就必須等待直到能夠取得。如果取得了，就可以執行後續callback的動作。通常callback是一個異步函式，舉例來說寫法會如下：

navigator.locks.request('lock-1', async (lock) => {
  console.log('get lock-1');

  console.log('do something');

  console.log('release lock-1');
});

callback的執行區域，被稱作是 關鍵區域 (Critical section)。

如果設計的恰當，關鍵區域只會有一個在執行。把上面再改寫一下：

var lock_name = 'lock-1';

navigator.locks.request(lock_name, (lock) => {
    console.log(`A: get lock ${lock.name}`);
    return new Promise(res => {
        /// 10秒後釋放鎖
        setTimeout(() => {
            console.log(`A: release lock ${lock.name}`);
            res(); // release lock
        }, 10000 /*ms*/);
    })
})

navigator.locks.request(lock_name, (lock) => {
    console.log(`B: get lock ${lock.name}`);
    return new Promise(res => {
        /// 5秒後釋放鎖
        setTimeout(() => {
            console.log(`B: release lock ${lock.name}`);
            res(); // release lock
        }, 5000 /*ms*/);
    })
})

A: get lock lock-1 A: release lock lock-1 B: get lock lock-1 B: release lock lock-1

在上面範例，有兩個程式區塊A和B需要使用到lock-1這把鎖。A需要消耗10秒，並優先取得了鎖；B必須等待10秒後，才會開始執行。

可以透過將Promise的resolve()或reject()傳遞出來，來決定什麼時候要釋放鎖：