在服務器端或客戶端建立網頁？

我一直想知道如何選擇使用服務器端代碼還是客戶端代碼來構建HTML頁面。我將使用一個非常簡單的PHP vs javascript/jquery示例來進一步解釋我的問題。非常感謝您的建議和意見。在服務器端或客戶端建立網頁？

假設我即將向用戶展示一個網頁，以在我的網頁中選擇一種報告類型。哪個更有意義？

對於服務器端的創作，我應該這樣做：

<div id="reportChoices"> 

<?php 
// filename: reportScreen.php 
// just for the sake of simplicity, say a database returns the following rows 
// that indicates the type of reports that are available: 

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"), 
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"), 
); 

foreach ($results AS $data) 
    echo "<input type='radio' name='reportType' value='{$data['htmlID']}'/>{$data['htmlLabel']}"; 
?> 

</div>

使用客戶端的代碼，我得到的JavaScript構建的頁面類似如下：

<!-- filename: reportScreen.html --> 
<div id="reportChoices"> 
</div> 

<!-- I could put this in the document.ready handler, of course --> 
<script type="text/javascript"> 
$.getJSON("rt.php", {}, function(data) { 
var mainDiv = $("#reportChoices"); 
$.each(data, function(idx, jsonData) { 
    var newInput = $(document.createElement('input')); 

    newInput 
    .attr("type", "radio") 
    .attr("name", "reportType") 
    .attr("value", jsonData["htmlID"]) 

    mainDiv.append(newInput).append(jsonData["htmlLabel"]); 
}); 
}; 
</script>

所有我需要在服務器上的數據轉儲PHP腳本，例如：

<?php 
// filename: rt.php 
// again, let's assume something like this was returned from the db regarding available report types 

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"), 
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"), 
); 

echo json_encode($results); 
?>

這是一個非常簡單的例子，但回回在這裏，我看到了不同領域的優點和缺點。

1 - 服務器端解決方案的優點是能夠隱藏大部分實際編程邏輯背後的所有內容。當用戶查看頁面源代碼時，他們看到的只是已經建好的網頁。換句話說，客戶端解決方案將您所有的源代碼和編程邏輯放在瞭如何構建特定的東西上。但是你可以使用縮小器來讓你的源看起來更加神祕。

2 - 客戶端解決方案將「資源負載」轉移到客戶端系統上（即瀏覽器需要使用客戶端的計算機資源來構建大部分頁面），而服務器端解決方案則陷入困境，服務器。

3 - 當涉及到可維護性和可讀性時，客戶端解決方案可能更優雅。但是，再次，我可以使用PHP庫來模塊化HTML控件，並使其更具可讀性。

有何評論？提前致謝。

來源

2010-12-01 JoJoeDad

Con（客戶端解決方案）：客戶端解決方案依賴客戶端正確執行代碼。由於您無法控制客戶端系統將執行您的代碼，因此要確保它始終如一地提供與服務器端解決方案相同的結果更加困難。

這個特殊問題似乎並不是需要一個客戶端解決方案，是嗎？我會堅持使用服務器端解決方案。唯一額外的工作是foreach循環與一個echo，這不是真的如此重要的資源（除非你已經剖析它，並知道它是）？所產生的代碼都在一個地方，更簡單。

來源

2010-12-01 18:28:10 FrustratedWithFormsDesigner

通常，最好不要依賴於客戶端上啓用的Javascript。另外，大多數搜索引擎都不會抓取您的網頁。您還公開有關您的服務器/服務器端代碼的信息（除非您明確將其抽象出來）。

如果您想將數據轉換爲視圖，您可能需要查看XSLT。如果你還沒有閱讀的另一件事是逐步增強。

http://alistapart.com/articles/understandingprogressiveenhancement/

在你提出的第一個客戶端解決方案，它實際上是效率較低，因爲有一個額外的HTTP請求。而第二個也可能效率不高，因爲所有數據都必須用json_encode進行處理。然而，如果你正在做的是一個豐富的web應用程序，取決於在Javascript上，我看到沒有問題，如果你想用Javascript做任何事情。

來源

2010-12-01 18:29:08 Jonah

實際上，Google正在爲JS內容編制索引方面邁出了重要的一步。例如，請參閱http://googlewebmastercentral.blogspot.com/2007/11/spiders-view-of-web-20.html – nico 2010-12-01 18:53:27

我懷疑將報表生成移動到客戶端真的會節省任何資源 - 記住它仍然在向您的（？）服務器發送HTTP請求，因此數據庫處理仍然完成。另外，在客戶端提供數據庫模式可能是數據庫攻擊的祕訣。

也許你應該使用模型 - 視圖 - 控制器模式來分離服務器上的演示文稿的業務邏輯？至少這將所有的代碼保留在一個地方，但仍然可以讓你在邏輯上分離組件。如果這聽起來對你有用，請看看Zend Framework之類的東西。

來源

2010-12-01 18:29:58

通過在客戶端構建問題，您可以保持更好的問題分離，但如果需要加載很多內容（再加上您必須考慮FrustratedWithForms提到的內容），則可能會以犧牲用戶體驗爲代價。對我來說，在服務器端更容易構建它，這意味着如果您處於嚴格的時間線上，而是根據您的技能組合來決定，那麼這將成爲更理想的選擇。

來源

2010-12-01 18:30:11 N0Alias

在服務器端或客戶端建立網頁？

回答

相關問題