Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Arvostele pelit
15.8. klo 12 mennessä!

Keskustelu: Nettisivujen teko: HTML + JS, Sivuston varma toimivuus ?

Sivu 1 / 1

Sivun loppuun

HannuTapio [25.03.2018 20:14:53]

#

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>

groovyb [25.03.2018 20:35:45]

#

mitä hyötyä sulla tossa on loopata 5x, verrattuna et ajastaisit kerralla 5sek ja ohjaisit sen jälkeen etusivulle?

HannuTapio [25.03.2018 20:41:24]

#

Ok,

Muutan tuon kohdan. :).

--

Metabolix [25.03.2018 21:02:49]

#

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ä.

HannuTapio [25.03.2018 21:07:15]

#

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 ??

:)

--

HannuTapio [26.03.2018 04:12:49]

#

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>

Lebe80 [26.03.2018 08:33:55]

#

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.

groovyb [26.03.2018 15:56:37]

#

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>

HTML5 [26.03.2018 17:30:18]

#

Tässä on joitakin muutosehdotuksia HTML-koodiin:

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.)


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta