CSS 方法论 —— 模块化、命名、重用性

前端的技术发展真是越来越快，JS 框架和概念层出不穷，模块化、组件化等等理念带来更好的复杂前端工程的可维护性。作为前端关键技术栈的一部分，CSS 的规范化也有了新的理念，这些理念有助于实现 CSS 的模块化，提高可重用性以及可维护性。

2017-03-06

log analysis

Webpack 真正的持久缓存实现

说现在 webpack 是目前最流行的前端依赖打包工具，应该没人会有异议吧？不过为了在这个开放的工具上达成自己的最优目的，还是要花不少心思的。这里来讲讲在 webpack 里怎么做到真正的持久缓存。

持久缓存，也就是说在相关代码内容没有变化的时候，尽可能的使浏览器利用缓存而不是发送静态资源请求。方法也很简单：

同样的文件内容对应同样的名字，同时设置最大缓存失效期。这样在需要同一份代码时，浏览器总是使用本地缓存（连304请求都不需要）
尽可能将很少变动的代码提取成单独的一份文件，使得这部分代码几乎总是被缓存，从而提高整体缓存利用率

webpack 文档里有一篇非常简单的关于如何做到持久缓存（Long-term Caching），有多简单？它就只告诉了你一件事：记得在文件名里用 chunkhash。

对此，我无力吐槽。。。在实际的场景里，光用 chunkhash 基本上来说并没有什么卵用，因为还有一堆的情况会导致即使实际上相关代码没变， chunkhash 还是变了。

2017-03-05

web

React 代码流程梳理

通过 React 源代码, 梳理一下 React 整个渲染流程, 咱们来了解一下实际的 Virtual DOM 实现, 同时也当个个人的 React 备忘录。

2017-02-27

web

HappyPack - Webpack 的加速器

最近在组内前端使用的 Webpack 工具引入了一个 HappyPack 的插件，编译效率有显著提升。为此特意查看了 Webpack 和 HappyPack 的源代码，弄清楚效率提升的具体细节。

现在前端行业里模块化已经相当普遍了，模块打包工具也变得必不可少。Webpack 虽然起初只是一个人开发出来的打包工具，但它的流程设计带来的强大的扩展性使其越来越流行，为之开发的三方插件几乎已经囊括了前端所需的一切资源类型。

在我看来，React 这类富应用框架的流行推动了 Webpack 的发展。然而当初第一个 React + Webpack 开发的项目才进行不到一半的时候，Webpack 就有了很明显的性能问题。React 整个框架代码量680+KB，加上业务代码，文件模块数量庞大，Webpack 根本吃不消，动则编译一分钟多，内存占用也大。好在想想办法也能改善一下效率，典型的比如移除不必要的大型库文件的编译。

而这时，有了 HappyPack，编译速度一下子提高了不少，而且可以支持大部分常用的 Loader，绝对可以说是 Webpack 的加速器 —— 虽然内存占用依然很高。来看看 HappyPack 是怎么做到的。

2016-10-12

log analysis

Angular 脏检查机制研究

前端发展到现在, 新的数据驱动框架层出不穷。虽然大体上都是数据更新自动映射为DOM更新, 不同框架的具体实现思想差别还是挺大的。这篇文章主要就是来学习研究一下 Angular 的脏检查具体是怎么做的。

2016-09-19

web

Virtual DOM 介绍及简单实现

React风行一时，其核心技术 Virtual DOM 也引起关注。虽然 React（或是一些其他框架）的 Virtual DOM 实现非常复杂，但实际上这项技术本身的原理很简单。这篇文章来做个非常粗略的介绍。

2016-05-02

Squid + stunnel 搭建HTTP代理

原理:

使用 squid 搭建http代理。
然后通过 stunnel 创建客户端到代理服务器的加密连接。

连接图： **浏览器** --(http代理)--> **stunnel客户端(国内)** --(stunnel加密连接)--> **服务端stunnel** --(转发)--> **服务端squid** --(squid http代理)--> **内容服务器**

2016-04-19

log analysis

ELK 日志管理方案介绍及使用

ELK - Elasticsearch，Logstash，Kibana 是一整套开源日志管理方案。具有分布式、高效检索、适配性强等优点。三者功能相互独立，Logstash 负责文本数据的收集、处理、存储；Elasticsearch 负责数据的检索；Kibana 负责数据的可视化。但相互支持性良好，可很容易的配套使用。