JS测试CND js文件加载速度

实际文件大小也会有些差异统一使用的是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 testgetNext();</script></html>

JS测试CND js文件加载速度相关推荐

Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
linux测试网页装载时间,使用curl测试web页面响应加载速度
curl -o /dev/null -s -w %{http_code}:%{http_connect}:%{content_type}:%{time_namelookup}:%{time_redir ...
MaccmsV10切换JS播放器，优化加载速度
引言:默认自带dpplayer播放器和videoJs播放器为什么要切换自己的播放器? 1:采集的影视资源大部分是外站的,外站资源平台一般都会标配播放器,便于放自己的一些广告和菠菜,无可厚非. 2:还 ...
three.js使用obj + mtl文件加载材质问题
在加载成功后显示黑色或者白色模块时时材质加载失败,但是mtl文件是加载了的,问题在于路径不匹配,需要修改mtl文件里面的路径. 贴图模块加载修改mtl文件路径过后
打造亚秒级页面加载速度网店实践经验
美国的创智赢家(Shark Tank),英国的龙穴之创业投资(Dragons' Den),以及德国的"Die Hohle der Lowen (DHDL)"等电视节目为年轻的初创公 ...
网页速度很慢优化方案：如何提高网页加载速度，提升网站加载速度
网站加载速度的快慢,直接影响用户的去留.这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题.希望对你有所帮助! 1. 网站空间要好:网站需要一个稳定的服务器或者虚拟机,可以 ...
前端优化首屏加载速度
执行npm run build,将打包代码部署上线后访问项目,会发现表现很糟糕,页面会出现长时间的空白等待,这是无法忍受的性能问题,迫切需要解决. 1.路由懒加载. 原来的路由引入组件 import ...
前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

JS测试CND js文件加载速度

JS测试CND js文件加载速度相关推荐

最新文章

热门文章