2

Tenho uma pagina que na verdade eh bem simples, com html e um canvas com apenas algumas linhas, nem bootStrap nao estou usando.

E ela simplesmente "aborta" o download de vários elementos, como algumas imagens e/ou arquivos de CSS... (posso conferir isso em [F12] [network]) Alias se dou vários F5, alguns elementos começam a ser carregados...

MAS, quando estou acessando local, clicando direto no arquivo index.html tudo fica 100% no lugar!

Então gostaria de saber se tem alguma maneira de forçar o carregamento completo da pagina? principalmente porque no chrome, FireFox, vivaldi, safari, ie11, opera... tudo funciona rápido e sem problemas!

( preciso garantir que rode pelo windows, pelo MAC e pelo linux )

Ou seja, existe um comando para forcar o DownLoad (para o IE10 ) de toda a pagina? Uma vez que tenho certeza de que ela esta existe?

Por favor confira problemas "similares" no StakOverFlow em ingles: https://stackoverflow.com/questions/18083239/what-happened-to-always-refresh-from-server-in-ie11-developer-tools

eis o meu código (espero que não seja muito grande) e não creio que ele tenha erros, pois apenas não e 100% carregado no IE10, quando pegando do server!!!!!!!!;

quando carrega local TUDO funciona perfeitamente!!!:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- https://blogs.msdn.microsoft.com/luisdem/2013/07/18/modos-de-compatibilidade-do-internet-explorer/  Edge   -->
        <!-- meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
        <!--META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="Expires" CONTENT="-1" -->

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-slider.css">
        <link rel="stylesheet" href="css/jquery.keypad.css">
        <link rel="stylesheet" href="css/em.css">

        <script src="lib/jquery-1.11.2.min.js"></script>
        <script src="lib/jquery.plugin.js"></script>
        <script src="lib/jquery.keypad.js"></script>
        <script src="lib/fabric.js"></script>
        <script src="lib/angular.min.js"></script>
        <script src="lib/bootstrap-slider.js"></script>
        <script src="lib/detect.js"></script>
        <script src="lib/class.SiteMain.js"></script>
        <!-- script src="lib/main.js"></script -->
        <style type="text/css">
            .canvas-container {
                display: inline-block;
                text-align: center;
            }
        </style>
    </head>
    <body id="body">
        <div style="position:absolute; ">
            <div id="logTxt1"></div>
            <div id="logTxt2"></div>
        </div>
        <table>
            <tbody>
            <tr>
                <td valign="middle">
                    <div class="container">
                        <img style="display: none;" src="images/candles.png" id="candle01"/>
                        <div class="changeview left">
                            <a href="javascript:void(0);" id="moveLeft">
                                <img src="images/left.png"/>
                            </a>
                        </div>
                        <div id="main-cavas" class="canvas-container-wp" width="1400" height="1000" style="text-align:center;">
                            <canvas id="c" width="1400" height="1000"></canvas>
                            <img class="hide" src="images/circle.png" id="len-img">
                            <img class="hide" src="images/diverging.png" id="len-img2">
                            <img class="hide" src="images/candles.png" id="candles-img">
                            <img class="hide" src="images/f1.png" id="f1-img">
                            <img class="hide" src="images/f2.png" id="f2-img">
                            <img class="hide" src="images/candles-2.png" id="f15-big-img">
                            <img class="hide" src="images/candles-2.png" id="f15-img">
                            <img class="hide" src="images/candles-2positive.png" id="f15-img-positive">
                            <img class="hide" src="images/candles.png" id="big-img">
                            <div class="changeview right" style=" clear:both; display:none;">
                                <a href="javascript:void(0);" id="moveRight">
                                    <img src="images/right.png"/>
                                </a>
                            </div>
                        </div>
                        <div class="rightControl" id="sidebar">
                            <div class="box box1">
                                <div class="title">
                                    <img src="images/t1.jpg"/>
                                </div>
                                <input id="len-control" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="vertical"/>
                                <input id="len-value" class="inputValue" type="text" min="1" max="100" value="50">
                                <div class="relative">
                                    <div class="lentemp"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="box box2 box2dif">
                                <div class="title">
                                    <img src="images/t2.jpg"/>
                                </div>
                                <div class="labelA">
                                    <span>
                                        <img src="images/a.png"/>
                                    </span>
                                    <input id="valueofA" class="inputValue" type="text" min="15" max="200" value="100">
                                </div>
                                <input id="aValue" type="text" data-slider-min="15" data-slider-max="200" data-slider-step="1" data-slider-value="100" data-slider-orientation="horizontal" value="100"/>
                                <div class="relative">
                                    <div class="atemp"></div>
                                </div>
                                <img src="images/circle-s.png" class="circle-img"  id="slideBar1">
                                <div class="clear"></div>
                            </div>
                            <div class="box box2 box3">
                                <div class="title">
                                    <img src="images/t3.jpg"/>
                                </div>
                                <div class="labelA">
                                    <span>
                                        <img src="images/f.png"/>
                                    </span>
                                    <input id="valueofF" class="inputValue" type="text" min="15" max="100" value="50">
                                </div>
                                <div class="f-box">
                                    <input id="f-control" type="text" data-slider-min="15" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50"/>
                                    <div class="f-control-2">
                                        <input id="f-control-b" type="text" data-slider-min="15" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50"/>
                                    </div>
                                    <div class="relative">
                                        <div class="ftemp"></div>
                                    </div>
                                    <div class="tempspan" id="tempspanDiv"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="nomralBox">
                                <div class="vl1">
                                    <span>
                                        <img src="images/t4.png"/>
                                    </span>
                                    <input id="b-value" class="inputValue" type="text" value="100">
                                    <input id="b-value2" class="inputValue" type="text" value="2" Style="display:none;">
                                </div>
                                <div class="vl1 vl2">
                                    <span>
                                        <img src="images/t5.png"/>
                                    </span>
                                    <input id="m-value" class="inputValue" type="text" value="33.3">
                                    <input id="m-value2" class="inputValue" type="text" value="0.3" Style="display:none;">
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="nomralBox">
                                <div class="buttons2">
                                    <a>
                                        <img src="images/button1.png"  id="button1">
                                    </a>
                                    <a class="btn2">
                                        <img src="images/button2_normal.png"  id="button2">
                                    </a>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="nomralBox">
                                <div class="buttons2 btn22">
                                    <a style="cursor: pointer;" id="btnReset">
                                        <img src="images/button3.png" class="normal" alt=""/>
                                        <img src="images/button3-hover.png" class="hover" alt=""/>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <script>
            $(document).ready(function() {
                $('#moveLeft').click(function() {
                    $('body').addClass('moveLeft').removeClass('moveRight');
                    $(this).parent().hide();
                    $('.changeview.right').show();
                });
                $('#moveRight').click(function() {
                    $('body').addClass('moveRight').removeClass('moveLeft');
                    $(this).parent().hide();
                    $('.changeview.left').show();
                });
            });
        </script>
    </body>
</html>
1
  • Um server apache + MySQL + php, rodando em um linux ! Commented 5/12/2016 às 2:05

1 Resposta 1

4

A culpa não é bem do IE, claro que se comparado aos demais navegadores o IE é mais "precário", mas o problema na maior parte das vezes são as múltiplas requisições com sessão que "seguram" o servidor e o seu navegador IE pode estar desatualizado.

Não adianta colocar algo no site que force o carregamento das coisas que falharam, isto seria uma "gambiarra" para tentar resolver um problema o qual pode desencadear um problema maior posteriormente, como exceder o limite de trafego no site ou o consumo de memória do servidor aumentar em muito, deixando-o mais lento.

Esta resposta esta em desenvolvimento, ainda tem uma série de detalhes para adicionar

Existem maneira tornar o site mais enxuto, lembre-se nem todos tem internet de 10mb ou mais, tem muitas pessoas que usam internet móvel, o qual a velocidade é bem baixa, então o site não vai carregar corretamente em nenhum browser.

Vou passar uma série de dicas de como melhorar o tempo de carregamento da página, aproveitar o cache e etc.

Diminuir requisições HTTP

Quanto mais requisições, mais tempo o servidor fica ocupado e quanto mais pessoas acessando mais requisições e "threads" no servidor serão necessárias, o que pode acabar causando "timeout", o que é um tipo de segurança contra "travamentos" no lado do back-end

  1. Diminuir o numero de imagens usando CSS Sprite:

    Imagine que você tem 30 ícones na página e imagens .png diferentes, se tiver que carregar todas elas serão 30 requisições diferentes, então com isto você pode usar uma técnica chamada CSS Sprite.

    Está técnica consiste em juntar inúmeras imagens em uma só e usar a propriedade background-position:; do CSS para obter a imagem desejada, assim você irá carregar 30 ícones em uma única requisição ao invés de 30, Google usa CSS Sprites veja:

    google css sprites

    Um exemplo para pegar o logotipo:

    <style>
    .sprites {
        background: url(https://i.sstatic.net/JmdWw.png) no-repeat;
    }
    
    .logotipo {
        background-position: -23px 0;
        width: 122px;
        height: 38px;
    }
    
    .cam {
        background-position: -40px -133px;
        width: 18px;
        height: 18px;
    }
    </style>
    
    Logotipo:<br>
    
    <div class="logotipo sprites"></div>
    
    Camera:<br>
    
    <div class="cam sprites"></div>
    

    O próprio Stack Overflow usa esta técnica, veja este link: http://cdn.sstatic.net/Sites/br/img/sprites.svg?v=ac794c62c332 são basicamente todos imagens do site, usados para icones e logos

  2. Mesclar os arquivos .js e .css

    É comum vermos inúmeras chamadas de arquivos css e javascript assim

    <link href="bootstrap.css">
    <link href="theme1.css">
    <link href="fields.css">
    <link href="animation.css">
    
    <script src="jquery.js"></script>
    <script src="plugin1.js"></script>
    <script src="plugin2.js"></script>
    <script src="plugin3.js"></script>
    <script src="plugin4.js"></script>
    <script src="plugin5.js"></script>
    <script src="plugin6.js"></script>
    <script src="plugin7.js"></script>
    <script src="app.js"></script>
    

    Isto fará 14 requisições (sem contar as imagens e ajax), mas você pode diminuir o numero de requisições mesclando todos arquivos do mesmo tipo em um só, por exemplo:

    Agora serão apenas 3 requisições. Mas note que você não precisa fazer isto manualmente, pois seria trabalhoso demais, fora que irá atrapalhar a manutenção e ler o código, você pode usar um PHP para unir todos de forma dinamica, falarei disto mais para frente.

  3. Reaproveitar o cache do navegador:

    O Cache é uma coisa muito útil e que evita que um requisição que não seja POST ou PUT fique salva no computador do cliente, assim ao invés de buscar do servidor irá buscar de uma cópia salva no navegador, arquivos estáticos, como imagens e ícones podem ter seu cache definido, para isto se você usa o Apache basta criar um arquivo chamado .htaccess na pasta principal do teu projeto (no servidor seria na public_html) e colocar este conteúdo:

    # Ativa o cache
    <FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
        <IfModule mod_expires.c>
            ExpiresActive On
    
            # Cache de um mês para as imagens
            ExpiresDefault "access plus 1 mouth"
        </IfModule>
    
        # Remove o Etag no final
        FileETag None
    </FilesMatch>
    

    Esse .htaccess irá fazer com que arquivos .js, .css, .jpg, .png e etc fiquem em cache por um mês no computador dos visitantes, a partir da data que o visitante requisitou a página ao qual tinham essas imagens

    Nesta pergunta eu explico mais detalhadamente sobre o cache em arquivos estáticos o sobre como usar o 304 Not Modified:

  4. Compactar páginas

    O Apache tem um módulo chamado mod_deflate.c, ele funciona bem para fazer a compactação baseada nos mimetypes, essa compac

    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/html
    </Ifmodule>
    

    É necessário ter o seguinte modulo habilitado no Apache:

    LoadModule deflate_module modules/mod_deflate.so
    

Bloqueio de renderização

Este foge um pouco do problema, mas realmente é algo que pode melhorar a "sensação" de velocidade do carregamento, quando chamamos um script grande (ou mais de um) assim:

<!DOCTYPE html>
<html>
<head>
    <title>pagina</title>
    <script src="grande-javascript.js"></script>
</head>
<body>
    ...conteudo...
</body>
</html>

O navegador trava a página neste ponto:

<head>
    <title>pagina</title>
    <script type="text/javascript" src="grande-javascript.js"></script> <-- Aqui

Até que o script termine de carregar, assim a tela fica em branco geralmente e o loading fica processando até que o javascript tenha terminado, para evitar isto você pode usar o atributo async="" (este é bom usar se tiver combinado vários javascripts juntos) e o atributo defer

  • async carrega de maneira assíncrona sem que os demais tenham que esperar
  • defer faz com que o script não carregue até que a estrutura HTML tenha carregado por inteira, então só a partir disto o download inicia (acredito que este atributo só funcione no InternetExplorer)

Exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>pagina</title>
    <script async defer  src="grande-javascript.js"></script>
</head>
<body>
    ...conteudo...
</body>
</html>

Evitar estilos e scripts "inline"

Estilos inline é algo como:

<div style="border: 1px #000 solid; color: #ccc; background-color: #fff; border-radius: 4px;"></div>

Scripts "inline" seria algo como:

<script>
    $(document).ready(function() {
        $('#moveLeft').click(function() {
            $('body').addClass('moveLeft').removeClass('moveRight');
            $(this).parent().hide();
            $('.changeview.right').show();
        });
        $('#moveRight').click(function() {
            $('body').addClass('moveRight').removeClass('moveLeft');
            $(this).parent().hide();
            $('.changeview.left').show();
        });
    });
</script>

Mova tudo o que puder para dentro do seu arquivo CSS e JS, pois se a página não tiver cache os scripts e estilos já estarão em cache dentro dos arquivos .js e .css, fazendo a página carregar mais rápido, caso contrário, se usar "inline" toda vez que requisitar uma pagina ela terá que carregar coisas "desnecessárias" que poderiam já estar salvas no cache.

7
  • MUUUIIIIITO obrigada! estudando! Perguitinha: Ali no item 2, como colocar tudo em uma so requizicao? me perdi na leitura! acho que faltou o "exemplo" ! Commented 5/12/2016 às 3:03
  • @CamilaYamamoto estou escrevendo o script PHP para mesclar os arquivos, assim que conseguir terminar eu lhe aviso.
    – Syzoth
    Commented 5/12/2016 às 3:23
  • Ah sim! desculpe! fiquei afobada! rsrs! Feliz aqui! もともとうれしい!! Commented 5/12/2016 às 5:55
  • - Resolvi o problema! com sua "paciente" ajuda para a novata no StackOverFlow! obrigada! Commented 6/12/2016 às 4:17
  • 1
    @CamilaYamamoto nunca fiz curso e nem mesmo faculdade, posso lhe dizer uma coisa, html, css, http e web são minhas paixões. Apesar de gostar muito de desenvolvimento desktop (c++) e mobile. Eu realmente me divirto e sou curioso para entender e pesquisar :). Camila um detalhe, eu vou te mandar o código PHP hoje se possivel e tenho mais 1 ou 2 dicas para adicionar que são ferramentas para ajudar você a ter certeza se conseguiu todos resultado.
    – Syzoth
    Commented 6/12/2016 às 10:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .