使用非javascript替代方法開發Javascript網頁

我已經重新開發了一個網頁，其中所有的頁面佈局和搜索結果都是在服務器上以PHP生成的，然後在頁面完成時顯示在頁面上。這很慢。使用非javascript替代方法開發Javascript網頁

爲了提高性能和響應能力，新版本僅爲頁面加載頁眉/頁腳，然後在使用AJAX請求動態填充結果之前使用JavaScript創建剩餘佈局。

這樣做的不足之處在於，很顯然，如果沒有javascript支持，頁面無法正常加載。我試圖做的是找到一種方式，回落在佈局&結果如果未啓用javascript的舊的PHP代碼。

我試着將舊代碼到我的新的一頁，在非JavaScript的瀏覽器，它是罰款。然而，在JavaScript瀏覽器中，它會加載所有內容 - 使用新的JavaScript佈局&結果代碼和舊的PHP代碼。

因爲PHP代碼是在javascript代碼之前執行的，所以我無法看到以避免這種情況。我在這裏完全錯過了什麼嗎？

感謝您的任何指導。

來源

2012-02-15 T W

嘗試在非js代碼上使用<noscript></noscript>。

來源

2012-02-15 13:47:44 Den

沒有其他選擇。 Den建議的'noscript'標籤仍然會讓你不得不在PHP上生成顯示內容。

但是你實際上應該用PHP生成頁面。無論。 AJAX應該只處理頁面更新。由於每個AJAX請求都是服務器的另一個獨特請求，因此需要通過PHP引擎並加載所有配置和會話以及不需要的東西，從而不會讓網站變得更快。

因此，總結的東西了：

A）生成廣大PHP的網站，並把它推到客戶端

B）與Ajax和JavaScript，更新適當。

只要您的API或框架足夠智能，開發就如同一樣簡單。

但是，如果您像Facebook一樣喜歡使用JavaScript加載大部分內容，那麼對於不使用JavaScript的用戶來說，您真的沒有其他選擇。

來源

2012-02-15 13:54:43 kingmaple

我懷疑這個頁面很慢，不是因爲PHP，而是因爲頁面的實現方式以及是否遵循了設計模式。

來源

2012-02-15 14:08:55 user1207047

我在想同一 – ArcDare 2012-02-15 14:10:48

頁面原本很慢，因爲我不得不等待一些遠程第三方系統的請求。我希望頁面加載時無需等待這些結果，然後在返回時添加結果。 – 2012-02-15 14:16:26

好的，我明白了。因此，該頁面正在等待可能需要一段時間的資源。數據從第三方系統改變的頻率如何？像每個頁面加載一樣，第三方系統是加載唯一信息還是數據相同？我建議，因爲你的一些用戶可能沒有啓用js，那麼明智的解決方案是在服務器端使用緩存。像memcache之類的東西可以產生很大的差異，如果新數據可能來自第三方來源，則可以經常刷新數據。 – user1207047 2012-02-15 14:23:22

你想要做的是什麼叫progressive enhancement。

此圖片是從我發佈的鏈接：

enter image description here

概括地說，這是什麼說明的是，你的網站應該沒有CSS或JavaScript達到基本的最小功能。換句話說，如果你有一些網站，你應該看起來像這樣：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Basic HTML</title> 
    </head> 
    <body> 
    <h1>Introduction to semantic HTML</h1> 
    <p>You use H tags for headings, search engines like that. 
    Paragraph tags for paragraphs</p> 
    <a href="http://example.com/">Hyperlinks make sense</a> 
    <div> 
     <p>Divs can be used to create seperate areas for content</p> 
    </div> 
    </body> 
</html>

這是什麼樣的？

在現代的網絡瀏覽器：

enter image description here

在命令行的瀏覽器有很多人使用：

enter image description here

CSS和JavaScript應該加強這基本功能，不需要它。

當我轉到您的網站，並要求http://example.com/Foo我應該看到

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Foo page</title> 
    <script>/*Whatever script that does your ajaxy stuff*/</script> 
    </head> 
    <body> 
    <h1>Foo page</h1> 
    <p>Foo content</p> 
    <a href="http://example.com/bar">Click here to goto bar.</a> 
    <div> 
     <p>Divs can be used to create seperate areas for content</p> 
    </div> 
    </body> 
</html>

我不應該看到的是：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Foo page</title> 
    <script>/*Whatever script that does your ajaxy stuff*/</script> 
    <script>/*Script to Load in the main content for the body*/</script> 
    </head> 
    <body> 
    <noscript> 
     <p>Sorry, for some reason I decided you need 
     javascript and a modern desktop browser to see 
     the basic line of text you wanted.</p> 
    </noscript> 
    </body> 
</html>

因此，而不是讓你的網頁基礎上的URL加載內容在瀏覽器中的頁面，您應該從服務器端提供頁面，這樣當您請求/ foo時，您將獲得所有foo HTML。然後，當它加載時，通過使特定的導航鏈接加載主體內容來編寫將通過逐步增強頁面的JavaScript。這樣當JS被禁用時，它可以工作，並且當JS被啓用時，你的內容加載速度更快。

從可用性的角度來看最後一點。

如果你要做到這一點ajaxy東西，請請確保您要確保捕獲所有HTTP錯誤代碼和做正確的事一樣提醒使用者錯誤加載頁面，並顯示加載圖形。 Ajaxy網站嘗試和加載內容時，我有一個緩慢的網絡，並沒有告訴我有關加載內容或發生的錯誤，讓我掛出去幹，讓我一個非常生氣的用戶，只是離開你的網站，永遠不會回來。

來源

2012-02-15 14:19:22 Incognito

謝謝你。我現在要回到我的設計，並再次看看它。我認爲基於我的頁面做什麼以及它如何請求數據，我將不得不在早期提交表單數據期間分離非JavaScript用戶，以便他們使用我的舊頁面佈局/ php和javascript查看結果使人們看到我的新格式的PHP和JavaScript版本。 – 2012-02-15 14:57:47

@TW這是思維上的轉變，但你很快就會發現這種方式更好。 – Incognito 2012-02-15 15:02:07

我同意我不希望用戶遇到不工作的頁面，或者只是顯示一條消息，告訴他們因爲沒有啓用javascript，他們無法使用該頁面。我寧願爲他們提供更基本的選擇。 – 2012-02-15 15:04:42

使用非javascript替代方法開發Javascript網頁

回答

相關問題