這些 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ù)語
這里 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)
}
更新中...