JS测试CND js文件加载速度

朴灿烈づ我的快乐病毒、 2022-08-31 16:18 190阅读 0赞

![20210726175722718.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE5NTQyMg_size_16_color_FFFFFF_t_70][]

实际文件大小也会有些差异 统一使用的是jquery 3.1.0 未压缩版本

这段代码执行的结果和chrome的控制台 基本差在10ms以内

方便测试本地网络 以及方便修改逻辑 批量测试 压力测试

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>
    			js CDN test
    		</title>
    		<style type="text/css">
    			body{font-family:"黑体";font-size: 20px;background:skyblue;}
    		</style>
    	</head>
    	<body>
    		加载测试文件为JQuery 3.1.0 未压缩版本<br>
    		实际文件大小或不同
    		<table id="speedTestTable">
    		</table>
    	</body>
    	<script type="text/javascript" defer>
    		var cdnUrlMap = new Map();
    		cdnUrlMap.set("新浪", "http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.js");
    		cdnUrlMap.set("字节跳动", "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.1.0/jquery.js");
    		cdnUrlMap.set("staticfile Https", "https://cdn.staticfile.org/jquery/3.1.0/jquery.js");
    		cdnUrlMap.set("staticfile Http", "http://cdn.staticfile.org/jquery/3.1.0/jquery.js");
    		cdnUrlMap.set("bootcdn", "https://cdn.bootcdn.net/ajax/libs/jquery/3.1.0/jquery.js");
    		cdnUrlMap.set("jsdelivr", "https://cdn.jsdelivr.net/npm/jquery@3.1.0/dist/jquery.js");
    		cdnUrlMap.set("微软", "https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.js");
    		cdnUrlMap.set("cdnjs.net", "https://libs.cdnjs.net/jquery/3.3.1/jquery.js");
    		cdnUrlMap.set("jquery", "http://code.jquery.com/jquery-3.1.0.js");
    		cdnUrlMap.set("cloudflare", "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js");
    
    		var keys = cdnUrlMap.entries();
    		var markStartTime=0;
    		var table=document.getElementById("speedTestTable");
    
    		table.innerHTML+='<tr style="background: green"><td>名称</td><td>地址</td><td>耗时</td></tr>';
    
    		function getNext() {
    			var next = keys.next();
    			if (!next.done) {
    				loadJS(next.value[1],
    				function() {
    					//耗时 包含执行逻辑时间
    					var useTime=Date.now()-markStartTime;
    
    					//渲染直至调用下次加载 不计时
    					var color="";
    					if(useTime<200){
    						color="green";
    					}else if(useTime<500){
    						color="yellow";
    					}else{
    						color="red";
    					}
    					table.innerHTML+='<tr style="background: '+color+'"><td>'+next.value[0]+'</td><td>'+next.value[1]+'</td><td>'+useTime+'ms</td></tr>';
    					getNext();
    				})
    			}
    		}
    		
    
    
    		function loadJS(url, callback) {
    			//标记本次时间
    			markStartTime= Date.now();
    			var script = document.createElement('script'),
    			fn = callback ||
    			function() {};
    			script.type = 'text/javascript';
    			script.async = false;
    			if (script.readyState) {
    				script.onreadystatechange = function() {
    					if (script.readyState == 'loaded' || script.readyState == 'compvare') {
    						script.onreadystatechange = null;
    						fn()
    					}
    				}
    			} else {
    				script.onload = function() {
    					fn()
    				}
    			}
    			script.src = url;
    			document.getElementsByTagName('head')[0].appendChild(script)
    		}
    		//start test
    		getNext();
    	</script>
    
    </html>

[20210726175722718.gif]: /images/20220829/1262d6e6985143888c68f2fe9911bf3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE5NTQyMg_size_16_color_FFFFFF_t_70]: /images/20220829/5cfa11c672624aeea40868bb15b97bc7.png