118      阿裏雲  技術社區[雲棲]

阿裏雲前端周刊 - 往期回顧（7~9）

阿裏雲前端周刊 - 第 7 期

推薦

1. GUI 應用程序架構的十年變遷

https://segmentfault.com/a/1190000009346599

隨著現代瀏覽器的日漸流行，Web 以及混合開發技術的發展，大前端的概念日漸成為某種共識；而無論 iOS、Android、Web 這樣的端開發還是 React Native、Weex 這樣的跨端開發，其術不同而道相似。

2. HTML APIs: What They Are And How To Design A Good One

https://www.smashingmagazine.com/2017/02/designing-html-apis/

As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge: When we’re an expert on something, we cannot remember how confused we felt as newbies.

3. CSS 變量教程

https://www.ruanyifeng.com/blog/2017/05/css-variables.html

今年三月，微軟宣布 Edge 瀏覽器將支持 CSS 變量。
這個重要的 CSS 新功能，所有主要瀏覽器已經都支持了。本文全麵介紹如何使用它，你會發現原生 CSS 從此變得異常強大。

其它

1. area、map 標簽及在實際開發中的應用

https://www.zhangxinxu.com/wordpress/2017/05/html-area-map/

之前，一直以為HTML 是一個雞肋HTML，估計到了HTML5時代會被廢棄的命。但是，最近一查資料，乖乖了個咚，不僅沒被廢棄，反而發展了，新增了一些標簽屬性，例如rel，media，hreflang等。

然後進一步研究發現，尼瑪這貨居然還可以用來解決一個困擾我很多年的棘手問題，形象立馬高大上了起來。

2. 使用 Headless Chrome 進行頁麵渲染

https://segmentfault.com/a/1190000009353359

使用 Headless Chrome 進行頁麵渲染 從屬於筆者的 Web 開發基礎與工程實踐係列文章，主要介紹了使用 Node.js 利用 Chrome Remote Protocol 遠程控製 Headless Chrome 渲染界麵的基礎用法。本文涉及的參考與引用資料統一列舉在這裏。

3. CSS Animations vs Web Animations API

https://www.w3cplus.com/animation/css-animations-vs-the-web-animations-api.html

Web Animations API為開發人員提供了一種方式，使用JavaScript可以直接操作瀏覽器的動畫引擎。

4. Vue 的 Virtual Dom 實現- Snabbdom 解密

https://www.cnblogs.com/xuntu/p/6800547.html

JavaScript 開銷直接與求算必要 DOM 操作的機製相關。盡管 Vue 和 React 都使用了 Virtual Dom 實現這一點，但 Vue 的 Virtual Dom 實現（複刻自 snabbdom）是更加輕量化的，因此也就比 React 的實現更高效。

阿裏雲前端周刊 - 第 8 期

推薦

1. 現代瀏覽器引擎的構建之道

https://github.com/xitu/gold-miner/blob/master/TODO/quantum-up-close-what-is-a-browser-engine.md

Mozilla 在 2016 年 10 月公布了 Quantum 項目， 旨在開創下一代瀏覽器引擎。 Firefox 53 中首次包含了該項目部分核心代碼 。 本文是深度解讀 Quantum 項目的係列文章的第一篇。

2. 最終，JavaScript 成為了一流語言

https://www.infoq.com/cn/news/2017/05/JavaScript-become-language

質疑JavaScript是否是一種「真正的」編程語言的時代已經過去，它的旅程遠沒有結束，但是其應用率和改進速度使我對其前進道路充滿信心。

3. 十個基於 JavaScript 的機器學習實例

https://zhuanlan.zhihu.com/p/26709518?spm=a313p.24.18y0dt9.38691320992&short_name=a.ZPC4&app=chrome

隨著人工智能技術的發展，機器學習越來越受到開發者們的關注，從而也導致了機器學習庫如雨後春筍般的湧現出來，而且沒有任何放緩的趨勢。雖然，傳統意義上 Python 已經成為了最受歡迎的機器學習語言。但目前神經網絡可在任何編程語言中運行，當然也包括 JavaScript！

其它

1. 如何使用CSS Grid布局實現限寬容器全屏效果

https://www.w3cplus.com/css/breaking-out-with-css-grid-layout.html

在 Web 布局設計中時常會碰到全屏的效果時，可能會碰到在限製寬度的容器中實現全屏效果。本文通過 CSS Grid 解決這種布局問題。

2. 如何實現一個 Git Diff 解析器

https://taobaofed.org/blog/2017/05/18/how-to-display-git-diff/

代碼審閱中一個重要功能是對兩個 commit 進行 diff 並展示到頁麵中，這篇文章嚐試總結其實現過程。

3. 靠譜程序員必備技能——重構

https://gitbook.cn/books/591837cbc9b8f67d6a6a94df/index.html

「重構本質上是一種代碼整理技術，這項技術使得代碼整理的效率更高，風險更小」，作者從是什麼、為什麼、怎麼做、何時做等多個角度分享了重構中的問題與經驗。

4. 如何做好H5性能優化？

https://mp.weixin.qq.com/s/6Jdq4wn03i_flM0s0TeDaw

智能手機的普及、移動互聯網的發展、微信異軍突起，都為 H5 的發展提供了良好的環境。當前，H5 已被廣泛應用於營銷、廣告、傳播之中。而針對 H5 效率慢、體驗差的硬傷，如何做好性能測試並優化其性能就顯得尤為重要。

阿裏雲前端周刊 - 第 9 期

推薦

1. Web 開發者安全速查表

https://www.freebuf.com/articles/web/135278.html

如果你覺得你可以在一個月之內開發出一款集使用價值、用戶體驗度、以及安全性為一身的產品，那麼在你將產品原型真正推上市場之前，請一定要三思啊！

當你仔細核查了本文給出的安全小貼士之後，你可能會發現你在產品的開發階段跳過了很多重要的安全步驟。有的時候，也許你應該對你的用戶坦誠一點，你應該誠實地告訴他們這款產品還沒有完全搞定，還有很多的安全問題亟待解決。

2. WebAssembly 與代碼的編譯

https://www.tuicool.com/articles/Nf2uQj2

本文介紹了 WebAssembly 的編譯與使用。另外，WebAssembly 和 JS 的關係是怎麼樣的？Webassembly 如何提高運行速度？為什麼要提倡強類型風格代碼書寫？通過本文可以有一個基本的了解。

3. JS 與多線程

https://www.tuicool.com/articles/viEFnm6

多線程對前端開發人員來說既熟悉又陌生，一方麵前端幾乎很少寫多線程，另一方麵多線程又經常會碰到，如你買個電腦它會標明它是四核八線程、四核四線程之類的，它是多核多線程的。什麼叫做多核呢？四核四線程和八線程又有什麼區別？

其它

1. Canvas 圖像旋轉與翻轉姿勢解鎖

https://aotu.io/notes/2017/05/25/canvas-img-rotate-and-flip/

結合實際應用場景，介紹了 Canvas 的一些知識，在 Canvas 上會製圖像，但圖像需要多個角度/多個方向展示，因此需要對圖像進行相應的旋轉與翻轉（鏡像），這也是本文所要介紹的重點。

2. React 曆史項目維護與優化實踐

https://ewind.us/2017/react-legacy-maintain/

本文介紹了接手維護一個中型 React 曆史項目時的一係列改進實踐，包括模塊結構拆分、業務邏輯梳理、Webpack 打包優化等。

3. 2017 年四大網絡安全趨勢

https://www.infoworld.com/native?prx_t=sI0CAkDgMAMbMMA

在網絡安全方麵，下麵這種情況是非常確定的：安全從業人員正在經曆忙碌的一年。2016年的網絡攻擊創下了紀錄，2017年的網絡環境威脅將更加嚴峻。這裏有四個需要注意的問題。

4. 談談像素以及微信小程序的 rpx

https://huang-jerryc.com/2017/05/21/talk-about-pixel-and-rpx/

本文作者最近在負責有讚的某個業務的微信小程序開發，第一次著手微信小程序的開發，這個過程中發現微信小程序所定義的一套 WXSS (WeiXin Style Sheets) 中有一個有趣的長度單位 rpx，即 responsive pixel

最後更新：2017-05-31 12:31:40

  上一篇：  阿裏雲前端周刊 - 往期回顧（4~6）

  下一篇：  《Spring Data實戰》——2.3　定義Repository