閱讀544 返回首頁    go 阿裏雲 go 技術社區[雲棲]


阿裏雲前端周刊 - 第 26 期

推薦

1. Node.js 8.5.0 發布

https://nodejs.org/en/blog/release/v8.5.0/

已經發布的 Node.js 8.5.0 版本中引入了一係列的新特性與錯誤修複,其中值得注意的是 V8 重新支持 Snapshots、引入了 console.group()、新增了 fs.copyFile 與 fs.copyFileSync 以更高效地複製文件等特性。

2. 再見,babel-preset-2015

https://zhuanlan.zhihu.com/p/29506685

9 月份 Babel 官網宣布 ES20xx 時代的 presets 通通被廢棄,取而代之的是 babel-preset-env,並且承諾它將成為“未來不會過時的”解決方案。

3. 實戰中學習 Flexbox

https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676

本文是針對 Flexbox 的實戰提高,不過對於那些即使對 Flexbox 一無所知的開發者,本文也提供了一係列的學習教程。本文依次介紹了如何使用 Flexbox 構建畫廊、卡片、網格、常見的網頁布局、富媒體呈現、表單、移動應用布局等內容。

4. JavaScript 工作原理:內存管理與常見內存泄露分析

https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec

本文章皆著眼於深度解析 JavaScript 內部運行原理,而本文則重點討論編程語言中常見的內存管理問題;並且還提出了對於處理常見的內存泄露的建議。本文首先介紹了變量內存的生命周期、內存的定義、如何分配內存、垃圾回收的機製、內存泄露的定義以及常見的四種內存泄露的形式與應對手段。

其它

1. 深入淺出 CSS Transforms

https://www.heartinternet.uk/blog/discover-the-power-of-css-transforms/

通過 transform 屬性,我們能夠移動、渲染、縮放或者提升任何頁麵元素;本文即是從最基礎的 transform 語法開始講起,介紹生動的案例來讓讀者體驗 CSS Transforms 各種不凡的用法。本文首先介紹了 translate、scale、rotate、skew 等常見的變換函數的用法,然後介紹了如何綜合利用這些屬性來實現複雜的動畫,最後還介紹了 CSS 中 animation 的用法。

2. 來自 Treebo 的 React 與 Preact PWA 性能分析

https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299

本文是 Addy Osmani 大神參與編寫的,印度 Treebo 公司使用的 Preact PWA 性能優化案例;相較於舊版本的網站,新版本在首屏渲染上提高了 70%,初始交互等待時間減少了 31%,大部分的訪客在 3G 環境下隻需要 4s 即可以瀏覽完整內容。本文以 React 單頁應用為例,討論了服務端渲染帶來的首屏渲染的性能提升;然後討論了基於路由的代碼分割與懶加載,接下來還討論了 PRPL 模式、HTML Streaming、關鍵路徑 CSS、離線靜態資源緩存、從 React 切換到 Preact 等內容。

3. 小米直達服務探秘,如何保證移動 Web 體驗?

https://mp.weixin.qq.com/s/b59djHTQrNKWF6AqNEuejg

小米直達服務是小米推出的 App 混合開發框架,它可以實現秒開,同時可以在瀏覽器、短信、微信等地方打開。本文即是小米直達服務 Web 體驗保障方麵的實踐分享,討論了目前移動 Web 體驗的瓶頸、小米直達服務的機製與核心關鍵等內容。

4. 全棧 Web 學習路徑

https://github.com/shovanch/fullstack-web-developer-path

本文是針對全棧 JavaScript 開發學習與進階的指南,涵蓋了從基礎語法到 React、Node.js 等多方麵的學習路徑與資料推薦。本文涵蓋了課程、項目、書籍等多種資源形式,介紹了語法基礎、React 應用開發、Node.js 服務端應用程序開發等多個領域的內容;

5. 對於 CSS-in-JS 的缺陷分析

https://codeburst.io/css-in-js-is-like-replacing-a-broken-screwdriver-with-your-favorite-hammer-c9765c9ee43b

本文作者從自己的角度闡述了對於 CSS-in-JS 的看法,將其形容為:就像用壞掉的螺絲刀替換你最愛的工具;閱讀的時候也可以看下評論區的回複,辨證地來看待作者的觀點。隨著 React 等現代 Web 框架的興起,CSS-in-JS 也受到了很多的關注,人們期望用它來解決傳統 CSS 中全局作用域、代碼難以管理的問題。不過本文作者確認為 CSS-in-JS 本身就是反模式,他從代碼的組織結構、耦合方式,CSS-in-JS 帶來的界麵一致性地破壞、代碼可複用性地降低等角度來闡述自己的觀點,最後提出了還是應該使用 OOCSS 這樣標準的 CSS 工程實踐來解決 CSS 自身的問題。

最後更新:2017-09-25 16:33:20

  上一篇:go  計算機網絡(一) 走近socks5
  下一篇:go  較好的8個 Java RESTful 框架