Node.js一發(fā)布，立刻在前端工程師中引起了軒然大波，前端網(wǎng)站制作工程師們幾乎立刻對這一項(xiàng)技術(shù)表露出了相當(dāng)大的熱情和期待。上一次一種技術(shù)能被整個前端界如此關(guān)注那還是在幾年之前，那時候Ajax這個概念剛剛被提出來。讓JavaScript跑在server端，這個想法簡直太棒了。這下我們不用再去學(xué)那些什么PHP啦、Ruby啦、Java啦、Scala啦或者其他什么對前端來說奇怪的語言，也可以輕松地將我們的領(lǐng)域擴(kuò)展到server端，多么美好的前景！
一、前端網(wǎng)站制作的兩次新生
Brendan Eich[2]可能也沒有想到JavaScript這門第1版只用了10天便完成設(shè)計的腳本語言在今天會如此流行。JavaScript目前不僅可以開發(fā)傳統(tǒng)的Web站點(diǎn)，而且還跨足了手機(jī)App、小程序、物聯(lián)網(wǎng)等開發(fā)領(lǐng)域。JavaScript經(jīng)歷過兩次革命性的突破，這兩次突破也帶給了前端兩次新生。
1.第一次新生：AJAX
AJAX技術(shù)起步于微軟0utlook的XMLHTTP組件，微軟將其作為ActiveX組件的一部分加入Internet Explorer5。隨后，其他瀏覽器廠商，包括Mozi1la、Safari、Opera等，實(shí)現(xiàn)了一個同樣功能的JavaScript對象一—XMLHttpRequest。微軟是AJAX技術(shù)的布道者，Google的進(jìn)一步推廣將其帶到了普通民眾眼前。人們驚嘆于Google地圖、Gmail等Web應(yīng)用程序絕佳的用戶體驗(yàn)。Jesse JamesGarrett[3]在2005年2月“Ajax：A New Approach to Web Applications”一文中正式提出了“AJAX”一詞，并一直沿用至今。隨后，W3C在2006年正式發(fā)布了XMLHttpRequest規(guī)范草案。
AJAX技術(shù)可以實(shí)現(xiàn)異步請求和局部刷新，徹底改變了傳統(tǒng)Web站點(diǎn)的交互模式。Web不僅是供靜態(tài)展示的網(wǎng)站，而且是一種由瀏覽器展現(xiàn)、資源寄存于Internet的應(yīng)用程序。以此為契機(jī)，Web開發(fā)者開始在AJAX技術(shù)的基礎(chǔ)之上探索和開發(fā)更加豐富的功能和優(yōu)雅的用戶體驗(yàn)。與此同時，用戶對Web應(yīng)用的需求也不斷提高，這間接推動了Web技術(shù)的發(fā)展。
這是AJAX技術(shù)帶給前端的第一次新生。
2.第二次新生：Node.js
2009年第1版Node.js（只支持Linux和Mac0SX系統(tǒng)）的發(fā)布是值得銘記的里程碑。Node.js的作者Ryan Dahl設(shè)計Node.js的靈感來自Flickr（一個提供網(wǎng)絡(luò)圖片服務(wù)的平臺）上的一個上傳進(jìn)度條，瀏覽器為了能夠獲取上傳文件的進(jìn)度而不得不頻繁地向服務(wù)器發(fā)起查詢請求。與這種方式相比，如果服務(wù)器能夠在文件上傳完畢之后主動推送一條消息給瀏覽器的話，會節(jié)省很多瀏覽器和網(wǎng)絡(luò)資源消耗。這種理念便是Node.js實(shí)現(xiàn)異步操作的核心Event Loop（事件驅(qū)動）的雛形，如圖1所示。
圖1
2011年，Node.js發(fā)布了支持Windows系統(tǒng)的版本，Node.js在Web開發(fā)界進(jìn)一步流行起來。在此之前的十幾年內(nèi)，JavaScript直被認(rèn)為只能在瀏覽器里耍點(diǎn)小把戲。即便AJAX技術(shù)徹底改變了網(wǎng)站的交互模式，JavaScript也仍然未脫離瀏覽器這個“宿主”。Node.js帶來的改革不僅僅是讓JavaScript進(jìn)入了服務(wù)器端開發(fā)領(lǐng)域，更重要的意義是豐富了JavaScript的生態(tài)。JavaScript能做的事情越來越多，業(yè)內(nèi)泛起了JavaScript學(xué)習(xí)潮，這在一定程度上加速了ECMAScript規(guī)范的迭代。
這是Node.js帶給前端的第二次新生。
隨著用戶對Web應(yīng)用的期待越來越高，承載Web應(yīng)用的瀏覽器也“被迫”加速了發(fā)展，尤其是JavaScript引擎。在AJAX技術(shù)問世之前，JavaScript引擎只要能夠穩(wěn)定運(yùn)行幾十行JavaScript代碼即可，但是如今Web應(yīng)用的JavaScript代碼已經(jīng)遠(yuǎn)遠(yuǎn)超過這個量級，動輒幾百上千行。2008年，Google推出了全新的瀏覽器Chrome，搭載代號為V8的JavaScript引擎。V8引擎采用實(shí)時編譯（JIT）技術(shù)將JavaScript代碼編譯為機(jī)器碼執(zhí)行，大大提高了JavaScript代碼的運(yùn)行效率。Node.js便是使用V8引擎執(zhí)行JavaScript代碼的。
二、Node.js帶來的網(wǎng)站制作改革
Node.js并非一個JavaScript框架，而是一個集成了Google V8 JavaScript引擎、事件驅(qū)動和底層I/0API，并且可使用JavaScript語言開發(fā)服務(wù)器端應(yīng)用的運(yùn)行環(huán)境。與PHP不同的是，Node.js可以直接提供網(wǎng)絡(luò)服務(wù)，不需要借助Apache、Nginx等專業(yè)的服務(wù)器軟件。雖然并不建議在生產(chǎn)環(huán)境下直接將Node.js服務(wù)暴露給用戶，但是Node.js這種特性可以讓我們更方便地開發(fā)各種工具，比如將在后續(xù)章節(jié)中講解的前端工程化方案中本地服務(wù)器的搭建。
1.服務(wù)器端開發(fā)
Node.js作為服務(wù)器端平臺已經(jīng)逐步被國內(nèi)外公司和團(tuán)隊接納。2015年10月，著名的開源博客系統(tǒng)WordPress發(fā)布了使用Node.js重寫的4.3版本。許多企業(yè)（國內(nèi)的，比如阿里巴巴、美團(tuán)等；國外的，比如IBM、LinkedIn、GoDaddy等）對Node.js也均有不同程度的使用。雖然Node.js尚未威脅到PHP、Java等傳統(tǒng)Web服務(wù)器端語言的地位，但Node.js的事件驅(qū)動和異步I/0機(jī)制，以及其易學(xué)習(xí)、易部署和對前端網(wǎng)站制作天然的語言共通性，讓其成為實(shí)時應(yīng)用、微服務(wù)以及前端工程化等應(yīng)用場景的最佳技術(shù)選型之一。
2.同構(gòu)JavaScript
Node.js在使用JavaScript 語言開發(fā)Web服務(wù)器端平臺的同時，還提高了同構(gòu)JavaScript開發(fā)的可行性。
同構(gòu)（isomorphism）一詞是數(shù)學(xué)領(lǐng)域的專業(yè)術(shù)語，指的是數(shù)學(xué)對象之間屬性或者操作關(guān)系的一類映射。數(shù)學(xué)中研究同構(gòu)的主要目的是為了把數(shù)學(xué)知識應(yīng)用于更多不同的領(lǐng)域，同理，在JavaScript開發(fā)領(lǐng)域研究同構(gòu)的主要目的也是為了將這門編程語言應(yīng)用于不同的開發(fā)領(lǐng)域。同構(gòu)JavaScript的概念最早由Airbnb工程師Spike Brehm提出，簡單講就是令JavaScript編寫的代碼既可以在瀏覽器端工作，也可以在服務(wù)器端工作，如圖1所示。這意味著服務(wù)器端和瀏覽器端都可以承載網(wǎng)頁的渲染工作。
圖2
傳統(tǒng)網(wǎng)站的渲染流程是由瀏覽器主動發(fā)起請求，然后服務(wù)器端生成HIL文檔后發(fā)送響應(yīng)給瀏覽器，瀏覽器接到響應(yīng)后將HTL文檔渲染為可視網(wǎng)頁。這是自瀏覽器發(fā)明以來就沿用至今的渲染流程。這種工作模式的優(yōu)點(diǎn)是節(jié)省客戶端資源，在客戶終端設(shè)備以及瀏覽器性能普遍比較落后的情況下能夠保證良好的渲染效果，并且服務(wù)器端渲染的網(wǎng)頁更利于SEO（Search Engine Optimization，搜索引擎優(yōu)化）。而其缺點(diǎn)是每訪問一個頁面都要發(fā)起請求，每個請求都需要服務(wù)器進(jìn)行路由匹配、數(shù)據(jù)庫查詢、生成HTML文檔后再發(fā)送響應(yīng)給瀏覽器，這個過程會消耗服務(wù)器的大量計算資源，如圖3所示。
圖3
隨著個人終端設(shè)備和瀏覽器性能的不斷提升，Web開發(fā)者嘗試將渲染以及路由工作交給客戶端，服務(wù)器端RESTFulAPI只提供渲染HTML所需的JSON數(shù)據(jù)。這種形態(tài)的Web應(yīng)用被稱為SPA（Single Page Application,單頁應(yīng)用）。SPA有以下優(yōu)點(diǎn)。
·減輕了服務(wù)器的資源消耗。
·與HTL文檔比起來，JSON數(shù)據(jù)的體積小很多，減少了網(wǎng)絡(luò)請求的時間消耗。
·頁面路由控制更快速靈活。
·可以離線使用。
同時SPA也帶來了新問題。首先，瀏覽器需要等待JavaScript文件加載完成之后才可以渲染后續(xù)的HIML文檔內(nèi)容，用戶在等待的過程中頁面是空白的，這就是我們在進(jìn)行Web產(chǎn)品性能評估時經(jīng)常談到的“白屏?xí)r間”；其次，由于客戶端和服務(wù)器端編程語言不同，可能會存在一些諸如數(shù)據(jù)格式的差異，甚至路由邏輯沖突，比如vue-router history模式的路由，這些問題增加了維護(hù)難度；最后，SPA不利于常規(guī)的SEO（搜索引擎優(yōu)化）爬蟲（之所以說常規(guī)是因?yàn)镚oogle已經(jīng)針對SPA進(jìn)行了SEO優(yōu)化，但是目前國內(nèi)的搜索引擎對SPA的支持并不理想）。
與傳統(tǒng)的服務(wù)器端渲染模式和客戶端渲染的單頁應(yīng)用相比，同構(gòu)JavaScript擁有更好的性能、可維護(hù)性以及對SE0更好的支持。同構(gòu)JavaScript的理念類似于Java秉承的“Write once，run anywhere”，JavaScript除命名以外終于又跟Java扯上了關(guān)系。Node.js是實(shí)現(xiàn)同構(gòu)JavaScript開發(fā)的關(guān)鍵。一方面，JavaScript在瀏覽器環(huán)境下可以執(zhí)行渲染工作；另一方面，Node.js運(yùn)行環(huán)境下同樣可以使用JavaScript創(chuàng)建HTL字符串。在這個前提下，JavaScript開發(fā)生態(tài)中浮現(xiàn)了一大批支持同構(gòu)開發(fā)的框架和庫，比如Facebook推出的React.js和國內(nèi)的Vue.js。
3.前端工具
除了服務(wù)器端開發(fā)外，Node.js對前端最大的貢獻(xiàn)是豐富了前端工具生態(tài)。在Node.js出現(xiàn)以前，沒有Grunt、Gulp、webpack
等便捷且強(qiáng)大的工具，壓縮合并JavaScript、CSS代碼對于前端工程師來說是一項(xiàng)非常艱難的任務(wù)。前端工程師不得不使用不熟悉的語言、工具來處理靜態(tài)文件的壓縮合并。而這些工具往往并不是為了處理靜態(tài)文件的，比如ApacheAnt。使用Ant處理靜態(tài)文件可以說是殺雞用了牛刀，而且這把牛刀用來殺雞還并不好使。除此之外，也可以使用she11腳本完成這項(xiàng)工作，但對于并不擅長編寫she11腳本的前端工程師來說學(xué)習(xí)成本和時間成本太高，往往要麻煩團(tuán)隊中的服務(wù)器端工程師代寫。不論哪種選擇，都會對項(xiàng)目的開發(fā)進(jìn)度產(chǎn)生影響。
Node.js的出現(xiàn)徹底解決了這些問題。目前耳熟能詳?shù)那岸?strong>網(wǎng)站制作工具，比如Grunt、Gulp、webpack，無一不是由Node.js承載的。結(jié)合JavaScript的靈活性與Node.js提供的API，前端工程師可以編寫各種工具滿足項(xiàng)目的開發(fā)需求。
今天的網(wǎng)頁制作分享就到這了，如果您喜歡這篇文章，您可以分享給你的朋友！深圳網(wǎng)站建設(shè)-博納網(wǎng)絡(luò)編輯整理。
