不久前我建立了一个 jquery 移动网站,我最近一直在扩展它并注意到性能问题。我相信这是因为我使用多页面设置构建了该站点,其中单个 php 文件包含以下页面:
ALL_PAGES.PHP
<html>
<head>
/* external css and js files */
</head>
<body>
<div date-role="page" id="main">
<div class="page_link">
page 1
</div>
<div class="page_link">
page 2
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 1">
<div class="page_link">
main
</div>
<div class="page_link">
page 2
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 2">
<div class="page_link">
main
</div>
<div class="page_link">
page 1
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 3">
<div class="page_link">
main
</div>
<div class="page_link">
page 1
</div>
<div class="page_link">
page 2
</div>
</div>
</body>
</html>
我想摆脱在一个 php 文件上的这种多页设置,并转移到每个页面都是一个单独的 php 文件的设置。为了做到这一点,我从每个页面中获取 html 并将其移动到自己的 php 页面。然后我添加了 href 链接来替换我用于“page_link”类的 mobile.change() 函数。
主.PHP
<html>
<head>
external css and js files
</head>
<body>
<div date-role="page" id="page 1">
<a href="/main.php">
main
</a>
<a href="/page_2.php">
page 2
</a>
<a href="/page_3.php">
page 3
</a>
</div>
</body>
</html>
PAGE_1.PHP
<div date-role="page" id="page 1">
<a href="/main.php">
main
</a>
<a href="/page_2.php">
page 2
</a>
<a href="/page_3.php">
page 3
</a>
</div>
PAGE_2.PHP
<div date-role="page" id="page 2">
<a href="/main.php">
main
</a>
<a href="/page_1.php">
page 1
</a>
<a href="/page_3.php">
page 3
</a>
</div>
PAGE_3.PHP
<div date-role="page" id="page 3">
<a href="/main.php">
main
</a>
<a href="/page_1.php">
page 1
</a>
<a href="/page_2.php">
page 2
</a>
</div>
该站点工作正常,除非用户点击浏览器中的刷新按钮。发生这种情况时,每个页面都无法访问位于主页上的任何外部 css 和 js 文件。我对 JQM 相当陌生,所以任何建议都会有所帮助。