Glimmer VM 編譯(2)

th (3).jpeg

這些 web 應(yīng)用不斷在發(fā)展女仰,不但革命性地改進(jìn) web 應(yīng)用開發(fā)的方式。最早我們開始于 html 然后用 css 來裝飾 html 虑省,然后上一層是 javascript 曼玩,javascript 用于實現(xiàn)交互。
javascript 地位不斷提升筷畦,我們在現(xiàn)代 web 項目中词裤,html 作為模板而使用,不少項目中我們幾乎看到到 html 的身影鳖宾。javascript 責(zé)任變得越來越重吼砂,讓后將發(fā)送到用戶端。

其實 javascript 是比較 expensive鼎文。javascript 之所以 expensive 是因為 javascript 是需要解析和編譯渔肩。javascript 在瀏覽器端要變成可執(zhí)行代碼還需要一定階段。

加載一個 javascript 和同樣大小的 jpg 文件拇惋,jpg 作為字節(jié)碼很容易地解碼后繪制到屏幕上赖瞒。

Glimmer VM

glimmer VM 是一個位于 ember 項目中的渲染引擎。

{{! Todos.hbs}}
<ul>
  {{#each this.todos as |todo i|}}
    <li>
      <item @todo={{todo}} @toggle={{action 'toggle' i }}/>
    </li>
  {{/each}}
</ul>

在一些開源的 Javascript 項目中蚤假,都有模板的概念,我們通過將模板進(jìn)行解析和編譯

加速應(yīng)用啟動

我們來看一看如何在運行時完成這項復(fù)雜的工作吧兔,

<h1>hello world</h1>

進(jìn)過 token 磷仰,然后進(jìn)行幾次編譯我們可以得到如下

[
  ['openElement','h1',[]]
  ['text','hello world']
  ['closeElement']
]

我們將 html 解析為 json 數(shù)據(jù)現(xiàn)在還不是字節(jié)碼。

Opcode Compiler

在我們開始解釋什么是 Opcode Compiler 之前境蔼,給大家解釋一些術(shù)語


017.JPG

這里 Opcode 僅僅就是數(shù)字灶平,不過這數(shù)字對于虛擬機(jī)是有意義的,具有一定功能的箍土》晗恚可以理解為一個函數(shù),這個函數(shù)會進(jìn)行一些工作吴藻。operands 函數(shù)的參數(shù)瞒爬。
opcode 和 operands 組合在一起這些字符可以理解為一個字節(jié)碼的指令集。將 html 編碼為具有一定規(guī)則的編碼沟堡。

[
  ['openElement','h1',[]]
  ['text','hello world']
  ['closeElement']
]

開始編譯侧但,首先會將編譯為字節(jié)碼格式,首先會將數(shù)組每一個元素一個一個提取出來

['openElement','h1',[]]

我們將數(shù)組第一個元素轉(zhuǎn)換為一個 openElement 的函數(shù)

openElement(tagName){
  let tag = his.constans.str.push(tagName)
  this.builder.openElement(tag)
}

更新中...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末航罗,一起剝皮案震驚了整個濱河市禀横,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粥血,老刑警劉巖柏锄,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酿箭,死亡現(xiàn)場離奇詭異,居然都是意外死亡趾娃,警方通過查閱死者的電腦和手機(jī)缭嫡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茫舶,“玉大人械巡,你說我怎么就攤上這事∪氖希” “怎么了讥耗?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疹启。 經(jīng)常有香客問我古程,道長,這世上最難降的妖魔是什么喊崖? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任挣磨,我火速辦了婚禮,結(jié)果婚禮上荤懂,老公的妹妹穿的比我還像新娘茁裙。我一直安慰自己,他們只是感情好节仿,可當(dāng)我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布晤锥。 她就那樣靜靜地躺著,像睡著了一般廊宪。 火紅的嫁衣襯著肌膚如雪矾瘾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天箭启,我揣著相機(jī)與錄音壕翩,去河邊找鬼。 笑死傅寡,一個胖子當(dāng)著我的面吹牛放妈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赏僧,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼大猛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了淀零?” 一聲冷哼從身側(cè)響起挽绩,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎驾中,沒想到半個月后唉堪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體模聋,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年唠亚,在試婚紗的時候發(fā)現(xiàn)自己被綠了链方。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡灶搜,死狀恐怖祟蚀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情割卖,我是刑警寧澤前酿,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站鹏溯,受9級特大地震影響罢维,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜丙挽,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一肺孵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧颜阐,春花似錦平窘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至猿棉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間屑咳,已是汗流浹背萨赁。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留兆龙,地道東北人杖爽。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像紫皇,于是被迫代替她去往敵國和親慰安。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評論 0 3
  • TITLE: 編程語言亂燉 碼農(nóng)最大的煩惱——編程語言太多聪铺。不是我不學(xué)習(xí)化焕,這世界變化快! 有時候還是蠻懷念十幾铃剔、二...
    碼園老農(nóng)閱讀 5,331評論 2 35
  • 轉(zhuǎn)自陳明乾的博客撒桨,可能有一定更新查刻。 轉(zhuǎn)原文聲明:原創(chuàng)作品,允許轉(zhuǎn)載凤类,轉(zhuǎn)載時請務(wù)必以超鏈接形式標(biāo)明文章 原始出處 穗泵、...
    C86guli閱讀 4,695評論 6 72
  • $HTML, HTTP谜疤,web綜合問題 1佃延、前端需要注意哪些SEO 2、 的title和alt有什么區(qū)別 3夷磕、HT...
    Hebborn_hb閱讀 4,611評論 0 20
  • 今天在爸媽家吃了年飯履肃,回到公婆這邊。一進(jìn)家門企锌,窗明幾凈榆浓,婆婆已經(jīng)把房間打掃得干干凈凈,桌子和柜子上已經(jīng)擺上了干...
    俞見閱讀 352評論 5 13