Question

以下是一个场景：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 ......）

Answer 1

是的，除非你改变链接，否则点击一个加载内部HMTL的javascript。这叫做Ajax。

Answer 2

我肯定会加载整个页面......一个href请求基本上重新加载整个页面..你仍然可以使用Asynchronous javascript和xml加载部分页面...... AJAX：）

Answer 3

它会尝试重新加载页面。

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

Answer 4

@Rodrigogq总结了很多。

我建议使用 jQuery 替换文字。

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

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

Answer 5

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

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

Answer 6

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

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

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