整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
述 | 杨晓兵
编辑 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
编者前记：
编译器是连接人类世界与机器世界之间的一座桥梁，它可将程序员理解的高级语言，转换成程序高效执行的机器码。在 C/C++ 编译器里，有 VC、Borland C++、GCC、Watcom C/C++ 等国外热门编译器，但属于国内自主研发的编译器较少。
毕竟开发一款实用的编译器不易，涉及前端词法、语法分析、语意分析、大量的编译优化等工作。而有一支团队，不惜花费十余年精力完全自主研发出一款 YC 编译器和 YC 浏览器内核。
为何他们不遗余力地自主研发编译器和浏览器内核？这款编译器有何优点呢？下面由 YC 编译器的主要作者之一——杨晓兵，来讲述这背后十多年来的漫漫研发路。
以下为杨晓兵自述：
初衷：“做一些对软件行业进步有帮助的东西”
十多年前，我在中国科学院电子学研究所工作，参与设计一些硬件电路。当时我对硬件的兴趣远超软件，后创业专门从事软件工作。
我在创业的过程中发现，做此类软件虽能赚钱，但无论做得怎样，对软件科学的进步都无丝毫作用。尽管付出很多，却无成就感。
操作系统、数据库、编译器以及浏览器内核是不需要特殊专业知识的、开发难度非常大、最基础的软件产品。
我想从这几种软件中选择其中一项来自主研发，虽然不能肯定做出什么成就，但我有希望能做出一些对软件行业进步有所帮助的东西，使自己不枉踏入软件这个行业。根据当时的情况，我发现可先从浏览器内核下手，于是我除了维护原有产品外，把主要精力都投入到浏览器的研发中。
创新将 C 代码内嵌到 HTML
两年后，我们研发完成浏览器内核的基本功能，如 HTML 的解析和显示、JavaScript 脚本的执行等。
此时，我们发现 HTML 的标准越来越复杂，导致开发难度越来越大，如果按照这样的发展，浏览器内核将无法走入市场。
于是我重新思考：如果把 C 语言处理成像 JavaScript 脚本嵌入到 HTML 中，用内嵌 C 代码的 HTML 超文本做软件的人机交互界面，这款内核应该会有点竞争优势。
于是我们花费两年半的时间将标准 C 语言以 JavaScript 相似的方式在 HTML 中执行，并扩展了一个 HTML 标签：<user>，每个 user 标签都可以用属性 src 指定一个 C 源码文件，user标签的显示界面和所有行为都由它的 C 代码决定。
同时将 C 编译器做成一个函数，用该函数编译生成 C 程序的可执行代码，执行代码可被存入文件或直接执行。此时，我们将编译器取名为 YC 编译器，浏览器内核取名为 YC 浏览器。
三年又三年，漫漫研发路
随后，我们继续完善浏览器内核，将其中的一些内核代码独立出来用内嵌编译器动态编译执行，并将大部分内核源代码开源。
与此同时，我们又遇到一个问题：YC 编译器虽然编译速度较快，生成的却是字节码，执行速度慢，而且与原生代码相互调用（特别是回调函数）的处理相当繁琐。因此用当时的 YC 编译器难以胜任开源代码的编译工作。
为了解决自编译浏览器内核代码的问题，我们决定修改 YC 编译器，使它的字节码转换为原生的执行码，并扩展语法，使之具有少量的 C++ 语法。这个工作持续了三年。
三年后，YC 编译器功能增多，它提供一个函数像调用动态链接库一样直接调用 C 源码中的函数。此时，浏览器内核开源部分都可以用 YC 编译器实时编译执行了。
我们继续改进浏览器内核，将速度很慢的 JavaScript 字节码改为二进制原生代码，使 JavaScript 的执行速度约提高约 100 多倍。同时将浏览器内核代码全部模块化并开源，每个模块都用 YC 编译器动态编译执行，编译器的部分源码也开源（如内嵌汇编编译器源码、反汇编源码、C/C++ 字节码的执行源码等），所有的开源代码均由内嵌的 YC 编译器自动检测编译，动态执行。这个工作大概耗时四年。
开发至此，我想起谷歌和火狐浏览器都已开源，为什么不去看看它们的源代码呢？于是找到这两个浏览器的源码。
当时由于一些原因，我分析谷歌浏览器源码没有编译通过，而火狐的源码很顺利就编译成功了，于是我就走上了分析火狐源码之路。
下载的火狐源码由纯 C 代码和 C++ 代码两部分组成，经 Visual C++ 2013 编译生成一个 xul.dll 文件和一个 firefox.exe 文件。
我首先分析了它的 C 代码，将所有的输出函数全部改为类接口，并让 xul.dll 通过 YC 编译器函数 YC_cppLoad 进行实时编译，然后用类接口调用 C 源码中的函数。这一步进行得很顺利，若修改了火狐的 C 代码，只要重新运行火狐浏览器便可生效，无需其它操作。
曾经的办公桌
接下来开始分析火狐 C++ 代码。YC 编译器只实现了少数几个 C++ 语法，不能编译火狐 C++ 代码，故分析起来非常困难。
为什么火狐 C 代码容易分析，而它的 C++ 代码难以分析呢？原来我用 YC 编译器将它的 C 代码生成汇编代码文件、变量结构定义文件、宏定义文件和预编译文件，通过这几个文件，大大减少了分析难度。
因此我再次决定修改 YC 编译器，使之完全支持 C++11 标准，因为火狐 C++ 代码几乎使用了所有的 C++11 语法特性。先使用 STL 标准模板库代码进行编译器的修改和调试，出乎预料，这个过程竟用了三年时间！之后，我用 YC++ 编译器开始调试火狐 C++ 代码。原以为 STL 那么复杂的代码都可以编译通过并正确执行，火狐 C++ 代码应该能很快就编译通过。没想到，很多语法细节 STL 没有用到，而火狐 C++ 源码用到了。于是又继续修改 YC 编译器，对火狐 C++ 的各个模块进行编译，这个过程持续了一年多。
虽然 YC 编译器可以编译全部火狐 C++ 代码，但如何生成执行代码呢？先从主程序 Firefox.cpp 入手，经整理，这个程序可用 YC 编译器生成执行代码 Firefox.exe，并能顺利运行。
由于火狐 C++ 各模块耦合紧密，很难拆分，经过一个多月的工作，仍未能将其拆成多个独立的源码模块以便于用 YC 编译器实时编译，动态执行，这也许是我对火狐 C++ 源码的整体结构还不甚清楚之故，只见其树木不见其森林。
杨晓兵
当我准备对火狐 C++ 代码进行再一次总体分析时，有个偶然的机会参与到一个学校管理系统的开发中，因原有的管理系统经常出故障，操作极其不方便。尽管没有开发 Web 服务程序的经历，但我做的软件与 Web 服务器有极大关系。
经了解，要开发这种管理系统需要的软件有：Apache 或 Nginx 服务器，数据库 MySQL 或其它，编程工具 ASP 或 JSP 或 PHP 等，于是启发我们自己研发这些工具。YC 的 C/C++ 和 JavaScript 编译器和 HTML 解析器正好派上用场。
经过一段时间，一个稳定的、可任意扩展的、多线程高并发的 HTTP 服务器就完成了。该服务器处理 YSP 文件生成网页传给浏览器。
YSP 是我设计的与 ASP、JSP 和 PHP 功能相似的一种网页编程语言。YC 服务器执行 YSP 文件中的内嵌 C/C++ 或 JavaScript 代码，生成 HTML 超文本传给终端设备。工具做好后，不久便做出了管理系统的雏形，这个雏形在发布的 YC 编译器中可见到。
做了上述这些工作后，我想是时候该写本书介绍一下 YC 编译器了，经过一段时间编写的《YC编译器—多语言程序设计》（暂名）即将出版。
当我把书完成后，便立即投入64位的C/C++和JavaScript编译器的开发，目前开发进展顺利，已进入测试阶段。
编者后记：
三年时间，可将一个呱呱落地的婴儿变成蹦蹦跳跳的幼儿，可将一名懵懂的职场新人变成沉稳的老兵。而杨晓兵团队沉下心，迎难而上，花费三年又三年、再一年、两年、四年的时间只为突破一个个技术难点，最终自研出 YC 编译器和 YC 浏览器内核。
在这过程中，杨晓兵坦言最大的挑战不仅是技术，还有思维的高度。这期间不仅有大量的研发工作，还为了优化，多次重写代码，让他坚持下来的是想为计算机软件科学的发展做贡献的匠心。
目前杨晓兵团队正在开发 64 位 C/C++ 编译器，谈及未来，杨晓兵表示先在国内推广，再走向海外。祝福杨晓兵。
YC编译器传送门：http://www.ycbro.com
<table>标签：
<table>指的是表格，用表格来搭建界面布局，即用表格的嵌套，来搭建界面布局。
<table>布局优势：
table优势：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前；
但是 table如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table嵌套的太多，运维是非常困难的。
<div>块级（block-level）标签：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
<div>布局优势：
一.精简代码，减少重构难度。
网站使用DIV+CSS布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。
二.网页访问速度
使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。
三.SEO优化
采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
四.浏览器兼容性
若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。
1.流动式布局：是HTML网页默认的布局方式
特点：
1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布，且默认状态下，块级元素占整个文档流，默认宽度为100%。
2.内联元素都会在所处的包含元素内从左到右水平分布显示，不占整个文档流。
常见的块级（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常见的内内联（行内）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮动布局（float）
特点：
浮动布局依靠【 浮动属性 float：left/right/... 】来使标签脱离文档流，达到两个块级元素并排显示的效果。
float：left ； 浮动脱离当前文档流浮动。
同时可以依靠【展示属性display：inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。
3.层模型布局又叫定位布局
特点：
当我们应拥div布局是，在第一层块界面上来做第二层块界面的开发时，就要用到我们所说的定位布局。
通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。
网页是静态的，网页上的定位
position：absolute ；绝对定位脱离文档流，不受浮动影响，就是相对于窗体（body）边界的margin定位。
position：relative； 相对定位不脱离文档流，相对于父级标签元素的位置定位。
position:fixed；固定位置，不会受任何因素影响。
滚动条移动前
滚动条移动后
优先层显示方法：【属性：z-index:0/1/2...】
特点： 数值越大，越优先显示。
注意：只有元素使用了position属性的，才具有z-index属性。
本文部分内容来自网络，如有侵权，请联系修改。
么是css的调用方式？
简单来讲，就是解决把css代码写在哪里的问题，这块内容之前在课堂上演示过，这里再用文字说明一下，权当复习。
大体有以下四种方式：
1，外联式样式表
添加在HTML的头部信息标识符< head>里：
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。
2，内嵌样式表
添加在HTML的头部信息标识符< head>里：
<head>
<style type="text/css">
<!-- 样式表的具体内容 -->
</style>
</head>type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。
3，元素内定
语法：
<Tag style="properties">网页内容</tag>举个例子：
<p style="color: blue; font-size: 10px">CSS实例</p>上面例子的代码说明：
用蓝色显示字体大小为10px的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势——即内容结构和格式控制分别保存。
4，导入样式表(高级用法，暂时先放下）
语法：
<style type="text/css">
<!-- @import url("css/base.css"); -->
</style>其中外部引用CSS主要用到两种方式link和@import
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
link和@import存在如下差别：
差别1：老祖宗的差别。link属于HTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
从上面的分析来看，还是使用link标签比较好。
课后练习：
步骤一：新建一个名为index.html的网页。
步骤二：在index.html网页文档里加入两个p标签，分别在p标签中加入内容（内容随意）
步骤三：尝试用上面提到的前三种方式，用css代码改变p标签内容的显示格式。
*请认真填写需求信息，我们会在24小时内与您取得联系。
