現代前端編譯

① 前端開發是干什麼的

前端是在瀏覽瀏覽器的肢察時候，它是網路前台的部分，運行在pc端。
移動端等瀏覽器上展示給用戶瀏覽的頁面，利用完美的動山談態設計，能夠給用戶帶來極高的用戶體驗。
前端前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站上面的視覺設計，前端開發則是網逗飢碰站的前台代碼實現。
前端開發又最基本的三個核心，這也是必須掌握的三個重要的核心，分別是HTML、CSS、JavaScript這三個，在日常的生活中我們接觸到的也很多，掌握了這三個，在前端開發應付也會很輕松。

② 編譯器的發展史

編譯器編譯器，是將便於人編寫，閱讀，維護的高級計算機語言翻譯為計算機能識別，運行的低級機器語言的程序。編譯器將源程序（Sourcenbsp;program）作為輸入，翻譯產生使用目標語言（Targetnbsp;language）的等價程序。源程序一般為高級語言（High-levelnbsp;language），如Pascal，C++等，而目標語言則是匯編語言或目標機器的目標代碼（Objectnbsp;code），有時也稱作機器代碼（Machinenbsp;code）。一個現代編譯器的主要工作流程如下：源程序（sourcenbsp;code）→預處理器（preprocessor）→編譯器（compiler）→匯編程序（assembler）→目標程序（objectnbsp;code）→連接器（鏈接器，Linker）→可執行程序（executables）nbsp;目錄nbsp;[隱藏]1nbsp;工作原理nbsp;2nbsp;編譯器種類nbsp;3nbsp;預處理器（preprocessor）nbsp;4nbsp;編譯器前端（frontend）nbsp;5nbsp;編譯器後端（backend）nbsp;6nbsp;編譯語言與解釋語言對比nbsp;7nbsp;歷史nbsp;8nbsp;參見nbsp;工作原理翻譯是從源代碼（通常為高級語言）到能直接被計算機或虛擬機執行的目標代碼（通常為低級語言或機器言）。然而，也存在從低級語言到高級語言的編譯器，這類編譯器中用來從由高級語言生成的低級語言代碼重新生成高級語言代碼的又被叫做反編譯器。也有從一種高級語言生成另一種高級語言的編譯器，或者生成一種需要進一步處理的的中間代碼的編譯器（又叫級聯）。典型的編譯器輸出是由包含入口點的名字和地址以及外部調用（到不在這個目標文件中的函數調用）的機器代碼所組成的目標文件。一組目標文件，不必是同一編譯器產生，但使用的編譯器必需採用同樣的輸出格式，可以鏈接在一起並生成可以由用戶直接執行的可執行程序。編譯器種類編譯器可以生成用來在與編譯器本身所在的計算機和操作系統（平台）相同的環境下運行的目標代碼，這種編譯器又叫做「本地」編譯器。另外，編譯器也可以生成用來在其它平台上運行的目標代碼，這種編譯器又叫做交叉編譯器。交叉編譯器在生成新的硬體平台時非常有用。「源碼到源碼編譯器」是指用一種高級語言作為輸入，輸出也是高級語言的編譯器。例如:nbsp;自動並行化編譯器經常採用一種高級語言作為輸入，轉換其中的代碼，並用並行代碼注釋對它進行注釋（如OpenMP）或者用語言構造進行注釋（如FORTRAN的DOALL指令）。預處理器（preprocessor）作用是通過代入預定義等程序段將源程序補充完整。編譯器前端（frontend）前端主要負責解析（parse）輸入的源程序，由詞法分析器和語法分析器協同工作。詞法分析器負責把源程序中的『單詞』（Token）找出來,語法分析器把這些分散的單詞按預先定義好的語法組裝成有意義的表達式，語句nbsp;，函數等等。nbsp;例如「anbsp;=nbsp;bnbsp;+nbsp;c;」前端詞法分析器看到的是「a,nbsp;=,nbsp;bnbsp;,nbsp;+,nbsp;c;」，語法分析器按定義的語法，先把他們組裝成表達式「bnbsp;+nbsp;c」，再組裝成「anbsp;=nbsp;bnbsp;+nbsp;c」的語句。nbsp;前端還負責語義（semanticnbsp;checking）的檢查，例如檢測參與運算的變數是否是同一類型的，簡單的錯誤處理。最終的結果常常是一個抽象的語法樹（abstractnbsp;syntaxnbsp;tree，或nbsp;AST），這樣後端可以在此基礎上進一步優化，處理。編譯器後端（backend）編譯器後端主要負責分析，優化中間代碼（Intermediatenbsp;representation）以及生成機器代碼（Codenbsp;Generation）。一般說來所有的編譯器分析，優化，變型都可以分成兩大類：nbsp;函數內（intraproceral）還是函數之間（interproceral）進行。很明顯，函數間的分析，優化更准確，但需要更長的時間來完成。編譯器分析（compilernbsp;analysis）的對象是前端生成並傳遞過來的中間代碼，現代的優化型編譯器（optimizingnbsp;compiler）常常用好幾種層次的中間代碼來表示程序，高層的中間代碼（highnbsp;levelnbsp;IR）接近輸入的源程序的格式，與輸入語言相關（languagenbsp;dependent），包含更多的全局性的信息，和源程序的結構；中層的中間代碼（middle

③ 什麼是編譯器

編譯器

編譯器是一種特殊的程序，它可以把以特定編程語言寫成的程序變為機器可以運行的機器碼。我們把一個程序寫好，這時我們利用的環境是文本編輯器。這時我程序把程序稱為源程序。在此以後程序員可以運行相應的編譯器，通過指定需要編譯的文件的名稱就可以把相應的源文件（通過一個復雜的過程）轉化為機器碼了。

[編輯]編譯器工作方法
首先編譯器進行語法分析，也就是要把那些字元串分離出來。然後進行語義分析，就是把各個由語法分析分析出的語法單元的意義搞清楚。最後生成的是目標文件，我們也稱為obj文件。再經過鏈接器的鏈接就可以生成最後的可執行代碼了。有些時候我們需要把多個文件產生的目標文件進行鏈接，產生最後的代碼。我們把一過程稱為交叉鏈接。

一個現代編譯器的主要工作流程如下：

* 源程序（source code）→預處理器（preprocessor）→編譯器（compiler）→匯編程序（assembler）→目標程序（object code）→連接器（鏈接器，Linker）→可執行程序（executables）

工作原理

編譯是從源代碼（通常為高級語言）到能直接被計算機或虛擬機執行的目標代碼（通常為低級語言或機器言）。然而，也存在從低級語言到高級語言的編譯器，這類編譯器中用來從由高級語言生成的低級語言代碼重新生成高級語言代碼的又被叫做反編譯器。也有從一種高級語言生成另一種高級語言的編譯器，或者生成一種需要進一步處理的的中間代碼的編譯器（又叫級聯）。

典型的編譯器輸出是由包含入口點的名字和地址以及外部調用（到不在這個目標文件中的函數調用）的機器代碼所組成的目標文件。一組目標文件，不必是同一編譯器產生，但使用的編譯器必需採用同樣的輸出格式，可以鏈接在一起並生成可以由用戶直接執行的可執行程序。

編譯器種類

編譯器可以生成用來在與編譯器本身所在的計算機和操作系統（平台）相同的環境下運行的目標代碼，這種編譯器又叫做「本地」編譯器。另外，編譯器也可以生成用來在其它平台上運行的目標代碼，這種編譯器又叫做交叉編譯器。交叉編譯器在生成新的硬體平台時非常有用。「源碼到源碼編譯器」是指用一種高級語言作為輸入，輸出也是高級語言的編譯器。例如: 自動並行化編譯器經常採用一種高級語言作為輸入，轉換其中的代碼，並用並行代碼注釋對它進行注釋（如OpenMP）或者用語言構造進行注釋（如FORTRAN的DOALL指令）。

預處理器（preprocessor）

作用是通過代入預定義等程序段將源程序補充完整。

編譯器前端（frontend）

前端主要負責解析（parse）輸入的源程序，由詞法分析器和語法分析器協同工作。詞法分析器負責把源程序中的『單詞』（Token）找出來,語法分析器把這些分散的單詞按預先定義好的語法組裝成有意義的表達式，語句 ，函數等等。 例如「a = b + c;」前端詞法分析器看到的是「a, =, b , +, c;」，語法分析器按定義的語法，先把他們組裝成表達式「b + c」，再組裝成「a = b + c」的語句。 前端還負責語義（semantic checking）的檢查，例如檢測參與運算的變數是否是同一類型的，簡單的錯誤處理。最終的結果常常是一個抽象的語法樹（abstract syntax tree，或 AST），這樣後端可以在此基礎上進一步優化，處理。

編譯器後端（backend）

編譯器後端主要負責分析，優化中間代碼（Intermediate representation）以及生成機器代碼（Code Generation）。

一般說來所有的編譯器分析，優化，變型都可以分成兩大類： 函數內（intraproceral）還是函數之間（interproceral）進行。很明顯，函數間的分析，優化更准確，但需要更長的時間來完成。

編譯器分析（compiler analysis）的對象是前端生成並傳遞過來的中間代碼，現代的優化型編譯器（optimizing compiler）常常用好幾種層次的中間代碼來表示程序，高層的中間代碼（high level IR）接近輸入的源程序的格式，與輸入語言相關（language dependent），包含更多的全局性的信息，和源程序的結構；中層的中間代碼（middle level IR）與輸入語言無關，低層的中間代碼(Low level IR)與機器語言類似。 不同的分析，優化發生在最適合的那一層中間代碼上。

常見的編譯分析有函數調用樹（call tree），控制流程圖（Control flow graph），以及在此基礎上的變數定義－使用，使用－定義鏈（define-use/use-define or u-d/d-u chain），變數別名分析（alias analysis），指針分析（pointer analysis），數據依賴分析（data dependence analysis）等等。

上述的程序分析結果是編譯器優化（compiler optimization）和程序變形（compiler transformation）的前提條件。常見的優化和變新有：函數內嵌（inlining），無用代碼刪除（Dead code elimination），標准化循環結構（loop normalization），循環體展開（loop unrolling），循環體合並，分裂（loop fusion，loop fission），數組填充（array padding），等等。優化和變形的目的是減少代碼的長度，提高內存（memory），緩存（cache）的使用率，減少讀寫磁碟，訪問網路數據的頻率。更高級的優化甚至可以把序列化的代碼（serial code）變成並行運算，多線程的代碼（parallelized，multi-threaded code）。

機器代碼的生成是優化變型後的中間代碼轉換成機器指令的過程。現代編譯器主要採用生成匯編代碼（assembly code）的策略，而不直接生成二進制的目標代碼（binary object code）。即使在代碼生成階段，高級編譯器仍然要做很多分析，優化，變形的工作。例如如何分配寄存器（register allocatioin），如何選擇合適的機器指令（instruction selection），如何合並幾句代碼成一句等等。

④ 前端開發常用哪些工具軟體

前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：

1、WebStorm

幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。

2、IntelliJ idea

頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。

2、HBuilderX

HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。

⑤ web前端開發需要掌握的幾個必備技術

接下來由小編簡單的列舉出幾個前端開發中必須要學會的知識：

第一階段：

HTML+CSS:

HTML進階、CSS進階、div+css布局、HTML+css整站開發、

JavaScript基礎：

Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效：

常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。

JS高級特徵：

正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、

JQuery：基礎使用

懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：

HTML5和移動Web開發

HTML5：

HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.

CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:

響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發：

跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。

第三階段：

HTTP服務和AJAX編程

WEB伺服器基礎：

伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

PHP基礎：

PHP基礎語法、使用PHP處理簡單的GET或者POST請求、

AJAX上篇：

Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。

AJAX下篇：

JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段：

面向對象進階

面向對象終極篇：

從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。

面向對象三大特徵：

繼承性、多態性、封裝性、介面。

設計模式：

面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段：

封裝一個屬於自己的框架

框架封裝基礎：

事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。

框架封裝中級：

運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。

框架封裝高級和補充：

JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。

第六階段：

模塊化組件開發

面向組件編程：

面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。

面向模塊編程：

AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：

主流的流行框架

Web開發工作流：

GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用庫：

React.js、Vue.js、Zepto.js。

第八階段：

HTML5原生移動應用開發

Cordova：

WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。

Ionic：

Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。

ReactNative：

ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。

HTML5+：

HTML5+中國產業聯盟、HTML5PlusRuntime環境、HBuilder開發工具、MUI框架、H5+開發和部署。

第九階段：

Node.js全棧開發：

快速入門：

Node.js發展、生態圈、Io.js、Linux/Windows/OSX環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。

核心模塊和對象：

全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端。

Web開發基礎：

HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。

快速開發框架：

Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。