大前端的技術原理和變遷史

村口蹲一郎發表於2018-07-27

前端

本文適合前端新手入門，閱讀人群最好是前端新手或者後臺開發人員，因為我不敢保證對前端老司機有太多收穫。

通過閱讀本文，你將會大致瞭解前端這些年發生的事情，以及一些前端當前主流技術的簡單原理介紹。所有涉及的內容，都是儘可能的讓你捅破這層窗戶紙，知道其大致的玩法。

前端技術發展軌跡
- 角色架構發展史
- 前端技術發展史
- ECMAScript語法發展史
- Ajax技術發展史
當前主流技術原理介紹
- SPA 單頁面應用原理
- Node.js 伺服器端JS執行原理
- SSR 伺服器端渲染原理
- Vue MVVM原理
- Webpack 打包原理
- Sass CSS編譯原理
一些新技術探索
- TypeScript
- PWA
- GraphQL
- Flutter
兩個流行的概念解答
- 什麼是大前端
- 什麼是前端工程化

一、前端技術發展軌跡

本節知識點：

角色架構發展史
前端技術發展史
ECMAScript語法發展史
Ajax技術發展史

1.1 角色架構發展史

https://user-gold-cdn.xitu.io/2018/7/27/164daee36340b5d2?w=1730&h=1186&f=png&s=244723

Web1.0 到 Web2.0過渡的標誌，就是Ajax的出現（2005年）。

1.2 前端技術發展史

https://user-gold-cdn.xitu.io/2018/7/27/164daee3634db870?w=1584&h=1268&f=png&s=313531

1.3 ECMAScript語法發展史

1.4 Ajax技術發展史

AJAX 即 Asynchronous JavaScript and XML（非同步的 JavaScript 與 XML 技術）。

STEP1：XMLHttpRequest 原生物件

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();
複製程式碼

STEP2：$.ajax 操作

$.ajax({
    type: 'GET',
    url: '/my/url',
    data: data,
    success : function(result){
        //TODO RESULT
    }
});
複製程式碼

STEP3：Promise 操作

let getData = function (url) {
    return new Promsie(function (resolve, reject) {
        $.ajax({
            type: 'GET',
            url: url,
            success: function (data) {
                resolve(data);         
            },
            error: function (err) {
                reject(err);
            }
        });
    });
};

var data = getData('/my/url').then(function (data) {
     //TODO DATA
});
複製程式碼

STEP4：生成器 Gererator

let it = null;
let ajax = function(url,data){
    $.ajax({
       type: 'GET',
       url: url,
       data: data || {},
       success : function(result){
			it.next(result);
       }
    });
};

function *getData(){
    var data = yield ajax('/my/url');
    console.log('data=',data);
};

it = getData();
it.next(); 
複製程式碼

STEP5：Async/Await 高階操作

let ajax = function(url,data){
    return $.ajax({
       type: 'GET',
       url: url,
       data: data || {}
    });
};

async function getData(){
    var data = await ajax('/my/url');
    console.log('data=',data);
};

getData();
複製程式碼

Ajax的相關背景資料：

1999年，微軟公司釋出IE瀏覽器5.0版，第一次引入新功能：允許JavaScript指令碼向伺服器發起HTTP請求。這個功能當時並沒有引起注意，直到2004年Gmail釋出和2005年Google Map釋出，才引起廣泛重視。

2005年2月，AJAX這個詞第一次正式提出，指圍繞這個功能進行開發的一整套做法。從此，AJAX成為指令碼發起HTTP通訊的代名詞，W3C也在2006年釋出了它的國際標準。

二、當前主流技術原理介紹

本節知識點：

SPA 單頁面應用原理
Node.js 伺服器端JS執行原理
SSR 伺服器端渲染原理
Vue MVVM原理
Webpack 打包原理
Sass CSS開發原理

2.1 SPA 單頁面應用原理

什麼是SPA? SPA 即單頁面，就是頁面整體不重新整理，不同的頁面只改變區域性的內容的一種實現方式。

一個完整的URI有以下幾部分組成：

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]
複製程式碼

瀏覽器的URL也遵循以上規則，而對於以上規則中，只有 # 後面的 fragment 發生改變時，頁面不會重新請求，其它引數變化，均會引起頁面的重新請求，而在Js中恰恰還有事件 window.onhashchange 能監聽到 fragment 的變化，於是就利用這個原理來達到一個修改區域性內容的操作。

#fragment 部分就是對應到Js中的 location.hash 的值。

直接上程式碼描述：

<!DOCTYPE html>
    <head>
        <script type="text/javascript">
        	window.onhashchange = function(){
                var page = location.hash;
                if(page === '#home'){
                    document.getElementById('main').innerHTML = '這是首頁';
                    return;
                };
                
                if(page === '#help'){
                    document.getElementById('main').innerHTML = '這是幫助頁面';
                    return;
                };
                
                document.getElementById('main').innerHTML = '404';
            }
        </script>
    </head>
    <body>
        <header>
        	<a href="#home">首頁</a>
            <a href="#help">幫助</a>
        </header>
        <article id="main"></article>
    </body>
</html>
複製程式碼

以上程式碼直接在HTML上面有2個連結，點選後在頁面的部分割槽域直接顯示這2個連結對應的不同的頁面內容。

2.2 Node.js 伺服器端JS執行原理

伺服器上如何應用Js呢？這句話可以理解為：在非網頁情況下如何執行Js程式（或者命令列如何執行）。

與Java在伺服器上執行需要按照JDK一樣，Js要執行也需要安裝Node環境，安裝以後就可以執行了，具體的可以對照著Java程式來解釋說明。

2.3 SSR 伺服器端渲染原理

用過Java的人一定對 FreeMarker 不陌生，其工作原理：

對於Node.js來說也是一樣，只是使用的框架不是FreeMarker罷了！究其原理無非都是：

Template + Data = Output

只是現在前端說的這個SSR，其實就是指後臺渲染好資料，直接返回到瀏覽器，瀏覽器就直接顯示了，下面我們做一個對比，用來說明傳統的AJax操作和SSR之間的區別。

使用Ajax運算元據渲染到頁面

<!DOCTYPE html>
    <head>
        <script type="text/javascript" src="lib/jquery.min.js"></script>
        <script type="text/javascript">
            /**
             * 使用jQuery將後臺介面返回的資料顯示到頁面上
             */
            function renderData(){
                $.post(url,param,function(result){
                    //假設返回的是是一個List，我們追加到頁面的ul中
                    $.each(result,function(i,d){
                        $('#list').append('<li>' + d.name + '</li>');
                    })
                });  
            };
            renderData();
        </script>
    </head>
    <body>
        <ul id="list"></ul>
    </body>
</html>
複製程式碼

主要流程如下：

使用者位址列輸入URL
瀏覽器使用HTTP協議從後臺獲取資源
瀏覽器解析並渲染HTML頁面呈現到瀏覽器上，同時非同步執行Ajax操作
瀏覽器傳送Ajax請求後臺介面
瀏覽器獲取到資料後，執行回撥函式，將內容動態追加到頁面上

使用SSR技術顯示頁面

下面示例我們以Vue框架後臺直出方案為例：

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  //vue物件包含了template+data
  const app = new Vue({
    data: {
        list: [{
            name : 'lilei'
        },{
            name : 'hanmeimei'
        }]
    },
    template: `<ul><li v-for="item in list">{{item.name}}</li></ul>`
  })

  //將vue物件傳入最終返回output結果html
  //再將html通過reponse物件返回給前端瀏覽器
  renderer.renderToString(app, (err, html) => {
    res.end(`
      <!DOCTYPE html>
      <html>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)
複製程式碼

主要流程如下：

使用者位址列輸入URL
瀏覽器使用HTTP協議從後臺獲取資源
瀏覽器解析並渲染HTML頁面呈現到瀏覽器上

如果有人對這個vue示例的完整構建流程感興趣，可以按照如下流程快速搭建環境並允許起來：

下載並安裝Nodejs：https://nodejs.org/zh-cn/download/
新建一個目錄，開啟命令視窗，切換到當前目錄
執行命令：npm init，一直回車進行下一步，快速建立一個node工程
安裝所需要的js包：npm i vue express vue-server-renderer --save-dev
新建檔案：vi index.js，將上面的vue程式碼片段全部貼上進去
執行檔案啟動Node程式：node index.js
開啟瀏覽器訪問：http://localhost:8080（注意埠號不要跟本地已有程式衝突）

2.4 Vue MVVM原理

什麼是MVC？什麼是MVVM？

通過上圖可以清晰的看到，MVVM相比MVC來說，缺少了 Controller 一層，傳統 Controller 做的事情就是處理一堆複雜的邏輯，然後將資料輸出到 View 上面。那麼現在缺少了這一層以後，View 和 ViewModel 之間如何進行雙向自動關聯資料繫結的呢？

也就是說，頁面上資料發生變化，Js中的資料如何跟著也變化；相反，Js中資料變化了，頁面如何自動跟著變化？

舉個例子來進一步闡明這個問題，下面的效果如何實現？

頁面資料發生變化如何通知到JS

通過給頁面元素新增 onchange 或者 oninput 事件，在事件中獲取表單的值，然後賦值給Js對應的物件上即可。

比如：示例中的輸入框就可以新增oninput事件

<input type="text" oninput="evtInput" />
複製程式碼

然後在js中定義這個函式執行相關賦值操作就可以：

function evtInput(){
    vue.name = this.value;
}
複製程式碼

JS資料變化如何通知到頁面

JavaScript原生有個方法 Object.defineProperty() ，這個方法可以重新設定一個js物件中某個元素的一些屬性，同時提供了 get 和 set 方法，允許使用者對元素進行重新賦值和取值操作。

簡單分析一下程式碼：

正式由於我們可以通過攔截一個屬性的 set 方法。所以，我們就可以在 set 方法中講獲取到的新值賦值給頁面元素就可以了。

Object.defineProperty(data,'name',{
    set : function(v){
		document.getElementById('input').value = v;
	}
});
複製程式碼

2.5 Webpack 打包原理

前端為什麼要打包？

那麼前端為什麼要進行打包呢？前端程式碼不是直接就能執行到瀏覽器麼，還打包乾嘛？

要搞清楚這個問題，那麼我們就以java為例可能比較恰當，比如：java的工程目錄中有一個原始碼目錄：src

它是用來存放java原始碼的，但是java實際編譯後肯定就沒有src這個目錄了對吧？

那麼 src 原始碼的作用是什麼呢？就是用來更好的歸類整理我們的原始碼，它有可能是跟我們實際執行的程式碼結構完全不一樣，因為實際執行的是機器能讀懂的，而原始碼是給人看的。

所以前端也一樣，由於當前階段，前端的業務邏輯也變的非常複雜，再不是傳統意義上的一個 html、一個js、一個css就能搞定的。所以我們要分模組，分目錄存放原始碼，最終通過打包再組裝成瀏覽器可以讀懂的程式碼和目錄結構。

比如：我們通過vue的腳手架建立一個vue的webpack專案，看看它的預設的原始碼目錄（src）的樹結構：

src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
└── router
    └── index.js
複製程式碼

src中除了有3個子目錄 assets components router ，還有2個 .vue 結尾的檔案。所以，這種目錄結構和檔案在瀏覽器中肯定是無法執行的，如果我們要執行，就必須對它進行編譯，翻譯成瀏覽器能讀懂的html/js/css檔案才行。

當我們打包以後，看到專案的dist目錄下就有了編譯以後的，瀏覽器可執行的程式碼結構：

dist
├── index.html
└── static
    ├── css
    │   ├── app.30790115300ab27614ce176899523b62.css
    │   └── app.30790115300ab27614ce176899523b62.css.map
    └── js
        ├── app.b22ce679862c47a75225.js
        ├── app.b22ce679862c47a75225.js.map
        ├── manifest.2ae2e69a05c33dfc65f8.js
        ├── manifest.2ae2e69a05c33dfc65f8.js.map
        ├── vendor.7fed9fa7b7ba482410b7.js
        └── vendor.7fed9fa7b7ba482410b7.js.map
複製程式碼

所以，當前前端程式碼邏輯複雜，各種框架橫行的年代，原始碼都是不能直接在瀏覽器訪問的，都需要藉助打包工具，如：gulp、webpack這些工具進行打包翻譯，才能得到真正的可執行的檔案。

Webpack 打包原理

一句話概括Webpack的本質：

webpack 是一個打包模組化js的工具，可以通過Loader轉換檔案，通過Plugin擴充套件功能。

Webpack打包的簡易示意圖：

2.6 Sass CSS編譯原理

什麼是Sass？就是一種能提高CSS開發效率的工具。

其編譯原理是：

實際在專案中怎麼用Sass呢？

前面在說Webpack的時候說過了，現在前端技術離開打包工具是不能直接執行，類似於這種Sass檔案也一樣。所以，我們只需要在Webpack中增加Sass檔案的Loader，這樣在程式碼編譯環境，就能自動把Sass檔案轉換為Css檔案，最後引入到Html中的是Css檔案，這樣頁面就能正常渲染了。

Sass有什麼好處？

test.scss檔案：

$color-red: #00ff00;
$color-white: #ffffff;

#main p {
  color: $color-red;
  width: 97%;

  .redbox {
    background-color: $color-red;
    color: $color-white;
  }
}
複製程式碼

如果用傳統的css寫：

#main p {
  color: #00ff00;
  width: 97%; 
}

#main p .redbox {
    background-color: #00ff00;
    color: #ffffff; 
}
複製程式碼

三、一些新技術探索

本節知識點：

TypeScript
PWA
GraphQL
Flutter

3.1 TypeScript

什麼是TypeScript？

TypeScript 是微軟開源釋出的JavaScript型別的超集，它可以編譯成純JavaScript。

它是一個Js框架，可以用來開發前端系統。

之所以說TypeScript是JavaScript的超集，就意味著TypeScript在JavaScript的語法基礎上，又擴充套件了更多語法，使得開發更加方便。

接下來我們看看TypeScript的相比JavaScript額外增加的部分：

學Java的同學不要驚慌，個人看來TypeScript就是把Java用JavaScript重新實現了一遍！

1、強資料型別

//Boolean型別
let isDone: boolean = false;

//數字型別
let decLiteral: number = 6;

//字串
let name: string = "bob";

//陣列
let list: Array<number> = [1, 2, 3];

//函式定義
function add(x: number, y: number): number {
    return x + y;
}
複製程式碼

2、介面

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
複製程式碼

這裡的介面與Java中的介面不一樣，TypeScript中的介面僅僅是對引數的一種契約約定，即：引數必須是介面定義的結構和引數名等。

3、類

//定義類
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

//類的繼承
class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

//共有、私有變數、方法
class Animal {
    private id: number; //僅類內部訪問，例項無法訪問
    public name: string;//類內部和例項都可以訪問
    protected pid: number;//僅類內部和子類可以訪問
    
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
複製程式碼

4、泛型

function identity<T>(arg: T): T {
    return arg;
}
複製程式碼

5、列舉

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}
複製程式碼

3.2 PWA

什麼是PWA？

Progressive Web App, 簡稱 PWA，是漸進式提升 Web App 的體驗的一種新方法，能給使用者原生應用的體驗。

PWA 本質上是 Web App，就是執行在手機上的App不是純Native的，而是很多頁面都是網頁。

Web App ，我們都知道就是App中有網頁嘛！但是 Progressive 漸進式 又該怎麼理解？

個人理解，漸進式 的意思就是：循序漸進的發展或者改造。

PWA更直白的意思就是：

第一步：我們現在要開發一個App，但是開發純原生App的維護和擴充套件成本太高，所以我們需要增加一些網頁進去，畢竟網頁好維護嘛！（這部分其實就是混合類App，也叫：Hybrid App）

第二步：但是我們App中增加網頁不能太暴力，太暴力容易讓使用者覺得很不自然，所以需要使用循序漸進的方式進行，那麼如何循序漸進的進行才能讓使用者的體驗達到極致（也就是幾乎看不出來某一個頁面是一個網頁！）

第三步：我們就需要增加一些策略，先保證使用者體驗，比如：為了保證安全網頁全部使用HTTPS、使用離線快取來減少使用者開啟頁面的等待時間等等。

所以，PWA就是以循序漸進的方式，提升混合類APP的使用者體驗，而影響體驗最大的問題就是頁面載入，所以PWA最核心的技術就是：離線快取 ，離線快取大家普遍採用的方案就是：Service Worker

3.3 GraphQL

在瞭解什麼是GraphQL之前，我們先了解一下什麼是SQL？

什麼是SQL？

Structured Query Language，一種結構化的查詢語言，它是關係式資料庫管理系統的標準語言。

說白了，SQL是一種特定的語法，也可以稱之為是資料庫管理的API，運算元據庫必須通過這個語法進行。

什麼是GraphQL呢？

一種用於API的查詢語言

GraphQL 既是一種用於 API 的查詢語言也是一個滿足你資料查詢的執行時。 GraphQL 對你的 API 中的資料提供了一套易於理解的完整描述，使得客戶端能夠準確地獲得它需要的資料，而且沒有任何冗餘，也讓 API 更容易地隨著時間推移而演進，還能用於構建強大的開發者工具。

用一組圖來說明下：

那你又要說了？沒有GraphQL我現在客戶端和後臺之間不照樣可以互動嗎？

沒錯！你是這麼互動的：

所以，不是說離開GraphQL我們就不能活，而是它給我們提供了一種全新的API查詢互動方式，使得客戶端和後臺的介面通訊更加高效罷了。

那麼GraphQL相比傳統的介面請求，都有哪些優勢呢？

1、所見即所得

//查詢條件
{
    user(uid:1) {
        uid
        name
    }
}

//返回結果
{
  "data": {
    "user": {
      "uid": "1",
      "name": "xxx"
    }
  }
}
複製程式碼

傳統的API是什麼樣子？

//查詢條件
{
    uid : 1
}

//返回結果
{
  "data": {
    "user": {
      "uid": "1",
      "name": "xxx"
    }
  }
}
複製程式碼

2、減少網路請求次數

只需要一次網路請求，就能獲得資源和子資源的資料（例如，上文中文章的評論資訊）。

//查詢條件
{
    article(aid:1) {
        title
        content
        author {
            uid
            name
        }
    },
    comment {
        content,
        author {
            uid
            name
        }
    }
}
複製程式碼

傳統的查詢，一般先查詢Article，再查詢Comment。當然你可以一次性去查，讓後臺一次性返回來，但是一般沒有後臺會給你設計這樣的一個API：getArticleAndComment，如何按照Restful的介面標準，你應該需要查詢2次。

3、引數型別強校驗

GraphQL規定了一套資料型別，這就保證介面查詢的時候，欄位型別就被明確定義，而傳統的介面一般很難保證查詢引數的型別。

比如，以下就是GraphQL的語法定義：

type Starship {
  id: ID!
  name: String!
  length(unit: LengthUnit = METER): Float
}
複製程式碼

3.4 Flutter

什麼是Flutter？

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。

下圖就是使用Flutter開發一款App的樣子：

類似於 React Native 框架一樣，Flutter也是可以呼叫一些App系統級的命令，能讓你快速開發一款混合類App（Hybrid App）。

有興趣的可以去官網學習：Flutter中文網

四、兩個流行的概念解答

本節知識點：

什麼是大前端
什麼是前端工程化

4.1 什麼是大前端

本文的標題是 大前端的技術原理和演變史，現在給大家解答一下，什麼是：大前端。

大前端 就是相比 前端 而言變大了，那麼到底傳統意義的前端指什麼？變成大前端又有哪些東西變大了呢？

傳統的意義的前端指是什麼呢？

傳統的前端就是指直接面對客戶的應用或者系統，比如：網頁、手機App。

而開發網頁、搞iOS和Android開發的程式設計師都可以稱之為前端工程師。

只是傳統意義來說，前端工程師僅僅指網頁開發的人，而iOS和Android開發的一般指客戶端開發人員，或者歸結到軟體工程師崗位去了。

那麼大前端又指什麼呢？其實經過各種資料考證，並沒有這麼一個明確的定義，只是隨著技術的進步，大家有了一種預設的約定，大前端之所以稱之為大前端，主要體現在以下一些方面：

1、大前端 - 前後端分離

隨著前後端職責和技術框架的分離發展，產品對前端的要求越來越高，使用者對前端的期待越來越高，前端技術發展越來越快，導致前端這個崗位並沒有像JSP時代那種畫畫頁面就完事了。這部分體現的是前端的要求更高，責任越大了。

2、大前端 - Node全棧

前後端分離後，前端要獨立完成一個事情是不行的，因為缺少後臺的支援。但是隨著Node的出現，前端可以不用依賴後臺人員，也不用學習新的後臺語言，就可以輕鬆搞定後臺的這部分事情。這樣，面對一些小的系統，前端工程師就可以搞定整個系統。這部分體現了前端的全面性和全棧性。

3、大前端 - 應對各種端

傳統的前端工程師，一般指網頁開發工程師，網站一般指執行在PC瀏覽器，慢慢的也要執行在手機上。但是，隨著移動網際網路的發展，突然冒出來更多的移動裝置，比如：手機分為Android手機和蘋果手機、智慧手錶、VR/AR技術支撐的可穿戴裝置、眼睛、頭盔、車載系統、智慧電視系統等等。而這些裝置都需要前端的支撐，這時候對前端的技術要求、能力要求就更高。這部分體現了前端的涉獵範圍變大。

4、大前端 - 微應用

當微信小程式出來以後，大家第一感覺是前端又可以火一把啦，不需要後臺、不需要服務端，只需要在微信平臺上開發網頁就可以釋出上線了。

而近期又有國內多個手機廠家聯合推出 快應用 , 跟小程式差不多，只是通過簡單的前端開發釋出以後，使用者不需要安裝應用就可以直接在類似於小米、vivo、oppo等手機上開啟這樣的應用。

類似於這些微應用，免後臺、免安裝的形式出現，也促使了前端這個行業也將涉及到這樣的新型領域中，一起推動技術的進步。這部分體現了前端是時代發展的幸運兒。

綜上所述，我們可以得到一個大致的定義：

大前端指前端涉獵範圍越來越廣、涉及的端越來越多、技術要求越來越高、影響範圍越來越大的一種體現。

4.2 什麼是前端工程化

前端工程化的定義：

前端工程化是根據業務特點，將前端開發流程規範化，標準化，它包括了開發流程，技術選型，程式碼規範，構建釋出等，用於提升前端工程師的開發效率和程式碼質量，最終交付一個穩定性高、擴充套件性好、易於維護的系統的過程。

一般情況下，一個符合前端工程化要求的方案應該包含以下要素：

開發規範
模組化開發
元件化開發
元件倉庫
效能優化
部署
開發流程
開發工具

另外，我們再談到工程化，不能只想著前端工程化，而應該站在整個系統考慮如何進行工程化，也就是說對於一整個專案，我們談到工程化應該考慮哪些因素呢？

一個系統的工程化建設，應該包含以下因素：

目標，搞清楚目標群體，並持續為他們做好最優質的服務；
邊界，與別的系統劃清界限，同時做好介面，保證自身系統職責定位清晰的同時，管理好依賴系統，增加自身健壯性；
壁壘，自身平臺建設，其中就包含了前端工程化建設，以及後臺工程化建設，還有專案整體建設等諸多因素。

參考資料

簡述大前端技術棧的渲染原理
2024-11-07
前端
SAP 前端技術的演化史簡介
2019-02-24
前端
瀏覽器 UA 的變遷史
2022-07-09
瀏覽器
IT技術運營概述 & IT深層變遷
2019-11-27
阿里前端談：前端發展史，引領新技術、前端價值
2019-07-17
阿里前端
虛擬機器遷移技術原理與應用
2023-12-28
虛擬機
大資料技術的原理是什麼
2022-03-30
大資料
前端技術探秘-Nodejs的CommonJS規範實現原理
2024-11-04
前端NodeJS
從IT技術變遷分析銀行IT發展趨勢
2022-03-18
AI和大資料下，前端技術將如何發展？
2020-10-30
AI大資料前端
Oracle DUL的工作原理和技術實現
2021-01-10
Oracle
Web前端發展史（自我成長技術路線圖）
2019-12-10
Web前端
Web前端技術分享：學習HTML和CSS的5大理由
2021-12-13
Web前端HTMLCSS
“出海買量高手”十年變遷史
2021-01-06
2021 技術展望丨實時互動場景下，音訊的技術變遷與機遇
2021-11-29
音訊
大資料技術原理與應用
2018-11-12
大資料
大資料——Flink核心技術及原理
2021-01-02
大資料
GMTC全球大前端技術大會幹貨分享
2019-06-22
前端
前端監控 SDK 的一些技術要點原理分析
2021-10-12
前端
前端技術演進（七）：前端跨棧技術
2019-02-16
前端
四年，如何從前端小白蛻變為前端技術專家？
2020-10-26
前端
奧利給！遊戲內外的巨魔變遷簡史
2019-12-04
遊戲
聊一聊手遊付費史中月卡的變遷
2020-09-16
【Netty技術專題】「原理分析系列」Netty強大特性之ByteBuf零拷貝技術原理分析
2021-12-29
Netty
Elasticsearch 技術分析（九）：Elasticsearch的使用和原理總結
2019-07-22
Elasticsearch
技術趣味史-Java語言的身世
2018-11-23
Java
前端技術演進（一）：Web前端技術基礎
2019-03-04
前端Web
大資料技術原理與應用——大資料概述
2018-07-10
大資料
銀行IT架構變遷史（金融IT基礎架構）
2019-03-18
架構
大前端技術選型總結和一些架構比較
2018-07-20
前端架構
2018年九大改變世界的技術趨勢
2018-05-24
2019年大前端技術趨勢深度解讀
2019-03-18
前端
爬蟲的實現原理和技術進行講解
2023-11-28
爬蟲
前端常用的快取技術
2019-04-19
前端快取
SSM三大框架的執行流程、原理、核心技術詳解
2021-02-18
SSM框架
前端路由的原理和實現
2019-04-28
前端路由
技術趣味史-Java 各個版本的特性
2018-11-30
Java
小菜前端的技術棧是如何規劃和演進的
2019-03-26
前端

大前端的技術原理和變遷史

目錄

一、前端技術發展軌跡

1.1 角色架構發展史

1.2 前端技術發展史

1.3 ECMAScript語法發展史

1.4 Ajax技術發展史

STEP1：XMLHttpRequest 原生物件

STEP2：$.ajax 操作

STEP3：Promise 操作

STEP4：生成器 Gererator

STEP5：Async/Await 高階操作

二、當前主流技術原理介紹

2.1 SPA 單頁面應用原理

2.2 Node.js 伺服器端JS執行原理

2.3 SSR 伺服器端渲染原理

使用Ajax運算元據渲染到頁面

使用SSR技術顯示頁面

2.4 Vue MVVM原理

頁面資料發生變化如何通知到JS

JS資料變化如何通知到頁面

2.5 Webpack 打包原理

前端為什麼要打包？

Webpack 打包原理

2.6 Sass CSS編譯原理

三、一些新技術探索

3.1 TypeScript

3.2 PWA

3.3 GraphQL

3.4 Flutter

四、兩個流行的概念解答

4.1 什麼是大前端

4.2 什麼是前端工程化

參考資料

相關文章