目錄
新的媒體查詢屬性 prefers-reduced-motion
https://developers.google.com...
https://developer.mozilla.org...
這個媒體查詢屬性的作用是，當用戶在操作系統中設置了 reduced-motion 的選項時，能夠根據其值聲明不同的 css 樣式，因爲有的人可能喜歡炫酷的特效，有的人可能更傾向於內容（比如我），而有的人甚至因爲生理問題無法接受這些特效。
瀏覽器首個內置 module KV Storage
https://developers.google.com...
https://wicg.github.io/kv-sto...
localStorage 當前的問題：
- 性能比較慢，而且會阻塞主線程
- api 設計的太簡單了，同時它們是同步的
- 很容易發生命名空間衝突，這意味着開發者必須做出一些額外的工作，比如增加自定義前綴
- 雖然可以使用
IndexedDB來作爲後補方案，但是它不不是那麼好用
KV Storage 的特點：
- 瀏覽器內置 module，意味着它無需被下載解析後才能使用
- api 與 js 中的
Map更接近，更友好，同時它們是異步的 - 性能更好
- 自帶命名空間，有效防止衝突
值得注意的時，使用它是需要做一些降級的工作，以應對各種不支持該 module 的情況（有好幾種，並不是兩種），詳情可以參考 google-developers 上的文章。
week-year 是什麼？
如果是做後端同學應該會比較瞭解，比如 Java，YYYY 和 yyyy 對於年來說講是兩種不同的意義，而 YYYY 則代表按 week-year 來解析。
其定義是這樣的，以星期一爲周始，以星期日爲週末，第一個包含該年度四天以上的周，算作該年度的第一週，因此，2014-12-31 按 YYYY 解析出來的年是 2015 ，我截了一張萬年曆的圖，如下：
可以發現，最後一週，只有 3 天屬於 2014 年，剩下的 4 天屬於 2015 年，所以這周應該算 2015 年的第一週。因此，如果做後端（比如 Java）的話，不是刻意爲之，最後使用 yyyy 而不是 YYYY。
關於 macrotask 和 microtask
javascript 是單線程的，這個大家都應該比較熟，對於異步編程的支持，當前有兩個隊列用來支持該功能，分別是 macrotask 和 microtask。
它們的執行時機的是：
- 宏任務每次在單次事件循環之內，嘗試將宏任務隊列頂部的任務進行執行
- 宏任務執行完畢後，嘗試將微任務隊列的全部任務進行執行，直到隊列爲空
- 之後執行後續操作，然後進入下一個事件循環
值得注意的是，雖然 microtask 任務會在一個事件循環內全部執行，但任務間的執行優先級是有區別的，比如 process.nextTick 和 Promise 會存在優先級差別，前者比後者高（暫時沒有標準）
.gitignore 對 tracked 的文件不生效怎麼辦？
通常情況下，.gitignore 文件所聲明的規則均對 untracked 的文件有效，如果是 tracked 的文件，則不會生效。但是問題來了，我們明知要忽略一個文件，爲什麼還要將它變爲 tracked 並提交到 git 提交歷史中呢？
一般這樣做的原因主要是想要強迫某個文件創建於其他開發者的代碼倉庫中，比如說，一般我們在使用環境變量的配置的工具庫時，比如 nodejs 中常見的 dotenv，這個庫使用 .env 聲明環境變量，同時我們一般會將這個文件聲明在 .gitignore 中，但是在集成這個庫之前，其他的開發者是無法預先創建 .env 這個文件的（當然你可以直接通過別的方式告訴他們），這種情況下，我們可以先將 .env 提交到 git 中，之後再在後續的提交或者 PR 中將它移除提交歷史。
將一個文件移除提交歷史，並變爲 untracked 很簡單，只需要執行以下命令：
git rm -r --cached <target-file-path>
這裏的 target-file-path 代表要變爲 untracked 的文件路徑，之後再進行一次正常的提交即可，比如：
git commit -m "clean up ignored files"
如何判定一個函數爲 async 函數？
var a = async function(){}
a.constructor.name
// "AsyncFunction"
簡述 css 的層疊上下文？
https://medium.freecodecamp.o...
- 普通元素按照文檔流中的順序，之後的元素會疊加在之前的元素之上
- 擁有非默認值屬性的
position的元素的層疊上下文，比有默認值屬性的元素要高 - 一些
css規則，如opacity、transform會創建隱式的層疊上下文，等價於z-index: 0 - 層疊上下文的高低判定依賴於父級元素的層疊上下文，比如一個
z-index: 0的元素中的z-index: 999的元素，永遠不會覆蓋z-index: 1的元素
除此之外，還存在一些別的特徵，但這裏是簡述，這 4 點應該夠了。
如果設定小於 12px 的字體？
一般情況下，有的設計師會將 12px 作爲設計稿的默認最小字體，但如果我們想要將一個元素的字體設置爲 9px 時，怎麼辦呢，可能你會直接說直接設置就好了，但是你會發現，一些瀏覽器提供了默認最小字體的設置，因此類似 font-size: 9px 並不會生效。
但我們可以通過 transform 的 scale 屬性曲線救國，如下：
font-size: 12px;
transform: scale(0.75);但這樣做也會有一個問題，就是如果有特別多的元素使用這個樣式，會使瀏覽器創造特別多的層疊上下文，在一些情況下，渲染性能會大打折扣，這時只要將縮放效果提示至父元素就好了，但要主要父元素和尺寸有關的屬性也需要做相同比例的變更。
同時，一些情況下，還需要通過 transform-origin 來指定變形的原點，通常情況下， transform-origin: left 足夠滿足 90% 的情況。
最後，換行符的計算是在縮放之前，這意味着如果是多行文本，會出現無法填滿單行的情況。
其實有些時候，這種字體縮放問題往往不是字體大小的鍋，而是需要根據不同文字的使用場景，使用不同的字體，在不同字體中，數字和字母的默認大小是不一致的，因此也可以嘗試通過組合使用多種字體來解決這個問題，比如 Roboto 字體中的數字默認大小爲 10px 。
關注公衆號 全棧101，只談技術，不談人生
