Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
述 | 楊曉兵
編輯 | 伍杏玲
出品 | CSDN(ID:CSDNnews)
編者前記:
編譯器是連接人類世界與機(jī)器世界之間的一座橋梁,它可將程序員理解的高級(jí)語(yǔ)言,轉(zhuǎn)換成程序高效執(zhí)行的機(jī)器碼。在 C/C++ 編譯器里,有 VC、Borland C++、GCC、Watcom C/C++ 等國(guó)外熱門編譯器,但屬于國(guó)內(nèi)自主研發(fā)的編譯器較少。
畢竟開發(fā)一款實(shí)用的編譯器不易,涉及前端詞法、語(yǔ)法分析、語(yǔ)意分析、大量的編譯優(yōu)化等工作。而有一支團(tuán)隊(duì),不惜花費(fèi)十余年精力完全自主研發(fā)出一款 YC 編譯器和 YC 瀏覽器內(nèi)核。
為何他們不遺余力地自主研發(fā)編譯器和瀏覽器內(nèi)核?這款編譯器有何優(yōu)點(diǎn)呢?下面由 YC 編譯器的主要作者之一——楊曉兵,來(lái)講述這背后十多年來(lái)的漫漫研發(fā)路。
以下為楊曉兵自述:
初衷:“做一些對(duì)軟件行業(yè)進(jìn)步有幫助的東西”
十多年前,我在中國(guó)科學(xué)院電子學(xué)研究所工作,參與設(shè)計(jì)一些硬件電路。當(dāng)時(shí)我對(duì)硬件的興趣遠(yuǎn)超軟件,后創(chuàng)業(yè)專門從事軟件工作。
我在創(chuàng)業(yè)的過(guò)程中發(fā)現(xiàn),做此類軟件雖能賺錢,但無(wú)論做得怎樣,對(duì)軟件科學(xué)的進(jìn)步都無(wú)絲毫作用。盡管付出很多,卻無(wú)成就感。
操作系統(tǒng)、數(shù)據(jù)庫(kù)、編譯器以及瀏覽器內(nèi)核是不需要特殊專業(yè)知識(shí)的、開發(fā)難度非常大、最基礎(chǔ)的軟件產(chǎn)品。
我想從這幾種軟件中選擇其中一項(xiàng)來(lái)自主研發(fā),雖然不能肯定做出什么成就,但我有希望能做出一些對(duì)軟件行業(yè)進(jìn)步有所幫助的東西,使自己不枉踏入軟件這個(gè)行業(yè)。根據(jù)當(dāng)時(shí)的情況,我發(fā)現(xiàn)可先從瀏覽器內(nèi)核下手,于是我除了維護(hù)原有產(chǎn)品外,把主要精力都投入到瀏覽器的研發(fā)中。
創(chuàng)新將 C 代碼內(nèi)嵌到 HTML
兩年后,我們研發(fā)完成瀏覽器內(nèi)核的基本功能,如 HTML 的解析和顯示、JavaScript 腳本的執(zhí)行等。
此時(shí),我們發(fā)現(xiàn) HTML 的標(biāo)準(zhǔn)越來(lái)越復(fù)雜,導(dǎo)致開發(fā)難度越來(lái)越大,如果按照這樣的發(fā)展,瀏覽器內(nèi)核將無(wú)法走入市場(chǎng)。
于是我重新思考:如果把 C 語(yǔ)言處理成像 JavaScript 腳本嵌入到 HTML 中,用內(nèi)嵌 C 代碼的 HTML 超文本做軟件的人機(jī)交互界面,這款內(nèi)核應(yīng)該會(huì)有點(diǎn)競(jìng)爭(zhēng)優(yōu)勢(shì)。
于是我們花費(fèi)兩年半的時(shí)間將標(biāo)準(zhǔn) C 語(yǔ)言以 JavaScript 相似的方式在 HTML 中執(zhí)行,并擴(kuò)展了一個(gè) HTML 標(biāo)簽:<user>,每個(gè) user 標(biāo)簽都可以用屬性 src 指定一個(gè) C 源碼文件,user標(biāo)簽的顯示界面和所有行為都由它的 C 代碼決定。
同時(shí)將 C 編譯器做成一個(gè)函數(shù),用該函數(shù)編譯生成 C 程序的可執(zhí)行代碼,執(zhí)行代碼可被存入文件或直接執(zhí)行。此時(shí),我們將編譯器取名為 YC 編譯器,瀏覽器內(nèi)核取名為 YC 瀏覽器。
三年又三年,漫漫研發(fā)路
隨后,我們繼續(xù)完善瀏覽器內(nèi)核,將其中的一些內(nèi)核代碼獨(dú)立出來(lái)用內(nèi)嵌編譯器動(dòng)態(tài)編譯執(zhí)行,并將大部分內(nèi)核源代碼開源。
與此同時(shí),我們又遇到一個(gè)問(wèn)題:YC 編譯器雖然編譯速度較快,生成的卻是字節(jié)碼,執(zhí)行速度慢,而且與原生代碼相互調(diào)用(特別是回調(diào)函數(shù))的處理相當(dāng)繁瑣。因此用當(dāng)時(shí)的 YC 編譯器難以勝任開源代碼的編譯工作。
為了解決自編譯瀏覽器內(nèi)核代碼的問(wèn)題,我們決定修改 YC 編譯器,使它的字節(jié)碼轉(zhuǎn)換為原生的執(zhí)行碼,并擴(kuò)展語(yǔ)法,使之具有少量的 C++ 語(yǔ)法。這個(gè)工作持續(xù)了三年。
三年后,YC 編譯器功能增多,它提供一個(gè)函數(shù)像調(diào)用動(dòng)態(tài)鏈接庫(kù)一樣直接調(diào)用 C 源碼中的函數(shù)。此時(shí),瀏覽器內(nèi)核開源部分都可以用 YC 編譯器實(shí)時(shí)編譯執(zhí)行了。
我們繼續(xù)改進(jìn)瀏覽器內(nèi)核,將速度很慢的 JavaScript 字節(jié)碼改為二進(jìn)制原生代碼,使 JavaScript 的執(zhí)行速度約提高約 100 多倍。同時(shí)將瀏覽器內(nèi)核代碼全部模塊化并開源,每個(gè)模塊都用 YC 編譯器動(dòng)態(tài)編譯執(zhí)行,編譯器的部分源碼也開源(如內(nèi)嵌匯編編譯器源碼、反匯編源碼、C/C++ 字節(jié)碼的執(zhí)行源碼等),所有的開源代碼均由內(nèi)嵌的 YC 編譯器自動(dòng)檢測(cè)編譯,動(dòng)態(tài)執(zhí)行。這個(gè)工作大概耗時(shí)四年。
開發(fā)至此,我想起谷歌和火狐瀏覽器都已開源,為什么不去看看它們的源代碼呢?于是找到這兩個(gè)瀏覽器的源碼。
當(dāng)時(shí)由于一些原因,我分析谷歌瀏覽器源碼沒(méi)有編譯通過(guò),而火狐的源碼很順利就編譯成功了,于是我就走上了分析火狐源碼之路。
下載的火狐源碼由純 C 代碼和 C++ 代碼兩部分組成,經(jīng) Visual C++ 2013 編譯生成一個(gè) xul.dll 文件和一個(gè) firefox.exe 文件。
我首先分析了它的 C 代碼,將所有的輸出函數(shù)全部改為類接口,并讓 xul.dll 通過(guò) YC 編譯器函數(shù) YC_cppLoad 進(jìn)行實(shí)時(shí)編譯,然后用類接口調(diào)用 C 源碼中的函數(shù)。這一步進(jìn)行得很順利,若修改了火狐的 C 代碼,只要重新運(yùn)行火狐瀏覽器便可生效,無(wú)需其它操作。
曾經(jīng)的辦公桌
接下來(lái)開始分析火狐 C++ 代碼。YC 編譯器只實(shí)現(xiàn)了少數(shù)幾個(gè) C++ 語(yǔ)法,不能編譯火狐 C++ 代碼,故分析起來(lái)非常困難。
為什么火狐 C 代碼容易分析,而它的 C++ 代碼難以分析呢?原來(lái)我用 YC 編譯器將它的 C 代碼生成匯編代碼文件、變量結(jié)構(gòu)定義文件、宏定義文件和預(yù)編譯文件,通過(guò)這幾個(gè)文件,大大減少了分析難度。
因此我再次決定修改 YC 編譯器,使之完全支持 C++11 標(biāo)準(zhǔn),因?yàn)榛鸷?C++ 代碼幾乎使用了所有的 C++11 語(yǔ)法特性。先使用 STL 標(biāo)準(zhǔn)模板庫(kù)代碼進(jìn)行編譯器的修改和調(diào)試,出乎預(yù)料,這個(gè)過(guò)程竟用了三年時(shí)間!之后,我用 YC++ 編譯器開始調(diào)試火狐 C++ 代碼。原以為 STL 那么復(fù)雜的代碼都可以編譯通過(guò)并正確執(zhí)行,火狐 C++ 代碼應(yīng)該能很快就編譯通過(guò)。沒(méi)想到,很多語(yǔ)法細(xì)節(jié) STL 沒(méi)有用到,而火狐 C++ 源碼用到了。于是又繼續(xù)修改 YC 編譯器,對(duì)火狐 C++ 的各個(gè)模塊進(jìn)行編譯,這個(gè)過(guò)程持續(xù)了一年多。
雖然 YC 編譯器可以編譯全部火狐 C++ 代碼,但如何生成執(zhí)行代碼呢?先從主程序 Firefox.cpp 入手,經(jīng)整理,這個(gè)程序可用 YC 編譯器生成執(zhí)行代碼 Firefox.exe,并能順利運(yùn)行。
由于火狐 C++ 各模塊耦合緊密,很難拆分,經(jīng)過(guò)一個(gè)多月的工作,仍未能將其拆成多個(gè)獨(dú)立的源碼模塊以便于用 YC 編譯器實(shí)時(shí)編譯,動(dòng)態(tài)執(zhí)行,這也許是我對(duì)火狐 C++ 源碼的整體結(jié)構(gòu)還不甚清楚之故,只見其樹木不見其森林。
楊曉兵
當(dāng)我準(zhǔn)備對(duì)火狐 C++ 代碼進(jìn)行再一次總體分析時(shí),有個(gè)偶然的機(jī)會(huì)參與到一個(gè)學(xué)校管理系統(tǒng)的開發(fā)中,因原有的管理系統(tǒng)經(jīng)常出故障,操作極其不方便。盡管沒(méi)有開發(fā) Web 服務(wù)程序的經(jīng)歷,但我做的軟件與 Web 服務(wù)器有極大關(guān)系。
經(jīng)了解,要開發(fā)這種管理系統(tǒng)需要的軟件有:Apache 或 Nginx 服務(wù)器,數(shù)據(jù)庫(kù) MySQL 或其它,編程工具 ASP 或 JSP 或 PHP 等,于是啟發(fā)我們自己研發(fā)這些工具。YC 的 C/C++ 和 JavaScript 編譯器和 HTML 解析器正好派上用場(chǎng)。
經(jīng)過(guò)一段時(shí)間,一個(gè)穩(wěn)定的、可任意擴(kuò)展的、多線程高并發(fā)的 HTTP 服務(wù)器就完成了。該服務(wù)器處理 YSP 文件生成網(wǎng)頁(yè)傳給瀏覽器。
YSP 是我設(shè)計(jì)的與 ASP、JSP 和 PHP 功能相似的一種網(wǎng)頁(yè)編程語(yǔ)言。YC 服務(wù)器執(zhí)行 YSP 文件中的內(nèi)嵌 C/C++ 或 JavaScript 代碼,生成 HTML 超文本傳給終端設(shè)備。工具做好后,不久便做出了管理系統(tǒng)的雛形,這個(gè)雛形在發(fā)布的 YC 編譯器中可見到。
做了上述這些工作后,我想是時(shí)候該寫本書介紹一下 YC 編譯器了,經(jīng)過(guò)一段時(shí)間編寫的《YC編譯器—多語(yǔ)言程序設(shè)計(jì)》(暫名)即將出版。
當(dāng)我把書完成后,便立即投入64位的C/C++和JavaScript編譯器的開發(fā),目前開發(fā)進(jìn)展順利,已進(jìn)入測(cè)試階段。
編者后記:
三年時(shí)間,可將一個(gè)呱呱落地的嬰兒變成蹦蹦跳跳的幼兒,可將一名懵懂的職場(chǎng)新人變成沉穩(wěn)的老兵。而楊曉兵團(tuán)隊(duì)沉下心,迎難而上,花費(fèi)三年又三年、再一年、兩年、四年的時(shí)間只為突破一個(gè)個(gè)技術(shù)難點(diǎn),最終自研出 YC 編譯器和 YC 瀏覽器內(nèi)核。
在這過(guò)程中,楊曉兵坦言最大的挑戰(zhàn)不僅是技術(shù),還有思維的高度。這期間不僅有大量的研發(fā)工作,還為了優(yōu)化,多次重寫代碼,讓他堅(jiān)持下來(lái)的是想為計(jì)算機(jī)軟件科學(xué)的發(fā)展做貢獻(xiàn)的匠心。
目前楊曉兵團(tuán)隊(duì)正在開發(fā) 64 位 C/C++ 編譯器,談及未來(lái),楊曉兵表示先在國(guó)內(nèi)推廣,再走向海外。祝福楊曉兵。
YC編譯器傳送門:http://www.ycbro.com
<table>標(biāo)簽:
<table>指的是表格,用表格來(lái)搭建界面布局,即用表格的嵌套,來(lái)搭建界面布局。
<table>布局優(yōu)勢(shì):
table優(yōu)勢(shì):開發(fā)時(shí)間短(使用DW開發(fā)速度快);純table各瀏覽器不會(huì)有兼容問(wèn)題;內(nèi)容可自適應(yīng);在搜索引擎排名能靠前;
但是 table如果布局變更,需要重新開發(fā);如果table里有div ul 等,可能會(huì)出現(xiàn)瀏覽器兼容問(wèn)題;加載速度慢;table嵌套的太多,運(yùn)維是非常困難的。
<div>塊級(jí)(block-level)標(biāo)簽:
DIV是層疊樣式表中的定位技術(shù),全稱DIVision,即為劃分。有時(shí)可以稱其為圖層。
<div>布局優(yōu)勢(shì):
一.精簡(jiǎn)代碼,減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡(jiǎn),css文件可以在網(wǎng)站的任意一個(gè)頁(yè)面進(jìn)行調(diào)用,而若是使用table表格修改部分頁(yè)面卻是顯得很麻煩。要是一個(gè)門戶網(wǎng)站的話,需手動(dòng)改很多頁(yè)面,而且看著那些表格也會(huì)感覺很亂也很浪費(fèi)時(shí)間,但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪問(wèn)速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較,精簡(jiǎn)了許多頁(yè)面代碼,那么其瀏覽訪問(wèn)速度自然得以提升,也從而提升了網(wǎng)站的用戶體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好,因此其避免了Table嵌套層次過(guò)多而無(wú)法被搜索引擎抓取的問(wèn)題,而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè),在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位,而div+css則不會(huì),無(wú)論什么瀏覽器,網(wǎng)頁(yè)都不會(huì)出現(xiàn)變形情況。
1.流動(dòng)式布局:是HTML網(wǎng)頁(yè)默認(rèn)的布局方式
特點(diǎn):
1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布,且默認(rèn)狀態(tài)下,塊級(jí)元素占整個(gè)文檔流,默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示,不占整個(gè)文檔流。
常見的塊級(jí)(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內(nèi)內(nèi)聯(lián)(行內(nèi))元素有:<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動(dòng)布局(float)
特點(diǎn):
浮動(dòng)布局依靠【 浮動(dòng)屬性 float:left/right/... 】來(lái)使標(biāo)簽脫離文檔流,達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float:left ; 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display:inline/block/inline-block】來(lái)進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn):
當(dāng)我們應(yīng)擁div布局是,在第一層塊界面上來(lái)做第二層塊界面的開發(fā)時(shí),就要用到我們所說(shuō)的定位布局。
通過(guò)運(yùn)用【定位屬性position:absolute/relative/fixed】 來(lái)進(jìn)行第二層界面的定位布局。
網(wǎng)頁(yè)是靜態(tài)的,網(wǎng)頁(yè)上的定位
position:absolute ;絕對(duì)定位脫離文檔流,不受浮動(dòng)影響,就是相對(duì)于窗體(body)邊界的margin定位。
position:relative; 相對(duì)定位不脫離文檔流,相對(duì)于父級(jí)標(biāo)簽元素的位置定位。
position:fixed;固定位置,不會(huì)受任何因素影響。
滾動(dòng)條移動(dòng)前
滾動(dòng)條移動(dòng)后
優(yōu)先層顯示方法:【屬性:z-index:0/1/2...】
特點(diǎn): 數(shù)值越大,越優(yōu)先顯示。
注意:只有元素使用了position屬性的,才具有z-index屬性。
本文部分內(nèi)容來(lái)自網(wǎng)絡(luò),如有侵權(quán),請(qǐng)聯(lián)系修改。
么是css的調(diào)用方式?
簡(jiǎn)單來(lái)講,就是解決把css代碼寫在哪里的問(wèn)題,這塊內(nèi)容之前在課堂上演示過(guò),這里再用文字說(shuō)明一下,權(quán)當(dāng)復(fù)習(xí)。
大體有以下四種方式:
1,外聯(lián)式樣式表
添加在HTML的頭部信息標(biāo)識(shí)符< head>里:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
其中href是目標(biāo)文檔的URL, type則規(guī)定了目標(biāo)URL的MIME類型,而media規(guī)定了文檔將顯示在什么設(shè)備上。
2,內(nèi)嵌樣式表
添加在HTML的頭部信息標(biāo)識(shí)符< head>里:
<head>
<style type="text/css">
<!-- 樣式表的具體內(nèi)容 -->
</style>
</head>
type=”text/css”表示樣式表采用MIME類型,幫助不支持CSS的瀏覽器過(guò)濾掉CSS代碼,避免在瀏覽器面前直接以源代碼的方式顯示我們?cè)O(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生,還是有必要在樣式表里加上注釋標(biāo)識(shí)符“< !--注釋內(nèi)容-->”。
3,元素內(nèi)定
語(yǔ)法:
<Tag style="properties">網(wǎng)頁(yè)內(nèi)容</tag>
舉個(gè)例子:
<p style="color: blue; font-size: 10px">CSS實(shí)例</p>
上面例子的代碼說(shuō)明:
用藍(lán)色顯示字體大小為10px的“CSS實(shí)例”。盡管使用簡(jiǎn)單、顯示直觀,但是這種方法不怎么常用,因?yàn)檫@樣添加無(wú)法完全發(fā)揮樣式表的優(yōu)勢(shì)——即內(nèi)容結(jié)構(gòu)和格式控制分別保存。
4,導(dǎo)入樣式表(高級(jí)用法,暫時(shí)先放下)
語(yǔ)法:
<style type="text/css">
<!-- @import url("css/base.css"); -->
</style>
其中外部引用CSS主要用到兩種方式link和@import
本質(zhì)上,這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。
link和@import存在如下差別:
差別1:老祖宗的差別。link屬于HTML標(biāo)簽,而@import完全是CSS提供的一種方式。
link標(biāo)簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
差別2:加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候),link引用的CSS會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開始會(huì)沒(méi)有樣式(就是閃爍),網(wǎng)速慢的時(shí)候還挺明顯。
差別3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識(shí)別,而link標(biāo)簽無(wú)此問(wèn)題。
差別4:當(dāng)使用javascript控制DOM去改變樣式的時(shí)候,只能使用link標(biāo)簽,因?yàn)锧import不是DOM可以控制的。
從上面的分析來(lái)看,還是使用link標(biāo)簽比較好。
課后練習(xí):
步驟一:新建一個(gè)名為index.html的網(wǎng)頁(yè)。
步驟二:在index.html網(wǎng)頁(yè)文檔里加入兩個(gè)p標(biāo)簽,分別在p標(biāo)簽中加入內(nèi)容(內(nèi)容隨意)
步驟三:嘗試用上面提到的前三種方式,用css代碼改變p標(biāo)簽內(nèi)容的顯示格式。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。