瀏覽器平臺的改造

joywek 發(fā)布于2019-08-21 10:21 / 759人閱讀

摘要：緣起最近看到幾個(gè)框架覺得趨勢有明顯就是大家都在想各種辦法瀏覽器我想越來越多人來開發(fā)應(yīng)用并不是為了特別適合開發(fā)圖形應(yīng)用而是因?yàn)檫@個(gè)平臺更容易觸及并且對客戶端兼容更多大概正因?yàn)槿绱瞬艜鞋F(xiàn)在這么多基于瀏覽器和各種不同的想法瀏覽器并不是虛擬機(jī)但是

緣起

最近看到幾個(gè)框架, 覺得趨勢有明顯, 就是大家都在想各種辦法 Hack 瀏覽器.
我想越來越多人來開發(fā) HTML5 應(yīng)用并不是為了 HTML5 特別適合開發(fā)圖形應(yīng)用,
而是因?yàn)?Web 這個(gè)平臺更容易觸及, 并且對客戶端兼容更多
大概正因?yàn)槿绱? 才會有現(xiàn)在這么多基于瀏覽器 Hack 和各種不同的想法
瀏覽器并不是虛擬機(jī), 但是越來越多的技術(shù)使得瀏覽器變得像是一個(gè)虛擬機(jī)的平臺

瀏覽器

我接觸互聯(lián)網(wǎng)的時(shí)間在 09 年左右, 那時(shí)候看到 Chrome 的更新
后來的事情大家都知道了, Chrome 導(dǎo)致 JavaScript 和 Web 應(yīng)用成為了流行技術(shù)
優(yōu)化的性能, 大量從前瀏覽器不具備的 API, CSS3 動(dòng)畫, 實(shí)現(xiàn)了先決條件

但是實(shí)現(xiàn)瀏覽器, 修改瀏覽器的默認(rèn)腳本語言, 不是那么隨意的
HTML5 存在標(biāo)準(zhǔn), ECMAScript 有標(biāo)準(zhǔn), CSS 也有標(biāo)準(zhǔn)
先不說對于以往的頁面的兼容性和開發(fā)瀏覽器本身的難度,
單說開發(fā)一套能用的技術(shù), 能快速傳遞給開發(fā)者, 本身難度就非常大
于是有了后邊基于 JavaScript 的各種 Hack

語言的編譯

首先 CoffeeScript 之類的語言, 以 JavaScript 環(huán)境為虛擬機(jī)
其他的代碼編譯到 JavaScript 去運(yùn)行, 從而繞過瀏覽器環(huán)境的限制
借助這樣手段, 瀏覽器不支持的很多編程范式和語法能引入瀏覽器
其中有名的比如 CoffeeScript..

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

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

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

動(dòng)態(tài)的轉(zhuǎn)化

但是更精彩的是對于 DOM 結(jié)構(gòu)的模擬, 比如 Virtual DOM
主要在 React 當(dāng)中, Virtual DOM 作為 DOM 操作優(yōu)化的中間形式而存在
Virtual DOM 相對于模板引擎有更多優(yōu)化的功能, 更具備編程語言的抽象能力
另外還有 Elm 在函數(shù)式響應(yīng)式編程帶來了性能飛快的實(shí)現(xiàn)

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

而在新的發(fā)展的技術(shù)當(dāng)中, Famo.us 對于 DOM 的問題顯得更加激進(jìn)
Famo.us 認(rèn)為 DOM 并不適合當(dāng)前和未來交互非常多的 App
Web 應(yīng)用需要的是一個(gè)類似游戲引擎的平臺, 以達(dá)成高性能和精致界面
于是 Famo.us 推出的框架中, 應(yīng)用的邏輯被編譯到特別優(yōu)化的 DOM
這些 DOM 被開啟了 GPU 加速, 繞過了瀏覽器低效的優(yōu)化
甚至在 Famo.us 當(dāng)中集成了一個(gè)物理引擎, 以應(yīng)對精致的動(dòng)畫效果
生成的 DOM 以平鋪的結(jié)構(gòu)排在 Container 下, 繞過低效的優(yōu)化

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

今天另外看到的一個(gè)模塊是 Facebook 正在開發(fā)的 css-layout
這個(gè)模塊用于將 CSS3 通過 JavaScript 編譯到具體的數(shù)值配置
通過這樣方式, 繞過各種瀏覽器兼容性問題, 實(shí)現(xiàn) Flexbox 布局等等新技術(shù)

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

趨勢

我感到由于瀏覽器的平臺優(yōu)勢和技術(shù)束縛, 將會有更多繞過瀏覽器功能技術(shù)出現(xiàn)
取出瀏覽器優(yōu)秀的子集作為虛擬機(jī), 用來開發(fā)更適合應(yīng)用開發(fā)的技術(shù)
上邊列出我所看到的, 希望未來能看到更適用于 Web 開發(fā)的技術(shù)不斷出現(xiàn)