前端高性能计算之二:asm.js & webassembly

前一篇我们说了要解决高性能计算的两个方法,一个是并发用WebWorkers,另一个就是用更底层的静态语言。

2012年,Mozilla的工程师Alon Zakai在研究LLVM编译器时突发奇想:能不能把C/C++编译成Javascript,并且尽量达到Native代码的速度呢?于是他开发了Emscripten编译器,用于将C/C++代码编译成Javascript的一个子集asm.js,性能差不多是原生代码的50%。大家可以看看这个PPT

之后Google开发了Portable Native Client,也是一种能让浏览器运行C/C++代码的技术。 后来估计大家都觉得各搞各的不行啊,居然Google, Microsoft, Mozilla, Apple等几家大公司一起合作开发了一个面向Web的通用二进制和文本格式的项目,那就是WebAssembly,官网上的介绍是:

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

WebAssembly is currently being designed as an open standard by a W3C Community Group that includes representatives from all major browsers.

所以,WebAssembly应该是一个前景很好的项目。我们可以看一下目前浏览器的支持情况can i use webassembly

more>>
前端高性能计算之一:WebWorkers

最近做一个项目,里面涉及到在前端做大量计算,直接用js跑了一下,大概需要15s的时间, 也就是用户的浏览器会卡死15s,这个完全接受不了。

虽说有V8这样牛逼的引擎,但大家知道js并不适合做CPU密集型的计算,一是因为单线程,二是因为动态语言。我们就从这两个突破口入手,首先搞定“单线程”的限制,尝试用WebWorkers来加速计算。

more>>
推荐一些Chrome插件

推荐一些我用过的比较不错的Chrome插件。(长期更新)

  • SourceGraph, 自从我发现sourcegraph,我就把octotree禁用了,sourcegraph简直就是一个活生生的浏览器里的VSCode,有强大的IDE功能。
  • octotree,方便看github代码
  • Spaces,方便讲tabs分类搜藏起来, 这对于我这种长期开着100+个tabs的来说,确实很有必要,功能够用, 有些bug,暂时没找到更合适的。
  • Markdown Preview Plus,预览markdown。
  • UC二维码,将当前页面链接生成二维码

more>>
CSS In JS

自从2014年Christopher Chedeau做了CSS in JS的演讲之后, cssinjs的各种库纷纷出现,已经有好几十种了

css modules应该是很流行的了, 说实话我没有用过, 不过在浏览作者主页的时候意外发现了styled-components,发现这就是我想要的!大家可以看看下面几个视频,先有个大概印象。

more>>
webpack concepts

concepts

  • entry points
  • output
  • loaders
  • plugins
  • configuration
  • modules
  • module resolution
  • dependency graph
  • manifest
  • targets
  • hot module replacement

more>>
webpack guides学习笔记

getting started

Note that webpack will not alter any code other than import and export statements. If you are using other ES2015 features, make sure to use a transpiler such as Babel or Bublé via webpack’s loader system.

more>>
手机上如何让页面强制横屏

今天有朋友咨询我说是不是iOS没有企业开发证书, 没办法横屏,搞得我云里雾里。 我说不会吧, 谁告诉你的。 他说是他们外包了一个小游戏, 外包的开发人员给他们说的。。。我给他看了一个appstore里的小游戏,是可以横屏的,而且也是个人开发者。 他问了,然后给我说,开发人员说是因为他们用的H5开发的原因。为了破除这个谣言, 我准备自己测试一下。

more>>
CSS常用布局

=========2017-09-14更新===========

推荐大家看看这个网站learnlayout, 比较全面。

其中可能会经常看到下面这段话:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

我查了一下,原来是用于排版演示用的拉丁文:

Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。中文的类似用法则称为乱数假文、随机假文。

有兴趣的可以看看Wiki, 我还发现原来阮一峰老师之前也写过一篇介绍文章呢。

==============================

布局是CSS中一个很重要的部分,甚至我觉得是最重要也是最难的部分,其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常用布局,包括水平居中、垂直居中、单列布局、多列布局等,以及最新的flex布局,希望能给前端小伙伴一些帮助,也作为自己的知识总结。

more>>
用Gatsby重写blog

最近将blog生成器由Hexo换到了Gatsby,原来页面现保留在这里https://magicly.coding.me/, 留作纪念。

之前用Hexo写的blog,没有太大问题(反正我也写得少)。由于国内网络环境,托管在Github的页面访问很慢,于是我想,是否可以像用React那样开发, index.html只是一个简单的包装页面, 所有资源都打包放到bundle.js(当然webpack是可以支持code spliting的),这样我可以把index.html放在国外,然后在里面引用放在国内免费CDN上的bundle.js,这样速度就能达到最大化。 至于为什么不把index.html也放国内,因为要备案啊!!!备案啊!!!备案啊!!!一般谁会愿意为了写个blog去折腾呢?

more>>
aws上配置docker

如何查看cuda版本

http://www.cnblogs.com/shrimp-can/p/5253672.html

默认目录为:local,进入local:cd /usr/local

输入命令:ls,查看该目录下的文件,可以看到安装的cuda在此处

进入cuda文件:cd cuda-7.5(我的是7.5),此处为安装的东西

more>>