如果寫一個靜態HTML頁面，直接寫HTML代碼和用JS動態生成代碼，哪種方式要好點？為什麼？

---

可能我把題主的問題想得太複雜了，因為原問題幾乎沒有回答的意義。靜態的頁面肯定是直接 HTML 比用 js 生成快。

要用到 js，那肯定是因為有動態的內容需求，需要基於數據來渲染 HTML，那麼這個問題就可以引申到 服務端渲染 vs. 客戶端渲染。

首先，單純從首屏渲染速度來說，幾乎一定是服務端渲染更快。原因如下：

1. 假設內容相同，兩者解析 HTML 並渲染的速度是一樣的，不同的是客戶端渲染需要先請求並載入 js，然後執行 js，請求 API 數據，最後才能進入解析和渲染的步驟。
2. 服務端的渲染可以用比 js 效率更高的語言執行，伺服器的性能配置也通常勝過用戶的機器配置。

但是，服務端渲染由於計算量主要集中在服務端，那麼在用戶請求量很大的情況下系統負載會比客戶端渲染的方案高一些。如果因此導致伺服器響應變慢，那麼用戶體驗也會下降。

客戶端渲染存在的主要理由是單頁應用，在首屏渲染之後，還可能需要動態地創建很多 HTML，這時候刷新整個頁面效率很低，通過在前端預先載入模板，之後請求變更的數據並在前端渲染的方式，可以很好地提升用戶體驗。另外這樣的方案很自然地使得後端變為純數據 API，前後解耦，開發維護上有一定好處。

兩者之間的選擇主要取決於首屏載入速度對你的應用有多重要。對於單頁富應用而言，主要的體驗集中在首屏載入完畢以後的交互上（比如 gmail，載入很慢，但之後交互就很流暢），相比之下，內容類的網站，首屏載入速度則是個決定性因素。

現在也有越來越多的採用前後結合的方式，即服務端渲染首屏，之後由 js 接管，接下來的更新進行局部的前端渲染。當然，實現起來比較麻煩一點，所以很多這樣的方案是基於 Node.js 實現的，前後端可以共用模板和渲染邏輯。

---

假如用戶禁用了JavaScript......

**************************************************************************************************

之前看過《DOM編程藝術》。作者老在強調：「提防那些禁用JavaScript的傢伙」。

這裡「禁用JavaScript的傢伙」，一是指那些使用了瀏覽器中「禁用JavaScript」功能的用戶，二則是指「搜索引擎」。

那些使用js動態生成的內容，搜索引擎是搜不到的。

我想：「自己的網站隱形了」這個結果應該和一般的網站運營者的意願相去甚遠。

---

推薦閱讀：