讲师介绍
石小勇 devin
腾讯AlloyTeam高级工程师
做过甲方乙方，前端后台，14年正式从企业开发转型互联网，扎根前端。现致力于react、vue等热门技术在实际业务中的落地。Github地址：https://github.com/shixy

原文地址

函数式编程 ( Functional Programming ) 是一种以函数为基础的编程方式和代码组织方式，能够带来更好的代码调试及项目维护的优势。本篇主要结合笔者在实际项目开发中的一些应用，简要谈谈函数式编程。

背景：前段时间自己居然迷路了，有感而发就想到写一个可以让人迷路的小游戏，可以消(bao)遣(fu)时(she)间(hui)

没有使用threejs，就连glMatrix也没有用，纯原生webgl干，写起来还是挺累的，不过代码结构还是挺清晰的，注释也挺全的，点开全文开始迷宫之旅~

==============接上篇 Preload：有什么好处？（上）=================

译者注：上文讲到了利用Preload，我们可以做到哪些事情，从这里继续～

响应式加载（RESPONSIVE LOADING）

因为Preload是一个链接，遵循规范它应有media属性（目前Chrome还未支持，不过很快就可以了）。这个属性可以启用资源的条件加载能力。

它又有什么用处呢？举个例子，你的网站的初始视窗，对于PC／宽屏设备展示可交互的地图版本，而对于手机／窄屏设备则展示静态的地图版本。如果你擅于加载性能优化，会想到在特定设备只加载其中一个版本的资源，而不是所有资源。而要做到这样唯一的办法就是使用JS去动态地加载资源。但是这么做，会使得资源对于preloader（译者注：上文提到过的浏览器内部的预加载器）不可见，因此会使得资源的加载时机稍微滞后，不但影响了用户的视觉体验，还对站点的SpeedIndex 得分有着负面影响。

所以我们该怎么做，才能让浏览器尽早知道所需加载的资源呢？没错，就是Preload！

我们可以使用Preload提前加载这些资源，并且使用media属性，做到只加载需要的资源：

熵与负熵

熵遵循熵增原理，即无序非热能与热能之间的转换具有方向性。薛定谔说过：生命本质在于负熵。熵代表的是无序，负熵就是熵的对立，而负熵表示的则是有序。汲取负熵（米饭、面包、牛奶、鸡蛋），可以简单的理解为从外界吸收了物质或者能量之后，转化成负熵流，使系统的熵降低，人体变得更加有序。

作为一个经常和web打交道的程序员，了解这些协议是必须的，本文就向大家介绍一下这些协议的区别和基本概念，文中可能不局限于前端知识，还包括一些运维，协议方面的知识，希望能给读者带来一些收获，如有不对之处还请指出。

1. web始祖HTTP

全称：超文本传输协议(HyperText Transfer Protocol) 伴随着计算机网络和浏览器的诞生，HTTP1.0也随之而来，处于计算机网络中的应用层，HTTP是建立在TCP协议之上，所以HTTP协议的瓶颈及其优化技巧都是基于TCP协议本身的特性，例如tcp建立连接的3次握手和断开连接的4次挥手以及每次建立连接带来的RTT延迟时间。

随着React的风靡，配合Webpack以及Babel等技术，越来越多的前端同学将ECMAScript 2015(ES6)的特性运用在项目中，import、export、class、箭头函数、块级作用域等特性屡试不爽。而对于Node.js实现的后台代码来说，我们也同样希望使用这些ES6特性，下面将以v4.4.4(LTS version)长期支持版本为例展开话题，从兼容性以及性能两方面着手分析Node.js对ES6的支持情况。

原文地址

直出是什么？到底是怎样的性能优化？本文将结合从在浏览器输入url，到展示最终页面的过程来对其进行一步步分析，并将在手Q web 中的实际应用实践进行总结。

原文地址
本文start kit: steamer-react

为什么做直出

就是为了“性能”！！！
按照经验来说，直出，能够减少20% – 50%不等的首屏时间，因此尽管增加一定维护成本，前端们还是前赴后继地在搞直出。

除此之外，有些特定的业务做直出能够弥补前后端分离带来的SEO问题。像这次选取的腾讯新闻，大多数页面首屏其实都是直出的（但肯定不是React直出）。