27

Os conteúdos da página podem ser solicitados mediante a introdução de um URL completo, relativo ou relativo à raiz do local onde se encontra o nosso ficheiro base (geralmente o index.php ou index.html):

Completo

<script src="http://www.meusite.com/assets/js/script.js"></script>

Relativo

<script src="assets/js/script.js"></script>

Relativo à raiz

<script src="/assets/js/script.js"></script>

Pergunta

Existe alguma diferença prática em termos de eficiência da página entre usar qualquer uma das três opções que temos ao nosso dispor?

Claro que temos uma redução na quantidade de código, mas para além disto...

0

6 Respostas 6

21

Resposta curta

Não faz diferença pois o navegador otimiza e faz chamadas ao mesmo lugar. A principal diferença é a que você mencionou mesmo, na quantidade de bytes do arquivo HTML.


Resposta longa

O principal uso é para economizar bytes nos arquivos fonte, mas há alguns outros usos, conforme o tipo de URL relativa. basicamente há três delas:

  1. URL relativa ao lugar em que o arquivo atual está

    Ex.:

    <a href="menu2.html">menu2</a>
    

    Aqui você está acessando um arquivo no mesmo diretório que você está.

    <a href="../../teste/menu2.html">menu2</a>
    

    Aqui você está acessando um arquivo dois niveis antes do diretório que você está.

  2. URL relativa ao servidor (domínio completo) que o arquivo atual está

    Ex.:

    <a href="/menus/menu2.html">menu2</a>
    

    Aqui você está acessando um outro arquivo à partir da raiz do site.

  3. URL relativa ao protocolo atual

    Ex.:

     <a href="//outrosite.com.br/pagina1.html">link em outro site</a>
    

    Aqui você está acessando um outro site usando o mesmo protocolo. Este caso é muito usado para manter compatibilidade no uso de HTTPS e HTTP e garantir que todos acessos sejam no mesmo protocolo, independentemente da forma que o usuário acessou inicialmente o site.

1
  • 4
    Eu diria que os 3 casos que você mencionou são bem mais importantes que a economia de uns míseros bytes. ;)
    – elias
    Commented 22/01/2014 às 21:54
13

Para o usuário final, a diferença é praticamente nula, pois o browser (ou aplicação em geral) que fizer a requisição vai normalizar o endereço em um tempo imperceptível.

Porém, se você considerar a facilidade de manutenção dentro do escopo "eficiência", tudo muda:

  • URLs absolutos tendem a ser uma dor de cabeça ao reaproveitar o markup para mudar o site de endereço ou replicar a estrutura em um site novo, e são impraticáveis se você atender mais de um URL com funcionamento diferente pelo mesmo script/página (no caso de a mesma aplicação atender a vários URLs) ou quiser atender tanto http:// quanto https://.

    Vale notar que você pode usar um URL absoluto sem definir o protocolo, para resolver o problema mencionado. Ex: <a href="//example.com/index.html">

  • URLs relativos ao caminho atual (sem a barra inicial que indica "relativo à raiz") têm sua vantagem em estruturas que podem ser reaproveitadas em níveis diferentes do site, mas são mais complicados de manter quando a estrutura referencia coisas que deveriam estar sempre no mesmo lugar (como ícones de um site).

    Ex: <a href="index.html"> (depende da página onde você está para determinar o resto do caminho. Pode tanto significar meusite.com/index.html, como meusite.com/arquivos/index.html, se o link estiver em arquivos/pagina3.html, por exemplo.)

  • URLs relativos à raiz tendem a ser melhores para coisas globais, e evitam muitos erros e perda de tempo nos casos mencionados no parágrafo acima, se referindo a arquivos de mídia e scripts de uso global do site.

    Ex: <a href="/index.html"> (será sempre o mesmo index.html, dentro do site que apresentou o link, não importa em qual de suas páginas ou pastas o link foi mostrado)

O ideal na maior parte dos casos convencionais de site e aplicação web é um misto de relativo com relativo à raiz, sendo relativo à raiz para coisas globais, e relativo à pasta (sem barra inicial) para coisas que podem mudar de nível (como uma coleção de pastas e scripts de uma sub-aplicação ou funcionalidade isolada do site), seja na mesma aplicação, ou no reaproveitamento de código para outra aplicação.

Quando você vai dar um redirect enviando um header Location: http://www.exemplo.com.br/, deve preferir sempre um caminho absoluto, mas vale notar que em 2014 um RFC relaxou esta restrição, permitindo URLs relativos.

Quando pretender usar URLs em CSS que possa ser incluído com @importtalvez seja interessante usar o caminho relativo à raíz, para não se perder ao tentar debugar folhas de estilo em níveis diferentes do site.

7

A diferença deve ser negligível. Inspecionando a forma como o browser envia as requisições (por exemplo, no Chrome em "Ferramentas" -> "Ferramentas do Desenvolvedor" -> "Network") reparei que ambas as chamadas enviam URLs idênticas nos headers.

$.get('/echo/json/');

...

$.get('http://fiddle.jshell.net/echo/json/');

Detalhes da requisição, em ambas:

Request URL:http://fiddle.jshell.net/echo/json/

Exemplo no jsFiddle. (se o exemplo não funcionar - i.e. se apenas uma única requisição for feita - aumente o tempo no timeout para mais de um segundo)

Ou seja, determinar o caminho absoluto a partir do relativo é algo feito no próprio browser, o que deve ser uma simples questão de concatenação de strings. Diante do overhead da comunicação em rede, a diferença de performance não deve ser significativa (aliás, pode-se argumentar que usar URLs curtas melhora a performance - pois o tamanho do arquivo a ser descarregado do servidor fica menor).

2
  • 4
    Nem vale a pena especular a diferença de desempenho. Alguém pode se convencer e criar um hábito de pseudo otimização prematura. =)
    – elias
    Commented 22/01/2014 às 22:00
  • @elias Concordo. O overhead da comunicação em rede é várias ordens de grandeza maior que esses pequenos detalhes. No entanto minha última afirmação (que fiz mais como uma piada) tem um fundo de verdade - na ausência de uma compressão eficiente (ex.: gzip), reduzir o tamanho dos arquivos acarreta numa melhoria de performance, pois menos dados têm de ser trocados através da rede.
    – mgibsonbr
    Commented 22/01/2014 às 22:09
7

Existem diferenças práticas nos diferentes tipos de URL?

As outras respostas são muito boas.

Só posso concordar que qualquer diferença de eficiência em relação à banda utilizada (quantidade de bytes transferidos) ou ao desempenho será mínima.

Porém, pensando em termos de portabilidade (ver norma ISO 9126 de Qualidade de Software), creio que os sistemas devem usar sempre que possível URLs relativas à raiz do site para acessar seus próprios recursos (imagens, estilos, scripts, etc.) e sempre evitar o protocolo para recursos externos.

O aspecto que considero mais importante é manter um padrão nas URLs e um padrão só existe se todas as URLs começarem com o meso prefixo. Isso ajuda a manter a sanidade dos desenvolvedores e elimina muita confusão, tal como ter que ficar calculando diretórios mentalmente.

Sua aplicação está preparada para ser segura?

Usar caminhos completamente absolutos pode gerar sérios problemas em sites que usam HTTPS. O problema começa quando seu site é acessado via HTTPS (meio seguro) e tenta incluir um recurso HTTP (não seguro).

Por exemplo, vamos supor que você queira incluir o jQuery de um CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Porém, se o seu site for acessado via HTTPS, o navegador vai reclamar do recurso inseguro (HTTP) e não vai carregar o script. Em decorrência disso, o próprio Google indica a forma mais adequada:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Nota: segundo este link, o Internet Explorer nas versões 7 e 8 irá fazer o download duas vezes se você incluir um CSS com uma URL sem protocolo, porém não fiz o teste.

Uma alternativa perfeitamente viável é sempre incluir recursos externos usando HTTP.

Uma experiência pessoal

Independe da abordagem, nem tudo são flores.

Há algum tempo fiz um sistema usando um framework Java que gerava URLs relativas à raiz do servidor, por exemplo:

/aplicacao/estilo.css

No entanto, quando a aplicação foi instalada em produção ocorreram problemas, pois as filiais da empresa a usavam sob um proxy reverso e o caminho relativo à raiz teria que ser assim:

/web/aplicacao/estilo.css

A solução seria simplesmente adicionar o caminho /web às URLs geradas pelo framework? Não, pois a sede da empresa acessava o sistema diretamente, sem passar pelo proxy reverso. Ou seja, a aplicação atendia dois tipos de origens diferentes que a acessavam por URLs diferentes.

Uma possível solução seria identificar a fonte da requisição ou ainda olhar a URL da requisição e mudar dinamicamente a raiz das URLs geradas, porém naquela situação foi muito mais simples e direto usar caminhos relativos às páginas:

../estilo.css

Isso foi possível porque desenvolvi o sistema de forma que todas as páginas ficavam no mesmo nível: /home, /usuarios, /clientes, etc.

Mas, ainda que o sistema não fosse assim, eu poderia adicionar o caminho relativo programaticamente, exatamente do mesmo jeito que normalmente os frameworks fazem adicionando um base path a todas as URLs, não é mesmo?

${basePath}/estilo.css

Aqui basePath pode ser tanto o caminho relativo à raiz do site como o caminho da página atual até a pasta base onde está o estilo.

2
  • 1
    Legal ver esse relato, pois eu iria apontar justamente o contrário (melhor manter caminhos absolutos), pelo fato de estar portando um código feito por uma equipe de outro país, já passei por muitos erros em mover código de pastas e eles não referenciarem a coisa certa por não estarem com o caminho absoluto. É ótimo ver como experiências diversas podem nos fazer repensar as coisas. Valeu por compartilhar o case!
    – pmargreff
    Commented 13/05/2016 às 0:43
  • 1
    @pmargreff Eu atualizei a resposta porque na verdade ela estava muito obscura. Eu sou a favor de caminhos relativos à raiz do site. Não 100% absolutos, nem 100% relativos. Espero que agora esteja mais claro.
    – utluiz
    Commented 13/05/2016 às 1:31
2

De eficiência NÃO. Mas no desenvolvimento faz MUITA DIFERENÇA. Caminhos relativos permitem a você contar com dois ou mais ambientes, por exemplo: montar ambiente de programação, homologação e produção separados utilizando o MESMO código. Posso desenvolver e testar sem comprometer o código que está em produção, quando a melhoria ou correção estiver homologada copio-a para a produção.

0

Em caso de um sistema para vários domínios

Às vezes trabalhamos em aplicações multiclients. Ou seja, uma aplicação para vários clientes, estes podendo ter seus domínios personalizados. Então, para este caso, a nível de desenvolvimento, é melhor o uso de URL relativa. Por quê? No caso de URLs absolutas, o item aponta sempre para o mesmo domínio: https://dominio.com/arquivo.html. Porém, se vc estiver com um domínio personalizado, isto pode ser problema, pois vc vai estar em https://personalizado.com/ e será redirecionado para o domínio da URL absoluta. Por isso, em aplicações multidominios, a URL relativa é utilizada, pois "/arquivo.html" equivale a https://dominio.com/arquivo.html e https://personalizado.com/arquivo.html dependendo do domínio que voce estiver.

Já, para o navegador, essas mudanças são indiferentes em caso de performance ou usabilidade. Isto implica apenas em navegabilidade mesmo.

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 .