使用非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网页

回答

相关问题