阿里云前端周刊 - 第 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 自身的问题。

点击查看全文