gpt4 book ai didi

php - 使用非 JavaScript 替代方案开发 Javascript 网页

转载 作者:行者123 更新时间:2023-12-03 19:04:10 29 4
gpt4 key购买 nike

我重新开发了一个网页,之前所有的页面布局和搜索结果都是在服务器上用 PHP 生成的,然后在完成后显示在页面上。这很慢。

为了提高性能和响应速度,新版本仅为页面加载页眉/页脚,然后在使用 AJAX 请求动态填充结果之前使用 javascript 创建剩余的布局。

这样做的缺点是,如果没有 javascript 支持,页面显然无法正确加载。我想做的是找到一种方法,在未启用 javascript 的情况下使用旧的 PHP 代码进行布局和结果。

我已经尝试将旧代码添加到我的新页面中,并且在非 JavaScript 浏览器中没问题。然而,在 javascript 浏览器中,它加载所有内容两次 - 使用新的 javascript 布局和结果代码以及旧的 php 代码。

因为 PHP 代码在 javascript 代码之前执行,所以无论如何我都看不到以避免这种情况。我在这里完全遗漏了什么吗?

感谢您的指导。

最佳答案

你想要做的是一个叫做 progressive enhancement 的东西.

这张图片来 self 发布的链接:

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 被启用时,您的内容加载速度更快。

从可用性的 Angular 来看最后一点。

如果您要执行此 Ajaxy 操作,请确保捕获所有 HTTP 错误代码并做正确的事情,例如提醒用户加载页面时出错,以及显示加载图形。 Ajaxy 网站在我的网络速度较慢时尝试加载内容,但不向我显示与加载内容相关的任何内容或发生的错误,让我无所适从,这让我成为一个非常生气的用户,他们离开了你的网站,再也没有回来.

关于php - 使用非 JavaScript 替代方案开发 Javascript 网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9294493/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com