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