為什么 Web 前端開發(fā)不拋棄 HTML 和 CSS，用純 JavaScript 開發(fā)？

時(shí)間：2023-11-25 07:36:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-11-25 07:36:02 來源：網(wǎng)站運(yùn)營

為什么 Web 前端開發(fā)不拋棄 HTML 和 CSS，用純 JavaScript 開發(fā)？：瀉藥。

首先要確定，即使拋開游戲不論，一般的Web應(yīng)用或者網(wǎng)站，完全用JavaScript開發(fā)也是可行的。比如ExtJS、webOS的Enyo等。但是主流Web開發(fā)很少采用全JS的方案。原因大體有以下幾點(diǎn)：


1. 注重考慮那些無法運(yùn)行JS的用戶代理。

用戶使用不支持JS的瀏覽器（比如較老的手機(jī)瀏覽器），或者禁用腳本。當(dāng)然你可以選擇忽略這一小撮用戶，尤其是現(xiàn)在絕大多數(shù)網(wǎng)站和應(yīng)用也是如此選擇的，但是至少我們應(yīng)該對堅(jiān)持考慮無JS情況的開發(fā)者予以基本的尊重。此外，如 Mobile Transcoder或某些手機(jī)瀏覽器的“極速模式”是基于服務(wù)器端對網(wǎng)頁的解析和重組，是否能支持JS很夠嗆。

更重要的因素是SEO friendly。如果是全JS生成的網(wǎng)頁，搜索引擎無法索引內(nèi)容。這一點(diǎn)對于許多網(wǎng)站是性命攸關(guān)的。

注意，有人提到screen reader。但絕大多數(shù)讀屏軟件是根據(jù)DOM來的，因此全部由JS生成DOM也不會(huì)有問題。然而這前提是JS所生成的DOM是符合accessibility要求的。


2. 注重HTML/CSS本身的優(yōu)點(diǎn)。

誠然JS本身也可以通過精心設(shè)計(jì)的框架和庫來實(shí)現(xiàn)分離等所有HTML/CSS模型的優(yōu)點(diǎn)。但是存在許多不確定因素：

1) 有足夠好的框架和庫嗎？

要考慮是否能滿足你的業(yè)務(wù)需求，還可能要考慮性能、可擴(kuò)展性、之前提到的accessibility、學(xué)習(xí)曲線、工具鏈，乃至此框架和庫的長久的生存（有人維護(hù)，修bug、加新功能比如對HTML5新API的支持之類的）。關(guān)鍵是，理論上說JavaScript具有更高的彈性，但是更大的自由度未必能得到更好的

2) 框架和庫給出的抽象模型和HTML/CSS模型的阻抗是否匹配？

假如該框架或庫本質(zhì)上仍然使用HTML/CSS模型，只是改變了語法（比如從markup改為json），那么其提供的好處在哪里？僅僅是語法統(tǒng)一？

如果該框架或庫有自己獨(dú)立的抽象層，比如widget/component等，那么它是建筑在HTML/CSS之上的額外抽象層（即最終映射到HTML/CSS），還是僅僅以HTML/CSS為純粹實(shí)現(xiàn)工具？對于前者，實(shí)際上最終會(huì)回歸HTML/CSS模型。而后者，可以參考的經(jīng)驗(yàn)教訓(xùn)就是http://ASP.NET WebForm和JSF。

3) 框架和庫所設(shè)定的約束能否在開發(fā)中一以貫之的執(zhí)行？

無論是理論或者現(xiàn)實(shí)，HTML/CSS模型都算不上完美。但是至少是清晰和較容易被一致的執(zhí)行的。但是單一語言即使提供分層機(jī)制，也容易被繞過——尤其是框架和庫本身不夠好的情況下，可能由于不能滿足需求、有bug等情況而傾向于hack之，更不要說deadline緊迫時(shí)。


3. 注重性能。

須知，最終Web應(yīng)用、頁面是在瀏覽器中執(zhí)行，而瀏覽器完全是按照HTML/CSS所設(shè)計(jì)。拋開Canvas不論，純JS的實(shí)現(xiàn)最終還是要生成DOM。從性能的角度看，純JS生成DOM自然趕不上直接的markup。同樣的道理，就算用CSS預(yù)處理器也都會(huì)在部署時(shí)預(yù)先編譯——盡管在運(yùn)行時(shí)可以做出更牛逼的特性（然而實(shí)際上目前我不知道有任何CSS預(yù)處理器干了這樣的事情——因?yàn)樗鼈兌际前凑疹A(yù)編譯的場景設(shè)計(jì)的），再如HTML/CSS是按照漸進(jìn)顯示優(yōu)化的（頁面不用全下載完就可以看部分），而純JS的架構(gòu)沒有精心設(shè)計(jì)是很難做到的（比如json數(shù)據(jù)全部下載完你才能parse，數(shù)據(jù)才可用，DOM才能生成）。

［補(bǔ)充：盡管LESS是可以在運(yùn)行時(shí)執(zhí)行的，但是從性能的角度出發(fā)是不合適的，因?yàn)镃SS通常必須在頁面rendering之前就全部就位。而運(yùn)行時(shí)產(chǎn)生CSS，就要求在頁面rending之前至少要先下載執(zhí)行LESS的腳本，然后解析編譯你的.less源代碼。這個(gè)性能開銷至少目前還不容忽視。］

［補(bǔ)充：性能優(yōu)化的另一點(diǎn)是基于HTML/CSS的聲明性特點(diǎn)，即只表明high-level的目標(biāo)，瀏覽器才能獲得更大的優(yōu)化自由度。比如CSS transition/animation，與JavaScript通過修改style達(dá)到效果比，前者性能表現(xiàn)要好得多。］


4. 注重Web開發(fā)的獨(dú)特特點(diǎn)。

1) HTML/CSS 都是聲明式的，也就是其本身并不希望是程序員來編程。當(dāng)然，一個(gè)編程語言能干所有的事情，但是即使考慮編程本身，為什么在通用編程語言之外還要有SQL、還有以各種語法寫的配置文件？

2) HTML/CSS是基于標(biāo)準(zhǔn)的。這與http://ASP.NET WebForm、JSF、Flash/Flex等私有技術(shù)或一個(gè)語言和平臺下的標(biāo)準(zhǔn)有天壤之別。具體就不展開了。

3) Web開發(fā)和一般應(yīng)用開發(fā)有個(gè)重大區(qū)別是，Web應(yīng)用、網(wǎng)頁的最終表現(xiàn)和行為，或者說Web的用戶體驗(yàn)，并不是完全由開發(fā)者決定的，而是開發(fā)者和用戶共同決定的。用戶選擇不同的設(shè)備、不同的瀏覽器、不同的瀏覽器設(shè)置、不同的瀏覽器擴(kuò)展等，都能影響結(jié)果。這是缺點(diǎn)，也是優(yōu)點(diǎn)?？茨闳绾误w會(huì)了。這里具體不展開。只是一點(diǎn)，純JavaScript開發(fā)通常表示你想更多的控制用戶體驗(yàn)，但這并非簡單的多寫代碼就能做到。

［補(bǔ)充：舉個(gè)例子，表單控件上的autofocus屬性，乍一看腳本也可以做嘛。但是其實(shí)腳本要做對很難！比如頁面已然加載一半，用戶開始在某個(gè)輸入框里輸入了，但是后續(xù)載入的控件要求focus，如果是腳本實(shí)現(xiàn)，通常就武斷的調(diào)用focus()，打斷了用戶輸入（特別是東亞用戶使用輸入法時(shí)被打斷很是受傷）。而HTML本身所定義的屬性，是由瀏覽器實(shí)現(xiàn)，則可以做恰當(dāng)?shù)奶幚怼Ｌ貏e注意的是，從老瀏覽器到新瀏覽器的升級，你自然就獲得了用戶體驗(yàn)的提升。另一方面，用戶可以主動(dòng)選擇他想用的瀏覽器，來主動(dòng)升級他自己的用戶體驗(yàn)。這樣的例子還有許多許多，不勝枚舉。］

以上。