Listet die Requeste mit Größenangabe und Ladezeit auf
Code
<script src="/js_webseite/jquery.js"></script>
<link rel="stylesheet" href="/css_webseite/jquery-ui.css">
<script src="/js_webseite/jquery-ui.js"></script>
<style>
h2{
font-size: 23px;
}
h3{
font-size: 20px;
}
#speed {
margin:0 auto;
}
.right {
text-align: right;
}
tr {
border-bottom: 1px solid gray;
}
td {
color:white;
padding: 2px 10px;
}
table {
border-collapse: collapse;
width:100%;
}
thead td {
background: #b7eeff;
}
td.name {
font-size: 10px;
}
#network {
margin:0 auto;
overflow:auto;
}
#network_conection_debugg{
position:fixed;
top:10px;
overflow: auto;
left:10px;
width:90vw;
magin:0 auto;
border:2px solid black;
background:rgba(22,20,20,1);
padding:15px;
color:white !important;
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
#netwok_debugg_close{
height:32px;
width:27px;
position:fixed;
padding:5px 0 0 5px;
text-align:center;
font-size:20px;
background:red;
color:white;
cursor:pointer;
border:1px solid black;
margin:-15px 0 0 -15px;
border-top-left-radius:30px;
}
#netwok_debugg_close:hover{
background:green;
}
</style>
<div id="network_conection_debugg">
<div id="netwok_debugg_close">X</div>
<div id="network">
<h3>Detected network speed:
<span id="speed"></span> kbps
</h3>
</div>
<h5>Dateiname
<div id="datei_name"></div>
<br>Requeste Gesamt :<span id="request"></span>
<br>Gesamt traffic :<span id="ta"></span>
</h5>
<table>
<tbody id="networktbody"></tbody>
</table>
</div>
<script>
var gesamtgroesse=0;
const tBody = document.querySelector("#networktbody");
const renderEntry = entry => {
const entryStr = `
<td>${entry.entryType}</td>
<td class="name" style="max-width:350px">${entry.name}</td>
<td class="right">${(entry.transferSize / 1000).toFixed(2)} kB</td>
<td class="right">${(entry.responseEnd - entry.responseStart).toFixed(1)} ms</td>
`;
mehr=(entry.transferSize / 1000).toFixed(2);
gesamtgroesse=gesamtgroesse+parseInt(mehr);
console.log(gesamtgroesse)
tBody.insertAdjacentHTML("beforeend", entryStr);
};
const listEntries = () => {
window.performance.getEntries().forEach(renderEntry);
// console.log(entry.length);
document.getElementById('request').innerHTML=window.performance.getEntries().length;
};
var kbitsPerSecond;
const networkSpeedDetect = () => {
let totalSize = 0;
let totalTime = 0;
const validEntries = [];
window.performance.getEntries().forEach(entry => {
if (entry.transferSize && entry.responseStart && entry.responseEnd) {
if (entry.responseEnd > entry.responseStart) {
validEntries.push(entry);
const timeTaken = entry.responseEnd - entry.responseStart;
totalTime += timeTaken;
totalSize += entry.transferSize;
//ich.innerHTML+=entry.responseEnd+'='+entry.responseStart+'<br>';
}
}
});
var kbitsPerSecond = Math.round(totalSize / totalTime * 8);
//document.querySelector("#speed").innerHTML = kbitsPerSecond;
//const datname=document.querySelector("#datei_name");
//validEntries.forEach(entry => {
// const entryStr = ` <li>${entry.name}</li> `;
// datname.insertAdjacentHTML("beforeend", "<a href='"+entry.name+"'>"+entry.name+"</a>");
//});
refresh(0,kbitsPerSecond);
};
document.addEventListener("DOMContentLoaded", () => {
listEntries();
networkSpeedDetect();
// $('#speed').html(kbitsPerSecond);
//console.log(window.performance.getEntries())
});
$(document).ready( function () {
// $('#speed').html(kbitsPerSecond);
// console.log(window.performance.getEntries())
// refresh(0);
});
function refresh(counter,kbitsPerSecond) {
if(counter < 100){
setTimeout ( function() {
//console.log(kbitsPerSecond);
$('#speed').html(kbitsPerSecond);//+'='+counter);
$('#ta').html(gesamtgroesse);
counter++;
refresh(counter,kbitsPerSecond);
},100);
}
}
$(function(){
$("#network_conection_debugg").draggable({
cursor: "move",
});
$( "#network_conection_debugg" ).resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
});
$('#netwok_debugg_close').click(function(){
$("#network_conection_debugg").remove();
})
});
</script>
</div>