做瀏覽器內核這一想法,始於一年前。
當時比較閑,閑久了,就想做點什么事情。然后,看到網上冒出了很多瀏覽器,就研究了下瀏覽器這個東西,發現這些瀏覽器都沒有核心,都是在webkit或 者IE上加個殼,於是覺得瀏覽器核心挺有挑戰性的,先是嘗試做了一下,后來,就一直斷斷續續,磕磕碰碰做到現在,從零開始,一個一個,慢慢實現了矢量渲 染,界面框架,HTML/CSS解析,排版,渲染,javascript引擎,DOM API,當然,並不是完整的實現。實際上,我目前也只能算是個網頁前端剛學了一年的新手,HTML/CSS,javascript,DOM里面的方方面 面,我還在學習中,學到了新東西,就加以實現,或者測試某個網頁,發現有問題,就加以修改,就這樣,慢慢完善這個內核。
我的大部分關於HTML/CSS,javascript,DOM的知識都是從http://www.w3school.com.cn/里獲取 的,w3cschool對於學習網頁前端的新手來說,是個挺不錯的地方,而且每個知識點里還有實例可以自己動手測試,加深理解。不過,它講解得比較籠統, 有些細節的地方,還是需要自己去測試,才能知道正確的答案,比如:
一個block元素的width屬性是百分比時,是去取基於包含塊(父元素)寬度的百分比寬度,那么,對於absolute或者fixed定位的元素來說,它的包含塊還是它的父元素嗎?
當一個block元素的width屬性是inherit,也就是繼承父元素的寬度時,如果父元素的寬度是個百分比時,那么這個block元素繼承過來的也是個百分比嗎?
等等,還有很多類似的細節問題,有排版的,也有解析的,剛開始,排版模塊只能處理一些簡單的,並且HTML書寫規范的頁面,而隨着細節的不斷修補,現在也能處理復雜,並且書寫不怎么規范的頁面了,直到現在,我仍然在努力更正這些細節問題。
隨着排版模塊的不斷完善,和我對網頁前端的認識不斷加深,我發現很多排版錯亂的問題並不是排版模塊出了BUG,或是又有哪個細節沒處理好,而是由於沒有執 行網頁當中的javascript代碼,當時,我對javascript知之甚少,而之前,我一直都以為javascript只不過用來處理一些數據交互 罷了。。。好吧,現在我知道javascript可以改變網頁內容,它是怎么做到的?。。。這不是主要問題,主要問題是,我得先實現一個 javascript引擎,然后才能去考慮別的問題。好吧,我甚至連編譯原理都不懂,現在卻要實現一門語言。。。幸好它只是一個腳本語言。
對於一個熟悉C++的人來說,javascript無論是閉包,還是prototype,函數式編程,還有它的用法上,都顯得太怪異了,幸好我不是要用它 干什么,而是實現它。經過幾個月的努力,我搭起了一個簡單的JS引擎。在這段時間,逛園子時偶爾發現湯姆大叔寫的javascript教程,我從中獲益非 淺,教程寫得很不錯,講解了關於閉包,作用域等一些關鍵的地方,這里推薦大家去看下。
雖然實現了JS引擎,雖然能執行JS代碼了,但我發現,這似乎跟網頁排版沒有關系。。。還差什么?對,還差DOM API,我很快找到了答案。DOM API?另外一個大坑?
說到DOM,我想說說垃圾回收,因為之前完全不知道有DOM API,JS引擎的垃圾回收機制使用的是引用記數,在查找DOM相關資料的時候,我發現了內存泄露這一說法,當然,這是針對IE的,在進行了詳細了解之 后,我才發現,垃圾回收機制應該使用mark and sweep機制。。。整個垃圾收集器得重寫了
JS結合DOM API,才能對網頁進行操作,當然,它也處理數據交互。不過,這2者都是大坑。
在完善DOM API的同時,JS引擎也經歷了多次修改,這里,我不得不說說eval這個函數,eval可以執行一段JS代碼,也就是,它可以動態生成一些變量和函數, 而我以為它只是在全局作用域里生成那些變量和函數,實際上這是因為在全局作用域里生成的那些變量和函數,有時候會陰差陽錯的得到正確的結果。。。后來在對 淘寶首頁的JS問題進行調試時才發現,實際上,eval在哪個作用域里運行,它就在哪個作用域里動態生成一些變量和函數。。。
最后,放個下載,有興趣的同學可以用用看,不過打開網頁有點慢,有時候會比較卡,也比較容易崩潰。
下載 :(14:36更新)(出於帳號安全考慮,大家不要用這個登錄任何網站,實際上,大部分網站它也都登不上去-_-#)
補充一下:運行前請先確保安裝了宋體這個字體,一般中文操作系統會自帶這個字體。還有因為我也只是個人開發,並沒有在很多系統里做過測試,只在XP 32位系統下測試能運行,如果你運行不了,或者少什么DLL,不妨留個言,我會更新掉。