单击链接是否总是会导致整页重新呈现？答案

【问题标题】：Does clicking a link always cause a full-page re-rendering?单击链接是否总是会导致整页重新呈现？
【发布时间】：2014-12-16 22:19:44
【问题描述】：

这是一个场景：Page1.html 和 page2.html 是相同的，除了一个单词的变化。

page1.html

 <html><head></head><body>
 Lorem ipsum *one*
 ...Stuff here...
 <a href="page2.html">click me</a>
 ...Stuff here...
 </body></html>

page2.html

 <html><head></head><body>
 Lorem ipsum *two*
 ...Stuff here...
 <a href="page1.html">click me</a>
 ...Stuff here...
 </body></html>

如您所见，除了page2.html 中的*one* 与*two* 交换之外，两个页面中的所有内容都相同

现在，假设访问者访问了page1.html，并点击了a href 链接，浏览器会重新渲染整个 DOM 还是简单地检测到更改的单词并对其进行修改？

这显然是特定于实现的，我感兴趣的是主流浏览器（Chrome、Firefox、Opera、Safari、IE...）的答案

【问题讨论】：

整个页面将被重新加载
Ajax 是一种流行的选择，可以进行有针对性的更改，同时避免全面重新加载
假设不涉及 JS 代码，那么是的，单击链接会使浏览器“离开”当前页面，并加载链接所针对的任何页面。
要知道只有页面的一部分发生了变化，需要客户端完整地检索它......所以不妨完全渲染它。
在我看来，这听起来像是一个相当简单的浏览器优化（“只要正在下载的 html 页面中的字节与用户当前看到的 html 页面中的字节匹配，不要重新渲染那部分”），你们确定没有浏览器这样做吗？这是为什么呢？

【解决方案1】：

是的，除非您将链接点击更改为动态加载内部 HMTL 的 javascript。这称为 Ajax。

【讨论】：

【解决方案2】：

我肯定会加载整个页面...A href 请求基本上会重新加载整个页面..您仍然可以使用异步 javascript 和 xml 加载页面的一部分...AJAX :)

【讨论】：

【解决方案3】：

它将尝试重新加载页面。

如果您想停止重新加载页面的默认操作，您可以使用event.preventDefault();。

【讨论】：

【解决方案4】：

@Rodrigogq 总结得差不多。

我建议使用 jQuery 替换文本。

$('body').text(function () { return $(this).text().replace("one", "two"); });

这不会使用 ajax 而只是替换。可以修改为按键按下。

【讨论】：

【解决方案5】：

如果 URL 被更改，浏览器会从新地址加载数据并需要再次呈现它——无论浏览器的实现如何。 HTML 文档之间的差异不早于将新文档加载到 ant 解析到 DOM 时可见，这意味着它会被渲染而不是发现差异（这将是一项不平凡的任务）。

如果您只想更改特定元素的内容，您需要使用 Javascript 并设置静态值或通过 AJAX 加载。

【讨论】：

【解决方案6】：

回答： “只要正在下载的 html 页面中的字节与用户当前看到的 html 页面中的字节匹配，就不要重新渲染该部分”

» 这是在大多数浏览器中的样子：第一步：点击链接第 2 步：从目标服务器获取头部响应（如果包含内容长度则很好）第 3 步：如果响应是可渲染的（通常为 200），则开始卸载已加载的 DOM。第 4 步：加载新内容并渲染。

这禁止与当前请求和新请求进行任何字节级别的比较以识别差异。

【讨论】：