13

Assim como o JS e CSS, o HTML também pode ser "minificado":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

viraria:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>

HTML exemplo retirado daqui: http://getbootstrap.com/getting-started/

Minificado aqui: http://www.willpeavy.com/minifier/


Isso reduz um pouco o tamanho e deve diminuir o tempo de download.

Minha dúvida é: É seguro? Ou existe o risco do navegador interpretar algo errado? (principalmente browsers antigos como IE<9)

2 Respostas 2

16

Os espaços em branco podem possuir significado de forma dependente do CSS, como por exemplo ao usar white-space: pre.

Por isso, um minificador de HTML, que não leve em conta os estilos CSS aplicados ao mesmo, será inseguro por definição.

Obviamente, pode-se assumir algumas regras, que provavelmente nunca são burladas. A tag head por exemplo, nunca será visível... logo pode ter os espaços removidos.

Comentários, poderiam ser removidos, se não fossem esses comentários condicionais. Mas geralmente, esses comentários possuem um padrão, e é possível saber quando remover ou não.

10

A resposta que eu vou dar não responde exatamente sua pergunta mas acredito que inclui conhecimento válido para ela.

HTML é um XML em si e por esse fator ele pode ser maior que um arquivo JSON por exemplo. As inovações que estão surgindo estão todas focadas em JSON e não XML, por esse fator estão surgindo tecnologias em JS para renderizar uma página HTML usando JSON. Sendo assim é trafegado JSON e estes frameworks fazem o "parse" e o navegador renderiza o HTML5 normal. Posso citar 2, "AngularJS da Google" e o ExtJS da Sencha.

O ganho que se tem em tamanho e final de páginas e velocidade é brutal usando estes frameworks. Se você é um desenvolvedor Web, te aconselho fortemente a estudar estas tecnologias.

Bons estudos.

4
  • 2
    +1 Boa resposta. Também tem o ReactJS do facebook... o qual me impressionou muito! Commented 10/07/2014 às 17:43
  • Rocha e @Miguel. Eu tava antes dando uma olhada no tutorial interativo do Knockout JS. A proposta dele é a mesmo do AngularJS ou o Angular é ainda diferente?
    – user7261
    Commented 10/07/2014 às 19:09
  • Pra quem tiver interesse em frameworks MVC: todomvc.com Commented 10/07/2014 às 19:14
  • 1
    @Andrey a proposta é diferente knockoutJS tem como principal funcionalidade prover uma ideia de MVVM, ou seja, conceito de ViewModel numa página. Já o angularJS é um framework completo, aonde você pode estruturar toda sua aplicação nele usando conceito de MVC. Ele tbm provê MVVM e data-bind que é aonde o knockout trabalha, por isso as vezes eles se confundem. Dê uma lida nesse post, ele explica algumas diferenças claras entre os 2. Em resumo o AngularJS é bem mais completo que o Knockout. Commented 10/07/2014 às 19:21

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