div中加载html页面,如何使用JavaScript在<div>中加载HTML页面？

Sam Redway..

18

我看到了这个,觉得它看起来很不错所以我对它进行了一些测试.

这似乎是一种干净的方法,但就性能而言,与使用jQuery加载函数加载页面或使用XMLHttpRequest的大致相似的vanilla javascript方法所花费的时间相比,它滞后了50%.

我想这是因为它在引擎盖下以完全相同的方式获取页面,但它也必须处理构建一个全新的HTMLElement对象.

总之,我建议使用jQuery.语法尽可能简单易用,并且具有结构良好的回调供您使用.它也相对较快.vanilla方法可能会在几毫秒内变得更快,但语法却令人困惑.我只会在我无法访问jQuery的环境中使用它.

这是我用来测试的代码 - 它相当简陋,但是在多次尝试中时间回来非常一致所以我会说精确到大约+ - 5ms.测试是从我自己的家庭服务器在Chrome中运行的:

/**

* Test harness to find out the best method for dynamically loading a

* html page into your app.

*/

var test_times = {};

var test_page = 'testpage.htm';

var content_div = document.getElementById('content');

// TEST 1 = use jQuery to load in testpage.htm and time it.

/*

function test_()

{

var start = new Date().getTime();

$(content_div).load(test_page, function()