能否用 JS 實現一個 CSS 解釋器？

01-03

既然 js 都能解釋 js 自身了，那是否可以用 js 來解釋 css 呢？（然後就不用依賴瀏覽器自身對新標準的支持了）

首先JavaScript能解釋執行JavaScript自身並不稀奇，但純粹的解釋執行總是需要在別的現成的JavaScript引擎上運行，這不夠爽。要注意的是用JavaScript實現JavaScript自身其實不一定要「解釋執行」——其實「編譯後執行」也是完全可行的，這樣就可以實現自舉，從而能用純JavaScript實現可獨立運行（不需要在別的JavaScript引擎上運行）的JavaScript。

傳送門：

JavaScript的功能是不是都是靠C或者C++這種編譯語言提供的？ - RednaxelaFX 的回答
有沒有js的js引擎？ - RednaxelaFX 的回答

關鍵點在於潛在的實用性：能自舉的實現會更容易被接受為「實用的」，而JavaScript是有能力做到這點的。

其次，與其問「能否用JavaScript解釋CSS」，題主更想問的應該是能否用JavaScript來實現支持CSS的排版引擎——「理解CSS的語義」是一回事，在此基礎上實現實際的排版並且與更底下的渲染引擎交互又是另一層面的事情了。

這個當然也可以做到。Facebook出的CSSLayout項目已經實現了CSS的一個子集。要實現比它更完整的CSS支持並不是不可能的——只是誰會投入資源會做這種項目，對他帶來的好處又有哪些的問題。

Google還有一個Blink-in-JavaScript項目，儘可能把Blink渲染引擎里的DOM API的高層功能從C++轉為用JavaScript實現。這也跟題主所想像的場景是相關的。看，這樣的項目已經實際存在了對不對？

Blink-in-JavaScript的精神跟V8的一部分用JavaScript實現其實是很類似的。V8這個JavaScript引擎中，大部分JavaScript標準庫都是直接用JavaScript來實現的，只把其中一些複雜的功能通過intrinsics調用V8的C++部分來實現。這樣實現更簡便，升級更簡單，而且可以促使（迫使）JavaScript引擎儘可能做優化來滿足標準庫的性能需求。感覺題主想要的就是順著這樣的思路實現的瀏覽器，而我這裡舉的例子就是想說明這樣的思路是可行而且已經有人在嘗試的。

要說用JavaScript實現有趣的基礎設施，Mozilla用JavaScript實現了很多有趣的東西，例如說

PDF.js用JavaScript實現了PDF的渲染（於是FireFox里可以不需要native插件就可以渲染PDF文件）
Shumway用JavaScript實現了Flash的渲染（於是FireFox里可以不需要native插件就渲染SWF文件，雖然這個項目還沒有很完善）
PluotSorbet用JavaScript實現了一個兼容J2ME的運行時環境

這些項目很多都是由FireFox OS的需求所驅動的。既然FireFox瀏覽器是FireFox OS的核心組成部分，嘗試用JavaScript來實現盡量多的功能是很直觀的思路——直接就能在FireFox OS上運行了。

拋開性能不說，這東西可以實現，也確實有實類似的實現，react angular2 polymer都有類似的實現，只是類似。

而為什麼沒有一個獨立的框架在做這個事情？

因為一旦要做出這個東西，生產的代碼必然是純js或者CSS+js。而這些js就需要像jq一樣附著到Dom上。

而不巧的是，CSS3出現的這個時代，正好是MV*框架到來的時代，以上我提到的那react和angular2，我有說：類似的實現。而不是獨立的實現，因為他們引入了組件的概念，同時就會有一個生命周期的概念在裡頭，這也就是jq這類的庫無法和以上的框架快樂的配合的原因。同樣的CSS2JS如果要有，那麼必須和生命周期契合，所以這些框架內置了CSS2JS。

回頭看，那些想用新鮮技術的前端開發人員想必不會為了一個CSS2JS而放棄MV*框架。畢竟前者可以用手寫JS替代啊。

Houdini.

看到你這個問題，我第一想法是jquery中的Sizzle，但是仔細一想，Sizzle只是一個純javascript實現的CSS選擇器引擎,如果是想實現全部的css的功能，應該是可以做到的~