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