469
阿裏雲前端周刊 - 往期回顧（4~6）
阿裏雲前端周刊 - 第 4 期
一、推薦、
1. 大型高性能React PWA如何消除各類性能瓶頸？
https://zhuanlan.zhihu.com/p/26489388
本文旨在幫助讀者了解，在全球規模最大的React.js PWA之一——Twitter Lite當中，是如何消除各類常規與罕見之性能瓶頸的。
2. 大數據浪潮下的前端工程師
https://zhuanlan.zhihu.com/p/25825404
馬雲曾經說過『人類正從IT時代走向DT時代』。正如他說言，今天幾乎所有的互聯網公司背後都有一支規模龐大的數據團隊和一整套數據解決方案作決策，這個時代已經不是隻有矽穀巨頭才玩數據的時代，是人人都在依賴著數據生存，可以說如今社會數據價值已經被推到前所未有的高度。
3. 如何處理好前後端分離的 API 問題
https://mp.weixin.qq.com/s/g-fn_LEYU7WFNdmPQ0lJ_A
API 使用的第一原則：不要『相信』前端提供的數據，不要『相信』後台返回的數據。
4. 精讀前後端渲染之爭
https://zhuanlan.zhihu.com/p/26366128
做同構之前 ，一定要考慮到瀏覽器和服務器的環境差異，站在更高層麵考慮。
二、其它
1. 移動 web 之滾動篇
https://weekly.75team.com/issue206.html
移動端 Web 開發中滾動相關問題及其解決方案的總結。
2. Vue SSR從入門到Case Study
https://mp.weixin.qq.com/s/_IEmV0J5tmVegfRo5gUf4w
作者在使用 Vue 服務端渲染之後出現嚴重性能問題，於是就有了這篇 Case Study。
3. 純 CSS 實現瀑布流布局 和 Grid layout。
https://weekly.75team.com/issue206.html
實現瀑布流布局的三種方式，Multi-columns、Flexbox 和 Grid layout。
4. 基於 Node.js 的聲明式可監控爬蟲網絡
https://zhuanlan.zhihu.com/p/26463840
基於 Node.js 的聲明式可監控爬蟲網絡從屬於筆者的，記述了筆者重構我司簡單爬蟲過程中構建簡單的爬蟲框架的思想與實現
阿裏雲前端周刊 - 第 5 期
推薦
一、webpack與browser-sync熱更新原理深度講解
https://segmentfault.com/a/1190000009127661
開發環境頁麵熱更新早已是主流，我們不光要吃著火鍋唱著歌，享受熱更新高效率的快感，更要深入下去探求其原理。
要知道，觸類則旁通，常見的需求如賽事網頁推送比賽結果、網頁實時展示投票或點讚數據、在線評論或彈幕、在線聊天室等，都需要借助熱更新功能，才能達到實時的端對端的極致體驗。
二、Redux源碼剖析及應用
https://techblog.toutiao.com/2017/04/25/redux/
使用redux+react已有一段時間，剛開始使用並未深入了解其源碼，最近靜下心細讀源碼，感觸頗深~
本文主要包含Redux設計思想、源碼解析、Redux應用實例應用三個方麵。
三、D3 極簡入門教程
https://w3ctrain.com/2017/04/27/d3-tutorial/
很早之前就聽說過 D3 (Data Driven Documents)大名 ，它是一個數據驅動的可視化前端庫，使用 D3 可以方便地實現數據可視化。今天學習了一下，並用 D3 來繪製常用的圖表。
四、Vue2.0 源碼閱讀：模板渲染
https://zhouweicsu.github.io/blog/2017/04/21/vue-2-0-template/
Vue 2.0 中模板渲染與 Vue 1.0 完全不同，1.0 中采用的 DocumentFragment，而 2.0 中借鑒 React 的 Virtual DOM。基於 Virtual DOM，2.0 還可以支持服務端渲染（SSR），也支持 JSX 語法（改良版的 render function）。
其他
一、CSS :focus偽類JS focus事件提高網站鍵盤可訪問性
https://www.zhangxinxu.com/wordpress/2017/04/css-focus-js-improve-accessibility-keyboard/
所謂“鍵盤可訪問性”，指的是用戶隻使用鍵盤訪問網站的能力，例如，我們的iMac鼠標沒電了，或者鼠標壞了，或者在智能電視中訪問我們的網站，此時就隻能依賴於鍵盤訪問了。
二、CSS Grid布局這樣玩
https://www.w3cplus.com/css3/playing-with-css-grid-layout.html
自從去年下半年開始，CSS Grid布局的相關教程在互聯網上就鋪天蓋地，可謂是聲勢浩大。就針對於Web布局而言，個人認為Grid布局將是Web布局的神器，它改變了以往任何一種布局方式或者方法。不管以前的采用什麼布局方法都可以說是一維的布局方式，而Grid最大的特色，采用了二維布局。@Rachel Andrew也一直致力於完善Grid的規範。
三、通俗大白話來理解TCP協議的三次握手和四次分手
https://github.com/jawil/blog/issues/14
最近在惡補計算機網絡方麵的知識，之前對於TCP的三次握手和四次分手也是模模煳煳，對於其中的細節更是渾然不知，最近看了很多這方麵的知識，也在係統的學習計算機網絡，加深自己的CS功底，就把看過的一些比較好的東西和自己的一些理解二次加工組織一下然後交流分享，一起學習進步，對了這個麵試好像經常問到
四、Weex 中別具匠心的 JS Framework
https://halfrost.com/weex_js_framework/
Weex為了提高Native的極致性能，做了很多優化的工作
為了達到所有頁麵在用戶端達到秒開，也就是網絡（JS Bundle下載）和首屏渲染（展現在用戶第一屏的渲染時間）時間和小於1s
阿裏雲前端周刊 - 第 6 期
推薦
一、V8 Ignition：JS 引擎與字節碼的不解之緣
https://cnodejs.org/topic/59084a9cbbaf2f3f569be482
回顧曆史，很多 JS 引擎都是采用了字節碼這一腳本語言實現技術的，而 v8 一枝獨秀，走“純機器碼”路線，其實過於激進了：雖然執行性能上可以登峰造極，但卻帶來了內存占用過大的問題。這次引入字節碼實則是做了工程上的恰當取舍，將損失掉的內存找回來，更加符合如今移動和嵌入式設備為主的應用場景；以時間換空間，讓 v8 能更好的服務於低內存的設備。如今 V8 也回到了字節碼的懷抱，不禁令人感歎 JS 引擎與字節碼真是有著不解之緣！
二、利用視口單位實現適配布局
https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/
響應式布局的實現依靠媒體查詢（ Media Queries ）來實現，選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，隻能在選取的幾個主流設備尺寸下呈現完美適配。
即使是通過 rem 單位來實現適配，也是需要內嵌一段腳本去動態計算根元素大小。
三、阿裏雲新一代前端工程化工具 - DN（DBL vNext）
https://www.atatech.org/articles/78228
DBL vNext（後續將簡稱為 DN）是阿裏雲前端團隊，新一代的前端構建工具，簡化並統一了針對開發人員的「命令行接口」，將開發過程抽象為有序的 5 個階段 + 1 個常用操作（init/dev/test/build/publish + add）。不會因為工具本身的擴展，而擴展新的用法，統一、一致，免於記憶，通過 DN 創建的工程還將會結合 GitLab CI 進行持續集成。
四、實現精準的流體排版原理
https://www.w3cplus.com/css/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations.html
流體排版這一詞似乎看上去有點陌生，在英文中常把他稱之為Fluid Typography，當然也有很多朋友稱之為流體字號（Fluid Size）。大概的意思就是Web排版中的font-size會根據瀏覽器窗口的大小自動調整。
其他
一、Docker跳反了，運維們還會繼續用它嗎？
Docker 公司直接把原 Docker 項目改名成了 Moby，是為了將之前數年裏構建出來的龐大的粉絲團體和 Google 搜索內容（Google search footprint）全部轉移到 Docker 公司的商業產品上。
二、圖解 WebGL & Three.js 工作原理
https://www.cnblogs.com/wanbo/p/6754066.html
講了兩個東西：
1、WebGL背後的工作原理是什麼？
2、以Three.js為例，講述框架在背後扮演什麼樣的角色？
三、10 個基於 JavaScript 的機器學習實例
https://zhuanlan.zhihu.com/p/26709518
隨著人工智能技術的發展，機器學習越來越受到開發者們的關注，從而也導致了機器學習庫如雨後春筍般的湧現出來，而且沒有任何放緩的趨勢。雖然，傳統意義上 Python 已經成為了最受歡迎的機器學習語言。但目前神經網絡可在任何編程語言中運行，當然也包括 JavaScript！
四、一個例子上手SVG動畫
https://aotu.io/notes/2017/05/04/example-for-svg-animation/
CSS3動畫已足夠強大，不過還是有一些它做不到的地方。配合SVG，讓Web動效有更多的可能性。這次要做的效果是一個loading動畫
五、Sticky Footer，完美的絕對底部
https://aotu.io/notes/2017/04/13/Sticky-footer/
所謂 “Sticky Footer”，並不是什麼新的前端概念和技術，它指的就是一種網頁效果：
如果頁麵內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁麵的最底部
最後更新：2017-05-31 12:31:41