前端高性能计算之四:GPU加速计算

人工智能是最近两年绝对的热点,而这次人工智能的复兴,有一个很重要的原因就是计算能力的提升,主要依赖于GPU。去年Nvidia的股价飙升了几倍,市面上好点的GPU一般都买不到,因为全被做深度学习以及挖比特币的人买光了😂。

GPU,全称Graphics Processing Unit,即图像处理器,早期主要用于显示图像使用。因为图像处理主要偏简单的矩阵运算,逻辑判断等很少,因此GPU的设计跟CPU架构不一样,也因此做到一个GPU上可以有很多计算单元,可以进行大量并行计算。网上找到一个视频,应该是Nvidia某年的产品发布会,形象地演示了CPU跟GPU的区别。http://v.youku.com/vshow/idXNDcyNTc1MjQ4==.html 。知乎上也有对CPU和GPU的对比https://www.zhihu.com/question/19903344

后来人们逐渐发现,GPU的这种特性还可以用于神经网络的训练,因为神经网络训练中也是大量的矩阵运算,然后原来的训练速度提高了几十倍,原来需要一周训练的模型,现在几个小时就可以出结果,于是神经网络飞速发展。。。

more>>
前端高性能计算之三:Rust -> asm.js & webassembly

前一篇我们探索了用Emscripten编译C代码到asm.jsWebAssembly,使前端代码执行速度大大提升,但是实际项目中由于C语言缺乏很多高级特性,不利于开发大型项目(说C可以开发操作系统kernel这种大型项目的同学不好意思,我没那么nb),而C++我又觉得太复杂,也没有用过C++做过大型项目,所以我最后选择了Rust

一开始也纠结过要用Go还是Rust或者Swift的,后来发现Go目前还不支持编译到WebAssembly,Swift按理说应该可以支持的,因为都是用LLVM做的编译器,不过没有找到好的资料,好像说要自己编译LLVM去支持https://stackoverflow.com/questions/46572144/compile-swift-to-webassembly 。另外对Rust的一些特性很是喜欢,听说Rust很复杂,比较像Scala和Haskell,而偏偏我对Scala还算熟悉,也学过一下Haskell,所以决定尝试一下Rust。

https://github.com/ChristianMurphy/compile-to-web 这里可以查看目前能编译到WebAssembly的语言。

PS, 话说asm.js和Rust都是Mozilla搞的呢。

more>>
前端高性能计算之二: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>>