# 蒲公英 · JELLY技術週刊 Vol.33 > 頁面檔案太大？圖片過大了吧；頁面載入白屏？很有可能是字型檔案還沒載入完；頁面載入時間過長？多半是主程序被阻塞……該怎麼辦呢？快來小葵，咳咳，「蒲公英」前端基礎課堂補課看看，可別自己一人學廢了。 ## 登高遠眺 > 天高地迥，覺宇宙之無窮 ### 基礎技術 #### [怎麼使用 WebWorker 提高使用者介面的響應速度](http://3.cn/10-0CQLoY) 瀏覽器執行javascript指令碼是單執行緒的，當執行一些耗時較長的任務時，本來響應使用者操作的任務會阻塞；一個解決方法是把這些耗時長的任務改造成非同步操作，但在一些不好改造的任務，如圖片畫素分析或處理等，可以使用WebWorker處理，以讓出主執行緒響應使用者介面操作。 #### [如何優雅的使用自定義字型](http://3.cn/100CQLD-L) 使用自定義字型時，如果先載入字型檔案，再渲染文字內容，則會加長文字渲染前的空白時間。本文介紹了一種使用預連線、非同步載入的方法載入字型檔案，並使用和自定義字型相近的系統字型作為兜底，從而達到內容渲染速度與避免文字閃動的平衡。 #### [CSS3 Patterns: 純 CSS 圖案效果](http://3.cn/10-0CQLDN) 通過純 CSS3 漸變特性實現的一系列非常有趣的圖案效果的集合，如透明底、牆面、棋盤、魚紋、蜂窩、Lined Paper、各類布料紋理等，程式碼簡潔明瞭，可以方便地應用到我們的實際專案中。如果你也有創意與技巧，獨樂樂不如眾樂樂，去提交一個分享吧。 #### [2020 年 CSS 年度報告](http://3.cn/100CQLD-M) 2020 年 CSS 使用報告，可以藉此瞭解 CSS 的開發者現狀，瞭解特性使用情況及周邊工具等。 ### 設計哲學 #### [在千億的成交額背後，前端工程師是如何做“資損防控”的？](http://3.cn/1-00CQLTr) 資損，顧名思義就是平臺發生了與使用者或客戶心理預期不符、直接或間接產生經濟損失的場景。本文通過阿里前端同學的思考以及淘系雙 11 的實踐為大家提供一些資損防控的經驗參考。 ### 跨端框架技術 #### [什麼？Kubernetes已然棄用Docker？](http://3.cn/100CQK-Og) 目前，Kubelet 中的 Docker 支援功能現已棄用，並將在之後的版本中被刪除。Kubelet 之前使用的是一個名為 dockershim 的模組，用以實現對 Docker 的 CRI 支援。但 Kubernetes 社群發現了與之相關的維護問題，因此建議大家考慮使用包含 CRI 完整實現（相容v1alpha1或v1）的可用容器執行時。 ## 滄海拾遺 > 滄海拾遺，積跬步以至千里 #### [怎麼使用 Service Workers 動態響應圖片](http://3.cn/100CQL-oX) 有一個困擾 web 使用者多年的難題——丟失網路連線。即使是世界上最好的 web app，如果下載不了它，也是非常糟糕的體驗。Service Worker 可以使你的應用先訪問本地快取資源，所以在離線狀態時，在沒有通過網路接收到更多的資料前，仍可以提供基本的功能。 #### [從瀏覽器渲染層面解析 CSS3 動效優化原理](http://3.cn/100-CQKOh) 在網頁開發中，我們經常會需要實現一些動效來讓頁面視覺效果更好，談及動效便不可避免地會想到動效效能優化這個話題，減少頁面DOM操作，減少頁面的重排，開啟硬體加速……那麼這些和動畫優化又有何關係？就讓小編。。額，小助手為你揭開其中原理。 > 「蒲公英」期刊，每週更新，我們專注於挖掘「**基礎技術**、**工程化**、**跨端框架技術**、**圖形程式設計**、**服務端開發**、**桌面開發**、**人工智慧**、**設計哲學**、**前端框架**」等多個大方向的業界熱點，並加以專業的解讀；不僅如此，我們還會推介精選凹凸技術文章，向大家呈現團隊內的研究技術方向。 > > 抬頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物致知，我們登高遠眺、滄海拾遺，以求積矽步而至千里。 > > [蒲公英 · JELLY技術週刊貢獻指南](http://3.cn/12dbZQ-x)  ------- 歡迎關注凹凸實驗室部落格：[aotu.io](https://aotu.io/) 或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章： ![歡迎關注凹凸實驗室公眾號](https://img2020.cnblogs.com/other/1992869/202012/1992869-20201209094106638-1450967