开发者

Avoiding extra page loads when using #! AJAX navigation

开发者 https://www.devze.com 2023-03-30 23:17 出处:网络
I\'m writing a web site which is basically a succession of sequential pages. The unqualified URL points to the last page, and qualified URLs point to specific pages. So we have:

I'm writing a web site which is basically a succession of sequential pages. The unqualified URL points to the last page, and qualified URLs point to specific pages. So we have:

  • http://example.com/ -> last page
  • http://example.com/3 -> page 3

I have the following requirements:

  • I want pages to be dynamically loaded by AJAX. Users may sequentially browse lots of successive pages in a quick time, and I want to avoid reloads and redraws (and add some kind of JavaScript prefetching of adjacent pages to speed up navigation)
  • I want the pages to be bookmarkable
  • I want the pages to be crawlable
  • I want it to work for most users.

So, I came up with the following scheme:

  • The standard, canonical URL for the archive pages is http://example.com/3. Pages accessed via this URL are fully readable, whether JavaScript is installed or not. If JavaScript is not available, links to other pages are normal links, and everything works in the good old-fashioned way. This also works for crawlers.
  • If a browser where JavaScript, and History manipulation (pushState and replaceState) are available visits such and URL, content is dynamically updated using AJAX when links to other pages are visited. The browser history is then updated by JavaScript.
  • If a browser where JavaScript is available, but history manipulation is not available, visits the site, the user is redirected, using JavaScript, to http://example.com/#!3 when visiting http://example.com/3 . No redirection occurs when visiting the main page http://example.com . Navigation is then done using hash change events.
  • If a crawler tries to visit, through an external link, http://example.com/#!3, it will actually request http://example.com/?_escaped_fragment_=3 (1). For such URLs, the webserver will issue a permanent redirect to http://example.com/3, which will be then correctly crawled.

Everything looks fine in here, but then, let's look at all possible cases:


1. No JavaScript browser

1.1. No JavaScript browser visits root URL

Works as expected.

1.2. No JavaScript browser visits canonical URL

Works as expected.

1.3. No JavaScript browser visits shebang URL

( http://example.com/#!3 )

Silently fails! The user gets the last page instead of page 3.

2. Crawler

2.1. Crawler visits root URL

开发者_C百科

Works as expected.

2.2. Crawler visits canonical URL

Works as expected.

2.3. Crawler visits shebang URL

http://example.com/#!3

The crawler actually requests http://example.com/?_escaped_fragment_=3, and is issued a redirect to the canonical URL. This is one additional request for the web server, but this is no big deal (no extra page is fetched from the database and returned to the user).

3. Old browser

3.1. Old browser visits root URL

Links to other pages are replaced by their shebang versions. Navigation then is done smoothly by AJAX.

3.2. Old browser visits canonical URL

The user is issued a redirect to the shebang URL. Problem: the server will actually fetch and serve the page 3 times!

  1. http://example.com/3 <- served fully by the server
  2. JavaScript issues a redirect to http://example.com/#!3
  3. The server only sees http://example.com/, and serves the last page
  4. JSON is used to fetch (again) page 3 and replace the content on the page.

3.3. Old browser visits shebang URL

No redirect is necessary, but there is an extra load for the last page!

  1. The user goes to http://example.com/#!3
  2. The server only sees http://example.com/, and serves the last page
  3. JSON is used to fetch page 3 and replace the content on the page.

4. Modern browser

4.1. Modern browser visits root URL

4.2. Modern browser visits canonical URL

No problem with those 2 cases. Navigation is done by AJAX, canonical URLs are pushed to the history.

4.3. Modern browser visits shebang URL

The URL is modified to the canonical URL. The content is loaded by AJAX. The problem, as before, is that is causes an extra load, from the server, for the last page.


So, to sum it up:

  • This solution would basically work
  • But when shebang URLs are used, it will, in most case, cause an unnecessary load of the last page, because the server will never know whether it needs to server the last page, OR whether this is actually part of a shebang request.

My question is: does somebody have a good idea on how to avoid those extra page loads? Is there any good practice to solve such a problem?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号