瀏覽器平臺的改造

緣起

最近看到幾個框架, 以爲趨勢有明顯, 就是你們都在想各類辦法 Hack 瀏覽器.
我想愈來愈多人來開發 HTML5 應用並非爲了 HTML5 特別適合開發圖形應用,
而是由於 Web 這個平臺更容易觸及, 而且對客戶端兼容更多
大概正由於如此, 纔會有如今這麼多基於瀏覽器 Hack 和各類不一樣的想法
瀏覽器並非虛擬機, 可是愈來愈多的技術使得瀏覽器變得像是一個虛擬機的平臺

瀏覽器

我接觸互聯網的時間在 09 年左右, 那時候看到 Chrome 的更新
後來的事情你們都知道了, Chrome 致使 JavaScript 和 Web 應用成爲了流行技術
優化的性能, 大量從前瀏覽器不具有的 API, CSS3 動畫, 實現了先決條件

可是實現瀏覽器, 修改瀏覽器的默認腳本語言, 不是那麼隨意的
HTML5 存在標準, ECMAScript 有標準, CSS 也有標準
先不說對於以往的頁面的兼容性和開發瀏覽器自己的難度,
單說開發一套能用的技術, 能快速傳遞給開發者, 自己難度就很是大
因而有了後邊基於 JavaScript 的各類 Hack

語言的編譯

首先 CoffeeScript 之類的語言, 以 JavaScript 環境爲虛擬機
其餘的代碼編譯到 JavaScript 去運行, 從而繞過瀏覽器環境的限制
藉助這樣手段, 瀏覽器不支持的不少編程範式和語法能引入瀏覽器
其中有名的好比 CoffeeScript..

https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

CSS 方面的狀況相似, 甚至也加入了編程語言的各類邏輯
另外一方面, HTML 也在不斷改變, 首先是各類模板引擎
模板引擎主要實現了模版和模塊化的特性, 其次帶來了各類語法

https://github.com/coffee-js/languages/wiki/List-of-languages-that-compile-to-HTML-CSS

動態的轉化

可是更精彩的是對於 DOM 結構的模擬, 好比 Virtual DOM
主要在 React 當中, Virtual DOM 做爲 DOM 操做優化的中間形式而存在
Virtual DOM 相對於模板引擎有更多優化的功能, 更具有編程語言的抽象能力
另外還有 Elm 在函數式響應式編程帶來了性能飛快的實現

http://calendar.perfplanet.com/2013/diff/

而在新的發展的技術當中, Famo.us 對於 DOM 的問題顯得更加激進
Famo.us 認爲 DOM 並不適合當前和將來交互很是多的 App
Web 應用須要的是一個相似遊戲引擎的平臺, 以達成高性能和精緻界面
因而 Famo.us 推出的框架中, 應用的邏輯被編譯到特別優化的 DOM
這些 DOM 被開啓了 GPU 加速, 繞過了瀏覽器低效的優化
甚至在 Famo.us 當中集成了一個物理引擎, 以應對精緻的動畫效果
生成的 DOM 以平鋪的結構排在 Container 下, 繞太低效的優化

http://elm-lang.org/blog/Blazing-Fast-Html.elm

今天另外看到的一個模塊是 Facebook 正在開發的 css-layout
這個模塊用於將 CSS3 經過 JavaScript 編譯到具體的數值配置
經過這樣方式, 繞過各類瀏覽器兼容性問題, 實現 Flexbox 佈局等等新技術

https://github.com/facebook/css-layout

趨勢

我感到因爲瀏覽器的平臺優點和技術束縛, 將會有更多繞過瀏覽器功能技術出現 取出瀏覽器優秀的子集做爲虛擬機, 用來開發更適合應用開發的技術 上邊列出我所看到的, 但願將來能看到更適用於 Web 開發的技術不斷出現