Hei,
Minulla on seuraava JS + HTML koodi, tämä koodi sisältää minun enter sivun latauksen, tämä enter sivu sisältää sinisen taustan jossa tuo teksti lautapelisivusto / hannunpilotit / urossaro / jne .. :).
Onko tämä koodi oikein vai voiko se jäädä endless looppiin ?
Firefox taitaa jäädä endless looppiin jostain syystä, aina välillä, en tiedä onko kyse minun koodistani, tuo Ubuntu "Web Content" on siellä CPU 150% - 325%, minulla on x6 Core CPU, en tiedä johtuuko CPU rasite tästä koodistani ? Enkä tiedä onko vain Ubuntu bugi ?
<!DOCTYPE html>
<!--
*
* (C) 2017 - by Hannu Särö ja hänen lautapelisivustonsa.
*
-->
<html>
<head>
<title>Tervetuloa pelaamaan ..</title>
<meta charset="utf-8">
<meta name="description" content="Tervetuloa, testaamaan ja pelaamaan Hannu Särön suomalaisia, toivon erinomaisia ja laadukkaita netti lautapelejä.">
<meta name="keywords" content="hannu, jari, tapio, oskari, saro, särö, tabletpelisivusto, bonuspelisivusto, hannunpilotit, urossaro, lautapelisivusto, lautapelaamaan, suomalaisia, kotimaisia, lautapelejä, lautapeli, lautapelit, open, openjdk, java, javascript, script, taiteilija, taide, harrastus, harraste, linux, windows, macintosh, jätkänshakki, reversi, tammi, mylly, shakki, kenraalit, kaarti, neljä kuningasta, uros kuningas, kuninkaan sotilaat">
<meta name="author" content="Hannu Särö">
<meta name="generator" content="Netbeans">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://www.hannusaro.com/css/enter.css" rel="stylesheet" type="text/css">
<link href="https://www.bittipankki001.com/kuvat/favicon.png" rel="icon" type="image/png"/>
</head>
<body>
<canvas id="myEnterCanvas" class="myEnterCanvas" width="1" height="1"></canvas>
<script type='text/javascript'>
function loadImage(lstr) {
var ctx = document.getElementById('myEnterCanvas');
ctx.width = window.innerWidth * 98 / 100;
ctx.height = window.innerHeight * 97 / 100;
var img = new Image();
img.onload = function () {
var ctx2 = ctx.getContext('2d');
var scl = ctx.height / 800.0;
ctx2.scale(scl, scl);
ctx2.imageSmoothingEnabled = true;
ctx2.imageSmoothingQuality = "high";
ctx2.drawImage(img, ctx.width * (1.0 / scl) / 2 - img.width / 2, 300 - img.height / 2);
};
img.src = "https://www.bittipankki001.com/kuvat/" + lstr;
}
var mainloop = function (event) {
cc++;
if (cc < 6)
setTimeout(mainloop, 1000);
else
window.location.replace("Etusivu.html");
};
var cc = 0;
loadImage("alkuintro_009.png");
mainloop();
</script>
</body>
</html>mitä hyötyä sulla tossa on loopata 5x, verrattuna et ajastaisit kerralla 5sek ja ohjaisit sen jälkeen etusivulle?
Ok,
Muutan tuon kohdan. :).
--
Koodissasi ei ole sinänsä mitään väärää, joka nostaisi prosessorin käyttöä. Et voi estää sitä, että sivun sisällön muuttuessa selain tekee työtä. Jos tietokoneessasi on kuusi ydintä, suoritinkäyttö voi olla enimmillään 600 %. Selaimet yritetään tehdä turvallisiksi niin, että JavaScript-koodilla ei voi aiheuttaa koneelle vahinkoa. Ei tarvitse huolehtia siitä.
Toisaalta voi miettiä, onko tarpeellista käyttää canvas-elementtiä vai voisiko kuvan saada tavallisella img-tagilla oikeaan kohtaan.
Metatieto keywords on nykyään melko vanhanaikainen, ja varsinkaan tuollainen pitkä lista eri sanoja ei edistä sivusi löytymistä.
Ok,
Kiitos, neuvoista, minulla todella tuo WebContent Ubuntu 16.04.4 kanssa, huitasee tuonne noin vajaa 350% ajoittain, enin osin se kuitenkin jää johonkin 150%.
Liekö sitten vain jokin Linux taikka Firefox issue, taikka molempia ?
--
Lisäys:
Kumma homma,
Tuota tuota, tämä seuraava rivi varmaankin taisi aiheuttaa tuon CPU high raten.
<link href="https://www.bittipankki001.com/kuvat/favicon.png" rel="icon" type="image/png"/>
Minun Firefox taisi jäädä johonkin tilaan jossa se jäi etsimään tätä tiedostoa, eikä kykene löytämään sitä, minä poistin tuon rivin, niin, nyt on ainakin tämän vähän ajan toimina, mitä tuosta ensimmäisestä viestistä nyt sitten onkaan.
Minä huomasin koettaa poistaa tämän rivin, kun tuo favicon ei latautuna sivustolle ja tuo Firefox jää lataus tilaan vaikka sivusto on jo latautuna.
En tiedä tarkemmin mistä onkaan sitten kyse, mutta, katson nyt sitten parit päivät mitenkä toimii ??
:)
--
Lisäys,
Laitoin koodin näin, nyt ei ole pariin tuntiin tullut tuota WebContent >100% rasitetta.
Kiitosta vaan neuvoista.
Tässä uusi koodi ->
<!DOCTYPE html>
<!--
*
* (C) 2017 - by Hannu Särö ja hänen lautapelisivustonsa.
*
-->
<html>
<head>
<title>Tervetuloa pelaamaan ..</title>
<meta charset="utf-8">
<meta name="description" content="Tervetuloa, testaamaan ja pelaamaan Hannu Särön suomalaisia, toivon erinomaisia ja laadukkaita netti lautapelejä.">
<meta name="keywords" content="hannu, jari, tapio, oskari, saro, särö, tabletpelisivusto, bonuspelisivusto, hannunpilotit, urossaro, lautapelisivusto, lautapelaamaan, suomalaisia, kotimaisia, lautapelejä, lautapeli, lautapelit, open, openjdk, java, javascript, script, taiteilija, taide, harrastus, harraste, linux, windows, macintosh, jätkänshakki, reversi, tammi, mylly, shakki, kenraalit, kaarti, neljä kuningasta, uros kuningas, kuninkaan sotilaat">
<meta name="author" content="Hannu Särö">
<meta name="generator" content="Netbeans">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://www.hannusaro.com/css/enter.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="myEnterCanvas" class="myEnterCanvas" width="1" height="1"></canvas>
<script type='text/javascript'>
function loadImage(lstr) {
var ctx = document.getElementById('myEnterCanvas');
ctx.width = window.innerWidth * 98 / 100;
ctx.height = window.innerHeight * 97 / 100;
var img = new Image();
img.onload = function () {
var ctx2 = ctx.getContext('2d');
var scl = ctx.height / 800.0;
ctx2.scale(scl, scl);
ctx2.imageSmoothingEnabled = true;
ctx2.imageSmoothingQuality = "high";
ctx2.drawImage(img, ctx.width / scl / 2 - img.width / 2, 300 - img.height / 2);
};
img.src = "https://www.bittipankki001.com/kuvat/" + lstr;
}
var mainloop = function () {
window.location.replace("Etusivu.html");
};
loadImage("alkuintro_009.png");
setTimeout(mainloop, 5000);
</script>
</body>
</html>Miksi sivulla on canvas -elementti, kun kyseessä on pelkkä kuva?
Mikäli tuossa nyt näytetään kuva vain tietyssä koossa, niin selaimet hoitaisivat kaiken tuon skaalauksen yms. itse automaattisesti.
Yksinkertainen asia tehty hankalasti, mikä toisaalta ei yllätä, kun on seurannut tätä projektia.
Muutenkin kun tehdään rekursiivisia kutsuja, arvot tulisi antaa kutsuttavalle metodille/funktiolle (oli sitten kyseessä indeksi jota muutetaan, tai vaikka taulukko jota populoidaan rekursiivisesti), eikä käyttää kontekstin ulkopuolista tietoa.
var mainloop = function (index) {
index++;
if (index < 6)
setTimeout(mainloop,1000,index);
else
window.location.replace("Etusivu.html");
};
var cc = 0;
mainloop(cc);Sinulla ei myöskään ole tuossa mitään "looppia" nykyisessä koodissasi, joten voinet vain tiivistää:
setTimeout(() => { window.location.replace("Etusivu.html"); }, 5000);Kuten lebe tuossa sanoikin, voit tiivistää koko koodisi aika paljon pienempään (keywordia ei myöskään tarvita käytännössä mihinkään: https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html):
Linkki allaolevaan esimerkkiin JSFiddlessä
html, body {
width: 100%;
padding: 0px;
margin: 0px;
}
.site-bg {
margin: 200px auto; /* En katsonut paljonko sulla on margin-top, heitin vain jotain */
display: block;
}
/* Vähän responsiivisuutta jos tullaan tabletilla tai mobiililla */
@media only screen and (max-width: 768px) {
.site-bg {
width: 100%;
height: auto;
}
}<html>
<head>
<title>Tervetuloa pelaamaan ..</title>
<meta charset="utf-8">
<meta name="description" content="Tervetuloa, testaamaan ja pelaamaan Hannu Särön suomalaisia, toivon erinomaisia ja laadukkaita netti lautapelejä.">
<meta name="author" content="Hannu Särö">
<meta name="generator" content="Netbeans">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://www.hannusaro.com/css/enter.css" rel="stylesheet" type="text/css">
</head>
<body>
<img class="site-bg" alt="taustakuva" src="https://www.bittipankki001.com/kuvat/alkuintro_009.png" />
<script type="text/javascript">
setTimeout(() => { window.location.replace("Etusivu.html"); }, 5000);
</script>
</body>
</html>Tässä on joitakin muutosehdotuksia HTML-koodiin:
initial-scale=1, koska se ajaa saman asian. (width=device-width on siis tässä tarpeeton, eikä tee mitään.)Näiden muutosten jälkeen groovybin ehdottama HTML-koodi näyttäisi tältä:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tervetuloa pelaamaan ..</title>
<meta name="description" content="Tervetuloa, testaamaan ja pelaamaan Hannu Särön suomalaisia, toivon erinomaisia ja laadukkaita netti lautapelejä.">
<meta name="author" content="Hannu Särö">
<meta name="viewport" content="initial-scale=1">
<link href="https://www.hannusaro.com/css/enter.css" rel="stylesheet">
</head>
<body>
<img class="site-bg" alt="Tähän esim. kuvan sisältämä teksti." src="https://www.bittipankki001.com/kuvat/alkuintro_009.png">
<script>
setTimeout(() => { window.location.replace("Etusivu.html"); }, 5000);
</script>
</body>
</html>(Lisäksi palautin doctype-määrittelyn ja yhtenäisyyden vuoksi poistin img-elementin lopusta vinoviivan.)
Aihe on jo aika vanha, joten et voi enää vastata siihen.