阿里雲前端週刊-往期回顧（7~9）

阿里雲前端週刊 – 第 7 期

其它

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

http://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

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

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

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

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

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

阿里雲前端週刊 – 第 8 期

其它

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

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

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

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

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

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

3. 靠譜程式設計師必備技能——重構

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

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

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

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

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

阿里雲前端週刊 – 第 9 期

其它

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

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

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

2. React 歷史專案維護與優化實踐

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

本文介紹了接手維護一箇中型 React 歷史專案時的一系列改進實踐，包括模組結構拆分、業務邏輯梳理、Webpack 打包優化等。

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

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

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

4. 談談畫素以及微信小程式的 rpx

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

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

阿里雲前端週刊-往期回顧（7~9）

阿里雲前端週刊 – 第 7 期

推薦

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

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

3. CSS 變數教程

其它

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

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

3. CSS Animations vs Web Animations API

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

阿里雲前端週刊 – 第 8 期

推薦

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

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

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

其它

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

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

3. 靠譜程式設計師必備技能——重構

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

阿里雲前端週刊 – 第 9 期

推薦

1. Web 開發者安全速查表

2. WebAssembly 與程式碼的編譯

3. JS 與多執行緒

其它

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

2. React 歷史專案維護與優化實踐

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

4. 談談畫素以及微信小程式的 rpx

相關文章