原文地址

最近，项目用了 React，配套使用了 Webpack，毕竟热替换（react-hot-loader）吸引力确实高，开发模式下使用 webpack 构建其实也够用，并且相对 gulp-webpack 来说，模块的编译等待时间大大缩小，这是生命啊！ 发布时，借助 gulp 来进行其他方面的处理，如合图，打包等。或许把这些边幅修一修、支持下，Webpack 估计就要逆天了吧？

写在最前

我们都是前端工程师，无论你现在是页面仔，还是 Node 服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目标。即使这些在别人眼里，只是跟其他的页面一样没什么不同，但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的，就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开 js，让我们一起来看业务中那别致的纯 CSS 实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感。

做移动 web 页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。

怎么获取首屏时间呢？

我们经常要先问自己：页面是怎么加载数据？

A：加载完静态资源后通过 ajax 请求去后台获取数据，数据回来后渲染内容

在 2014 年，W3C 公布了 service worker 的草案，service worker 提供了很多新的能力，使得 web app 拥有与 native app 相同的离线体验、消息推送体验。
service worker 是一段脚本，与 web worker 一样，也是在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 web 交互行为。native app 可以做到离线使用、消息推送、后台自动更新，service worker 的出现是正是为了使得 web app 也可以具有类似的能力。

素材：

期望效果：http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html

作为前端开发，或多或少都会接触很多前端构建工具，最近的业务使用到了百度 FIS 团队的 fis3，想和大家分享下我所理解的 fis3。

使用方法简单说

首先，你需要安装 node 和 npm

然后，使用 npm install -g fis3  命令安装 fis3，安装完成是这样的

表示安装成功。

然后我们可以通过 fis3 release -w 来对代码进行监听。

注：fis3 默认内置了 fis3-command-release 插件，提供了文件监听和浏览器自动刷新功能，在 release 的时候添加-w 或-L 参数就可以，这样可以很方便的部署代码。

当你需要使用插件的时候，可以用 fis3 install -g 插件名 进行安装。