Qual é a melhor prática de usar o Twitter Bootstrap, consulte a CDN ou faça uma cópia local no meu servidor?
Como o Bootstrap continua evoluindo, receio que, se me referir à CDN, o usuário verá diferentes páginas da Web ao longo do tempo e algumas tags podem até quebrar. Qual é a escolha da maioria das pessoas?
Respostas:
Por que não os dois ¯ \ _ (ツ) _ / ¯? Scott Hanselman tem um ótimo artigo sobre o uso de uma CDN para obter ganhos de desempenho, mas normalmente retorna a uma cópia local, caso a CDN esteja inativa .
Específico ao bootstrap, você pode fazer o seguinte para carregar de uma CDN com um fallback local :
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>.visibleclasse em vez de testes parargb(51, 51, 51) .hiddene .d-nonepara o Boostrap 3.x ou 4 Document.createElement(), aplicar classes de autoinicialização, usar Window.getComputedStyle()para testar display:nonee, em seguida, inserir condicionalmente uma folha de estilo usando js.Para sua pergunta sobre Boas Práticas, há muitas boas razões para usar uma CDN em um ambiente de produção :
- Aumenta o paralelismo disponível.
- Aumenta a chance de ocorrer um acerto no cache .
- Isso garante que a carga útil seja a menor possível .
- Reduz a quantidade de largura de banda usada pelo seu servidor.
- Ele garante que o usuário obtenha uma resposta geograficamente próxima .
Para sua preocupação com a versão, qualquer CDN vale seu peso em sal, permitindo que você segmente uma versão específica da biblioteca, para que você não introduza acidentalmente alterações recentes a cada versão.
document.writeDe acordo com o MDN em document.write
Nota : à medida que
document.writeescreve no fluxo de documentos , a chamadadocument.writeautomática de um documento fechado (carregado) chama automaticamentedocument.open, o que limpará o documento .
No entanto, o uso aqui é intencional. O código precisa ser executado antes que o DOM seja totalmente carregado e também na ordem correta. Se o jQuery falhar, precisamos injetá-lo no documento em linha antes de tentarmos carregar o bootstrap, que depende do jQuery.
Saída HTML após o carregamento :
Em ambos os casos, porém, estamos ligando enquanto o documento ainda está aberto, portanto, ele deve alinhar o conteúdo, em vez de substituir o documento inteiro. Se você estiver esperando até o final, precisará substituir por document.body.appendChildpara inserir fontes dinâmicas.
Além : No MVC 6, você pode fazer isso com os auxiliares de tag de link e script
<body>elemento. Esta resposta acrescenta alguma marcação com um .hiddendiv e depois faz um teste para ver se é visível: $('#bootstrapCssTest').is(':visible'). Essa classe provavelmente tem muito menos probabilidade de sofrer alterações ao longo do tempo.
Depende do site específico.
Você tem muitos usuários? Você se importa com o uso da largura de banda? O desempenho é um problema (as CDNs podem acelerar as respostas)?
Você pode vincular a uma versão específica:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Ou
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Dessa forma, você não precisa se preocupar com as atualizações da biblioteca, é uma prática melhor manter-se atualizado.
Não sei ao certo quais são as estatísticas exatas sobre a escolha dos desenvolvedores, mas você pode dar uma olhada aqui e ver Bilhões de solicitações enviadas ao Bootstrap CDN, o que significa que é robusta e segura de usar.
Tentei editar a resposta do KyleMit, mas o fórum estava marcando como um código recuado errado, mesmo que não fosse, por isso estou adicionando minha contribuição abaixo:
Como a pergunta é marcada como um twitter-bootstrap tópico (e não apenas twitter-bootstrap-3 ), talvez seja útil atualizar a resposta para a versão mais recente do Bootstrap.
Como a estrutura adicionou uma nova classe para ocultar elementos em sua quarta versão, devemos usar em .d-nonevez de .hiddenneste caso.
Tudo o resto permanece o mesmo nesse caso, exceto a versão lib (é claro!)
Graças a @KyleMit. Outra maneira de retroceder é usar o objeto 'window' como abaixo -
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>Funciona assim - Se o link CDN funcionar, o objeto 'window' terá a propriedade 'jQuery' disponível, caso contrário a segunda parte do script, ou seja, document.write será executado, o que aponta para a cópia local.
Resposta à pergunta original - Ter o CDN oferece muitos benefícios, como downloads rápidos, sem afetar o servidor e a largura de banda. Ter uma cópia local tem seu próprio benefício (como um arranjo de reserva). Na intranet, devido a configurações de proxy, políticas de segurança, o link CDN pode não funcionar ou, se o link CDN estiver inativo, pode não funcionar. A resposta direta é ter os dois.
Quase todas as CDNs públicas são bastante confiáveis. No entanto, se você estiver preocupado com a fração do tempo em que uma CDN pode estar inativa, é possível carregar o Bootstrap de uma CDN do Bootstrap e fazer o fallback para uma CDN alternativa, caso a primeira esteja inativa.
<html>
<head>
<!-- Bootstrap CSS CDN with Fallback -->
<link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN with Fallback -->
<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>
<!-- Bootstrap JS CDN with Fallback -->
<script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
</body>
</html>Sobre sua segunda preocupação: Os links neste post são versões codificadas do bootstrap e jquery. Portanto, mesmo que as bibliotecas de inicialização e jquery sejam constantemente desenvolvidas e obtenham novos recursos, seu site permanecerá o mesmo ao longo do tempo.
rgb(51, 51, 51)parece arriscada - e se alguém mudar a cor e esquecer de atualizá-la? Existe uma propriedade mais estável que alguém possa usar?