justjavac (迷渡)

[译] 如何百倍加速 Lo-Dash？引入惰性计算

justjavac — Wed, 16 Dec 2015 09:36:59 +0800

原文：How to Speed Up Lo-Dash ×100? Introducing Lazy Evaluation.
作者：Filip Zawada

我一直以为像 Lo-Dash 这样的库已经不能再快了，毕竟它们已经足够快了。 Lo-Dash 几乎完全混合了各种 JavaScript 奇技淫巧（YouTube）来压榨出最好的性能。

惰性计算

但似乎我错了 - 其实 Lo-Dash 可以运行的更快。你需要做的是，停止思考那些细微的优化，并开始找出更加适用的算法。例如，在一个典型的循环中，我们往往倾向于去优化单次迭代的时间：

var len = getLength();
for(var i = 0; i < len; i++) {
    operation(); // <- 10毫秒 - 如何优化到9毫秒?!
}

代码说明：取得数组的长度，然后重复执行 N 遍 operation() 函数。译注 by @justjavac

但是，这（优化 operation() 执行时间）往往很难，而且对性能提升也非常有限。相反，在某些情况下，我们可以优化 getLength() 函数。它返回的数字越小，则每个 10 毫秒循环的执行次数就越少。

这就是 Lo-Dash 使用惰性计算的思想。这是减少周期数，而不是减少每个周期的执行时间。让我们看看下面的例子：

function priceLt(x) {
   return function(item) { return item.price < x; };
}
var gems = [
   { name: 'Sunstone', price: 4  },
   { name: 'Amethyst', price: 15 },
   { name: 'Prehnite', price: 20 },
   { name: 'Sugilite', price: 7  },
   { name: 'Diopside', price: 3  }, 
   { name: 'Feldspar', price: 13 },
   { name: 'Dioptase', price: 2  }, 
   { name: 'Sapphire', price: 20 }
];

var chosen = _(gems).filter(priceLt(10)).take(3).value();

代码说明：gems 保存了 8 个对象，名字和价格。priceLt(x) 函数返回价格低于 x 的所有元素。译注 by @justjavac

我们把价格低于 10 美元的前 3 个 gems 找出来。常规 Lo-Dash 方法（严格计算）是过滤所有 8 个 gems，然后返回过滤结果的前 3 个。

不难看出来，这种算法是不明智的。它处理了所有的 8 个元素，而实际上我们只需要读取其中的 5 个元素就能得到我们想要的结果。与此相反，使用惰性计算算法，只需要处理能得到结果的最少数量就可以了。如图所示：

我们轻而易举就获得了 37.5％的性能提升。但是这还不是全部，其实很容易找到能获得 1000 倍以上性能提升的例子。让我们一起来看看：

// 99,999 张照片
var phoneNumbers = [5554445555, 1424445656, 5554443333, … ×99,999];

// 返回包含 "55" 的照片
function contains55(str) {
    return str.contains("55"); 
};

// 取 100 张包含 "55" 的照片
var r = _(phoneNumbers).map(String).filter(contains55).take(100);

在这个例子中，map 和 filter 用来处理 99,999 个元素。不过我们只需要它的一个子集就可以得到想要的结果了，例如 10,000 个，性能提升也是非常大的（基准测试）：

Pipelining

惰性计算带来了另一个好处，我称之为 "Pipelining"。它可以避免链式方法执行期间创建中间数组。取而代之，我们在单个元素上执行所有操作。所以，下面的代码：

var result = _(source).map(func1).map(func2).map(func3).value();

将大致翻译为如下的常规 Lo-Dash（严格计算）

var result = [], temp1 = [], temp2 = [], temp3 = [];

for(var i = 0; i < source.length; i++) {
   temp1[i] = func1(source[i]);
}

for(i = 0; i < source.length; i++) {
   temp2[i] = func2(temp1[i]);
}

for(i = 0; i < source.length; i++) {
   temp3[i] = func3(temp2[i]);
}
result = temp3;

如果我们使用惰性计算，它会像下面这样执行：

var result = [];
for(var i = 0; i < source.length; i++) {
   result[i] = func3(func2(func1(source[i])));
}

不使用临时数组可以给我们带来非常显著的性能提升，特别是当源数组非常大时，内存访问是昂贵的资源。

延迟执行

和惰性计算一起使用的是延迟执行。当你创建一个链，我们并不立即计算它的值，直到 .value() 被显式或者隐式地调用。这种方法有助于先准备一个查询，随后我们使用最新的数据来执行它。

var wallet = _(assets).filter(ownedBy('me'))
                      .pluck('value')
                      .reduce(sum);

$json.get("/new/assets").success(function(data) {
    assets.push.apply(assets, data); // 更新我的资金
    wallet.value(); // 返回我钱包的最新的总额
});

在某些情况下，这样做也可以加速执行时间。我们可以在前期创建复杂的查询，然后当时机成熟时再执行它。

Wrap up

懒惰计算并不是行业里的新理念。它已经包含在了许多库里面，例如 LINQ、Lazy.js 等等。我相信 Lo-Dash 和这些库最主要的区别是，你可以在一个更新的、更强大的引擎里面使用原有的 Underscore API。不需要学习新的库，不需要修改代码，只是简单升级。

但是，即使你不打算使用 Lo-Dash，我希望这篇文章启发了你。现在，当你发现你的应用程序存在性能瓶颈，不要仅仅是去 jsperf.com 以 try/fail 风格优化它。而是去喝杯咖啡，并开始考虑算法。最重要的是创意，但良好的数学背景会让你如鱼得水（book）。祝你好运！

是时候使用 Mithril.js 了

justjavac — Sat, 26 Sep 2015 10:37:53 +0800

Mithril.js 是一个客户端的 JavaScript MVC 框架。

随着 [Flarum][1] 也使用了 Mithril，这个小框架在 github 上的 star 数量也已经突破了 4K。

Mithril 是什么？

Mithril 是一个客户端 javascript MVC 框架，即它是一个工具，使应用程序代码分为数据层 (Model)，UI 层 (View)，黏合层 (Controller)。

Mithril 通过 gzip 压缩后，仅有 12kb 左右，这要归功于 small, focused, API。它提供了一个模板引擎与一个虚拟 DOM diff 实现高性能渲染，还提供了其它高级工具，以及支持路由和组件化。

框架的目标是使应用程序代码更容易组织，可读和可维护，帮助你成为一个更好的开发者。

不像某些框架，Mithril 努力避免将您锁定到某个 web 框架上：您可以尽量少地使用您所需要的框架。

然而，使用其整个工具库可以带来很多好处：学习使用函数式编程和巩固良好的编码实践，OOP 和 MVC 只是其中的一些。

特点

轻量级

gzip 压缩后仅仅 12kb，无依赖
非常少的 API，非常容易的学习曲线

鲁棒性

默认安全的模板
层次化的 MVC 组件（hierarchical）

快速

虚拟 DOM 和编译模板
智能的重绘系统（redrawing）

入门示例代码

//model 模型
var Page = {
    list: function() {
        return m.request({method: "GET", url: "pages.json"});
    }
};

var Demo = {
    //controller 控制器
    controller: function() {
        var pages = Page.list();
        return {
            pages: pages,
            rotate: function() {
                pages().push(pages().shift());
            }
        }
    },

    //view 视图
    view: function(ctrl) {
        return m("div", [
            ctrl.pages().map(function(page) {
                return m("a", {href: page.url}, page.title);
            }),
            m("button", {onclick: ctrl.rotate}, "Rotate links")
        ]);
    }
};


//initialize 初始化
m.mount(document.getElementById("example"), Demo);

性能

参考

[Mithrils.js 中文文档][3]

[1]: http://discuss.flarum.org.cn/ [3]: https://justjavac.gitbooks.io/mithriljs/content/content/getting-started.html

当 XXX 时，到底发生了什么...

justjavac — Tue, 21 Jul 2015 10:53:42 +0800

当 XXX 时，到底发生了什么...

本文在 github 不定期更新，欢迎投稿。repo 地址：https://github.com/justjavac/what-happens-when-zh_CN

Web 框架层出不穷，然而 RoR 早已看透了一切

justjavac — Tue, 16 Jun 2015 13:39:43 +0800

几天前我在 github 上创建了一个项目：PHP on Pails

缘起

本项目缘起于一条微博 http://weibo.com/3468511964/Cm1opcEg0

Swift 开源了，于是，这货就出来了 SwiftOnSails，虽然我是第一次看这个名字，但是总有一种很熟悉的感觉。

于是我创建了PHP on Pails 项目。而后我又在 github 上简单搜索了一下，居然各种语言都有 XoX 的框架。

果然，在几年前 RoR 就已经开始引领潮流了。

汇总

License

PoP(PHP on Pails) is licensed under the GPL license. See LICENSE for more information.

如果你发现了什么逗比项目，可以去 github 提交，或者直接回复，地址https://github.com/justjavac/PHPonPails

发福利，整理了一份关于 “资源汇总” 的汇总

justjavac — Thu, 13 Nov 2014 13:24:39 +0800

觉得有用的话，可以去 github 关注：https://github.com/justjavac/awesome-awesomeness-zh_CN

一份关于“资料汇总”的汇总。

通用

free-programming-books-zh_CN 免费的计算机编程类中文书籍
精彩博客集合 hacke2/hacke2.github.io#2
ResumeSample 程序员简历模板列表
remote-working 收集整理远程工作相关的资料

编程语言

Android
- Android 学习之路
- android-open-project Android 开源项目分类汇总
C/C++
- cpp1x-study-resource C++11 的学习资源
- Game-Programming-Patterns-CN 游戏编程模式中文
iOS
- iOSBlogCN 中文 iOS/Mac 开发博客列表
- Best-App 收集&推荐优秀的 Apps/硬件/技巧/周边等
- iOS-Swift-Demos Swift 学习资源
- dev-blog 一些 iOS/Web 开发相关的翻译或原创博客文章
- SwiftGuide Swift 语言指南
javascript
- awesome-firebase
- AngularJS-Learning
- NodeJS-Learning Nodejs 中文资料导航
- node123 node.js 中文资料导航
- 国内开源 html5 游戏引擎全收录
PHP
- PHP 知识结构思维导图
Python
- codeparkshare Python 初学者书籍、视频、资料、社区推荐
- stackoverflow-py-top-qa stackoverflow 上 Python 相关回答整理翻译
Ruby
- Ruby 资料 by Ruby China

WEB 前端

一个合格的前端工程师必看的书籍
前端知识体系
fks 前端技能汇总
frontend-books 收集前端方面的书籍
front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者
Mars 腾讯移动 Web 前端知识库
mobile-web-favorites 移动前端开发收藏夹

ReplaceGoogleCDN：将 Google CDN 替换为国内的

justjavac — Tue, 04 Nov 2014 08:08:43 +0800

Chrome Web Store 安装地址：
https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice

由于众所周知的原因，只需替换一个域名就可以继续使用 Google 提供的前端公共库了。同样，通过 script 标记引用这些资源，让网站访问速度瞬间提速吧骚年！

很多网站，尤其是国外网站，为了加快网站的速度，都是用了 Google 的 CDN。但是在天朝，由于某些原因，导致全球最快的 CDN 变成了全球最慢的。

于是，我写了这个插件，将 Google 的 CDN 替换成国内的。

本来使用的 360 的，经网友提醒 360 的不支持 https，于是改成中科大的。

此插件包括两部分。

ajax.googleapis.com - 前端公共库
fonts.googleapis.com - 免费字体库

免费的编程中文书籍索引

justjavac — Mon, 03 Nov 2014 21:54:00 +0800

项目地址：https://github.com/justjavac/free-programming-books-zh_CN

语言无关类
- 操作系统
- WEB 服务器
- 版本控制
- NoSQL
- MySQL
- 项目相关
- Web
- 大数据
- 编程艺术
语言相关类
- AWK
- C/C++
- CSS/HTML
- Dart
- Fortran
- Java
- JavaScript
- PHP
- iOS
- Android
- Python
- Prolog
- Ruby
- Shell
- Go
- Groovy
- LaTeX
- LISP
- Lua
- Haskell
- R
- Scala
- Swift
- Vimscript
读书笔记及其它

项目地址：https://github.com/justjavac/free-programming-books-zh_CN

开发者必备的 Chrome 扩展

justjavac — Sun, 02 Nov 2014 20:35:07 +0800

Firebug：不用多介绍了吧 https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench

ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库 https://chrome.google.com/webstore/detail/chrome-sniffer-plus/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh

EyeDroper：浏览器窗口内取色，看到喜欢的配色可以查一下颜色代码留存以后用 https://chrome.google.com/webstore/detail/aonjhmdcgbgikgjapjckfkefpphjpgma

MeasureIt：浏览器窗口内测距，用于测量元素的大小 https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka

Window Resizer：可以快速调整浏览器窗口的尺寸，用于观察网站页面宽度 https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh

Awesome Screenshot：个人感觉最好用的截图工具 https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce

Ultimate Chrome Flag：在地址栏显示网站所在地区的国旗，还可以显示 RP 值和 alexa 排名 https://chrome.google.com/webstore/detail/dbpojpfdiliekbbiplijcphappgcgjfn

PageMonitor：页面监控，如果内容有更新就通知你，我就是用这个插件在苹果官方商店上抢到了 iphone4，可用的地方很多，比容用来监控竞争对手的改版…… https://chrome.google.com/webstore/detail/pemhgklkefakciniebenbfclihhmmfcd

开发者福利！ChromeSnifferPlus 插件正式登陆 Chrome Web Store

justjavac — Thu, 30 Oct 2014 21:21:55 +0800

今天（2014-10-30）下午，ChromeSnifferPlus 插件正式登陆 Chrome Web Store。

在线安装地址： https://chrome.google.com/webstore/detail/chrome-sniffer-plus/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh

Chrome 探测器，可以探测正在使用的开源软件或者 js 类库，开发者必备。

通过本插件，您可以探测：

javascript 库：jQuery、ExtJS、Angular 等。
常用的 web 服务：百度统计、cnzz、Google Analytics 等。
Web 框架：WordPress、phpBB、Drupal、MediaWiki 等。
服务器环境：PHP、Apache、nginx 等。
当你安装此插件去浏览网页时，还可以发现更多你未知的框架和库。

如果你发现了还不能探测的类库，可以创建 issues。

本次更新包括：

重构了部分代码，提升了插件的性能。
新增加了多种库的检测：Highcharts、YUI 3、Zepto.js、Tengine ……

查看：更新日志

插件源代码托管在 github 平台： https://github.com/justjavac/ChromeSnifferPlus

截图

Firebase 相关文章索引

justjavac — Wed, 22 Oct 2014 16:35:31 +0800

最近谷歌收购 Firebase 的新闻又将 Firebase 拉入了人们的视野，于是我在 github 做了一个项目，地址：https://github.com/justjavac/awesome-firebase

Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。

开发者只需引用一个 API 库文件就可以使用标准 REST API 的各种接口对数据进行读写操作，只需编写 HTML＋CSS＋JavaScrip 前端代码，不需要服务器端代码（如需整合，也及其简单），省下的时间可以让开发者专注于开发应用功能，完善设计和体验，解决用户的实际问题。

听着是不是很熟悉，对，就是 noBackend（无后端编程）。只需要关注前端代码，需要增删改查数据的时候，发送 REST 请求即可，后端的工作由 Firebase 来搞定。

或许我翻译的另一个项目你也敢兴趣：用 JSON 构建 API 的标准指南

文章

视频

在 Xcode 中使用 Firebase

资讯

工具

Firepad 一个基于 Firebase 数据库平台构建的编辑器，可以实时多人协作编辑
firebase-tools Firebase 命令行工具
grunt-firebase 用来更新 firebase 数据的 Grunt 任务

库

angularfire AngularJS bindings for Firebase
firebase-ruby Ruby wrapper for Firebase
python-firebase Python 实现的 Firebase REST API

项目

firechat 基于 Firebase 的实时聊天系统
emberfire Official Ember Data adapter for Firebase
firereader 基于 Firebase 和 AngularJS 的 RSS 阅读器
reactfire ReactJS mixin for easy Firebase integration
realtime-hacker-news 基于 Firebase 实现的实时 Hacker News

用 JSON 构建 API 的标准指南中文版

justjavac — Mon, 20 Oct 2014 15:51:18 +0800

github 地址：https://github.com/justjavac/json-api-zh_CN

如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式，那么 JSON API 就是你的 anti-bikeshedding 武器。

通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。

基于 JSON API 的客户端还能够充分利用缓存，以提升性能，有时甚至可以完全不需要网络请求。

下面是一个使用 JSON API 发送响应（response）的示例：

{
  "links": {
    "posts.author": {
      "href": "http://example.com/people/{posts.author}",
      "type": "people"
    },
    "posts.comments": {
      "href": "http://example.com/comments/{posts.comments}",
      "type": "comments"
    }
  },
  "posts": [{
    "id": "1",
    "title": "Rails is Omakase",
    "links": {
      "author": "9",
      "comments": [ "5", "12", "17", "20" ]
    }
  }]
}

顶级的 "links" 部分是可选的。除去 "links" 部分，此响应看起来非常接近使用已经存在的 API 构建的响应。

JSON API 不仅可以用来构建响应，还包括创建和更新资源。

现状

本文档是一个正在进展的工作，在具体实现过程中将会有所改变。详细信息请查看现状页面。

MIME 类型

JSON API 已经在 IANA 机构完成注册。它的 MIME 类型是 application/vnd.api+json。

格式

在开始使用 JSON API 前，先查看一下JSON API 格式文档

更新历史

2013-05-03：最初版本的草案。
2013-07-22：媒体类型在 IANA 注册完成。

你可以使用 RSS 阅读器在这里订阅本提要的变更。

justjavac (迷渡)

[译] 如何百倍加速 Lo-Dash？引入惰性计算

惰性计算

Pipelining

延迟执行

Wrap up

是时候使用 Mithril.js 了

Mithril 是什么？

特点

入门示例代码

性能

参考

当 XXX 时，到底发生了什么...

当 XXX 时，到底发生了什么...

Web 框架层出不穷，然而 RoR 早已看透了一切

缘起

汇总

License

发福利，整理了一份关于 “资源汇总” 的汇总

通用

编程语言

WEB 前端

ReplaceGoogleCDN：将 Google CDN 替换为国内的

免费的编程中文书籍索引

目录

开发者必备的 Chrome 扩展

开发者福利！ChromeSnifferPlus 插件正式登陆 Chrome Web Store

截图

Firebase 相关文章索引

文章

视频

资讯

工具

库

项目

用 JSON 构建 API 的标准指南中文版

现状

MIME 类型

格式

更新历史