蒲公英 · JELLY技術週刊 Vol.33: 前端基礎課堂開課啦～

蒲公英 · JELLY技術週刊 Vol.33

頁面文件太大？圖片過大了吧；頁面加載白屏？頗有多是字體文件還沒加載完；頁面加載時間過長？多半是主進程被阻塞……該怎麼辦呢？快來小葵，咳咳，「蒲公英」前端基礎課堂補課看看，可別本身一人學廢了。

登高遠眺

天高地迥，覺宇宙之無窮

基礎技術

怎麼使用 WebWorker 提升用戶界面的響應速度

瀏覽器執行javascript腳本是單線程的，當執行一些耗時較長的任務時，原本響應用戶操做的任務會阻塞；一個解決方法是把這些耗時長的任務改形成異步操做，但在一些很差改造的任務，如圖片像素分析或處理等，能夠使用WebWorker處理，以讓出主線程響應用戶界面操做。

如何優雅的使用自定義字體

使用自定義字體時，若是先加載字體文件，再渲染文本內容，則會加長文本渲染前的空白時間。本文介紹了一種使用預鏈接、異步加載的方法加載字體文件，並使用和自定義字體相近的系統字體做爲兜底，從而達到內容渲染速度與避免文本閃動的平衡。

CSS3 Patterns: 純 CSS 圖案效果

經過純 CSS3 漸變特性實現的一系列很是有趣的圖案效果的集合，如透明底、牆面、棋盤、魚紋、蜂窩、Lined Paper、各種布料紋理等，代碼簡潔明瞭，能夠方便地應用到咱們的實際項目中。若是你也有創意與技巧，獨樂樂不如衆樂樂，去提交一個分享吧。

2020 年 CSS 年度報告

2020 年 CSS 使用報告，能夠藉此瞭解 CSS 的開發者現狀，瞭解特性使用狀況及周邊工具等。

設計哲學

在千億的成交額背後，前端工程師是如何作「資損防控」的？

資損，顧名思義就是平臺發生了與用戶或客戶心理預期不符、直接或間接產生經濟損失的場景。本文經過阿里前端同窗的思考以及淘系雙 11 的實踐爲你們提供一些資損防控的經驗參考。

跨端框架技術

什麼？Kubernetes已然棄用Docker？

目前，Kubelet 中的 Docker 支持功能現已棄用，並將在以後的版本中被刪除。Kubelet 以前使用的是一個名爲 dockershim 的模塊，用以實現對 Docker 的 CRI 支持。但 Kubernetes 社區發現了與之相關的維護問題，所以建議你們考慮使用包含 CRI 完整實現（兼容v1alpha1或v1）的可用容器運行時。

滄海拾遺

滄海拾遺，積跬步以致千里

怎麼使用 Service Workers 動態響應圖片

有一個困擾 web 用戶多年的難題——丟失網絡鏈接。即便是世界上最好的 web app，若是下載不了它，也是很是糟糕的體驗。Service Worker 能夠使你的應用先訪問本地緩存資源，因此在離線狀態時，在沒有經過網絡接收到更多的數據前，仍能夠提供基本的功能。

從瀏覽器渲染層面解析 CSS3 動效優化原理

在網頁開發中，咱們常常會須要實現一些動效來讓頁面視覺效果更好，談及動效便不可避免地會想到動效性能優化這個話題，減小頁面DOM操做，減小頁面的重排，開啓硬件加速……那麼這些和動畫優化又有何關係？就讓小編。。額，小助手爲你揭開其中原理。

「蒲公英」期刊，每週更新，咱們專一於挖掘「 基礎技術、 工程化、 跨端框架技術、 圖形編程、 服務端開發、 桌面開發、 人工智能、 設計哲學、 前端框架」等多個大方向的業界熱點，並加以專業的解讀；不只如此，咱們還會推介精選凹凸技術文章，向你們呈現團隊內的研究技術方向。

擡頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物致知，咱們登高遠眺、滄海拾遺，以求積硅步而至千里。

蒲公英 · JELLY技術週刊貢獻指南

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章。