05
2019
03

$.getJSON 和 $.ajax 读取json文件速度的小测试

在网上看到一篇文章,关于读取json文件速度的,地址如下:

https://blog.csdn.net/wang756990866/article/details/80611288

文章中提到$.ajax比$.getJSON方式要快很多,我做了一个测试

【测试环境】

    win7,ie+phpstudy,chrome

【测试步骤】

1.使用php生成10000条json数据,在浏览器中运行,并复制粘贴到test1.json文件中,代码如下:

for($i=1;$i<=10000;$i++){
	echo('"data'.$i.'":<br>');
	echo('{<br>');
	echo('"name": "0",<br>');
        echo('"sex": "success",<br>');
        echo('"email": "hi"<br>');
	echo('},<br>');
}

注意删除最后一个逗号,首尾再加上一对“{}”

2.新建test1.html文件,代码如下:

html部分:

<div id="f3"></div>

js部分:

$.getJSON ("json/test1.json", function (data)  
{  
	console.log(data);
	.each (data, function (i, item)  
	{  
		$ ("#f3").append ("<h3>" + item.name + "</h3>");  
		$ ("#f3").append ("<p>" + item.sex + "</p>");  
		$ ("#f3").append ("<p>" + item.email + "</p>");  
	});  
});

3.新建test2.html文件,代码如下:

html部分:

<div id="f3"></div>

js部分:

var stat_time;  
$.ajax({  
    url : "json/test1.json",  
    datatype: "json",        
    async : false,  
    data :{},  
    success : function(result) {  
        stat_time=result;  
		$.each (result, function (i, item)  
		{  
			$ ("#f3").append ("<h3>" + item.name + "</h3>");  
			$ ("#f3").append ("<p>" + item.sex + "</p>");  
			$ ("#f3").append ("<p>" + item.email + "</p>");  
		});  
    }  
 });

【测试结果】

test1.html加载用时116ms

jsontest1.JPG

test2.html加载用时1.85s

jsontest2.JPG


和篇首提到的文章的结果截然不同。

打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。