Você deve colocar seu código JS em um arquivo separado, pois isso facilita o teste e o desenvolvimento. A questão de como você serve o código é outra questão.
Servir o HTML e o JS separadamente tem a vantagem de um cliente poder armazenar em cache o JS. Isso exige que você envie cabeçalhos apropriados para que o cliente não emita uma nova solicitação a cada vez. O armazenamento em cache é problemático se você deseja executar uma atualização e, assim, invalidar os caches do cliente. Um método é incluir um número de versão no nome do arquivo, por exemplo /static/mylibrary-1.12.2.js.
Se o JS estiver em um arquivo separado, você não poderá restringir o acesso a ele: É difícil (tecnicamente: impossível) saber se uma solicitação para um arquivo JS foi feita porque você o referenciou na sua página HTML ou porque alguém deseja fazer o download diretamente. No entanto, você pode usar cookies e se recusar a atender clientes que não transmitem determinados cookies (mas isso seria bobagem).
A veiculação da JS dentro do HTML aumenta o tamanho de cada página - mas isso é aceitável se for improvável que um cliente visualize várias páginas. Como o cliente não emite uma solicitação separada para o JS, essa estratégia carrega a página mais rapidamente - pelo menos pela primeira vez, mas há um ponto de equilíbrio em que o cache é melhor. Você pode incluir o JS, por exemplo, via PHP.
Aqui, o cliente não precisa de acesso separado ao arquivo JS, que pode ser oculto, se você desejar. Mas qualquer um ainda pode visualizar o código JS dentro do HTML.
Outras estratégias para minimizar o tempo de carregamento incluem
Minificação JS, que reduz o tamanho do arquivo JS que você atende. Como a minificação ocorre apenas uma vez ao implantar o código, esse é um método muito eficiente para salvar bytes. OTOH, isso torna seu código mais difícil de entender para os visitantes interessados.
Relacionada à minificação, está a prática de combinar todos os seus arquivos JS em um único arquivo. Isso reduz o número de solicitações necessárias.
Compactação, que adiciona uma sobrecarga computacional para cada solicitação no cliente e no servidor. No entanto, o tempo gasto (des-) compactando é geralmente menor que o tempo gasto na transmissão dos dados não compactados. A compactação geralmente é tratada de forma transparente pelo software do servidor.
Essas técnicas também se aplicam a outros recursos, como imagens.
- As imagens podem ser incorporadas em HTML ou CSS com URLs de dados. Isso é prático apenas para imagens pequenas e simples, pois a codificação base64 aumenta o tamanho. Isso ainda pode ser mais rápido que outra solicitação.
- Várias imagens pequenas (ícones, botões) podem ser combinadas em uma única imagem e depois extraídas como sprites.
- As imagens podem ser reduzidas pelo servidor ao tamanho em que são realmente usadas no site, o que economiza largura de banda. Compare imagens em miniatura.
- Para alguns gráficos, imagens baseadas em texto como SVG podem ser muito menores.
Se você literalmente tiver apenas uma página, então sim, é melhor (do ponto de vista do desempenho) servir tudo em um único arquivo ... folhas de estilo, JavaScript e até imagens (imagens pequenas alinhadas com URIs de dados). Isso elimina as solicitações HTTP adicionais necessárias para recuperar recursos externos que são relativamente lentos.
O arquivo resultante deve ser compactado antes da veiculação, o que reduzirá enormemente o tamanho da resposta de todo o texto.
Você ainda deve considerar imagens grandes externas à página, pois há limites para o tamanho dos URIs de dados e a compatibilidade do navegador. (por exemplo, o IE8 tem um limite de 32 KB, o que equivale a um tamanho real de arquivo de cerca de 23 KB devido à natureza da codificação base64.)
Não. Na melhor das hipóteses, o código pode ser ofuscado para "escondê-lo" do observador casual, mas não oferece proteção real.
fonte
O código JS do lado do cliente deve ser visto pelo navegador (ou seja, se a página precisar usar JS diretamente) - isso significa que deve ser baixado pelo navegador.
Você não pode ter um navegador usando JS na página se não puder fazer o download.
A esse respeito, não faz muita diferença se você alinhar o JS ou colocá-lo em um arquivo, embora a prática comum seja usar um arquivo JS (separação de preocupações para um).
Se você possui um código que não deseja expor no navegador, precisará usar o código do lado do servidor (por exemplo, node.js, php, perl, asp.net, jsp - existem tantas opções) e interagir com ele do navegador - na página inicial carregada ou usando AJAX .
fonte
Bem, isso depende da quantidade de código e de quão sério você é sobre ser um programador / engenheiro de software versus apenas um codificador. Trabalhei com vários designers que colocavam pequenos trechos de código diretamente em HTML e, enquanto eu me encantava - ele realmente funcionava.
Embora não seja algo que eu faria, e se você quiser conhecer as melhores práticas de desenvolvimento de software, recomendo que você copie tudo em um
*.jsarquivo externo e carregue-o por meio de<script>tags.Em relação ao seu segundo ponto, não, você não pode negar ao usuário ou navegador para visualizar seu código, existe algo chamado
obfuscationque tornará seu código mais difícil de ler, mas o desempenho será prejudicado.fonte
É melhor criar um arquivo externo para o seu código JS. Também é melhor ter um ou dois arquivos que você serve para o cliente. Mas também é melhor dividir seu código JS em vários arquivos por questões de manutenção. Para poder fazer isso, você pode usar pré-processadores como o Gulp que combinarão seus diferentes arquivos JS em um arquivo.
Servir menos arquivos é melhor, pois o cliente terá menos solicitações HTTP para manipular.
Sim, obviamente, é mais rápido, pois você faz apenas uma solicitação para o HTML, enquanto faz muitas solicitações (pelo menos 2) com seu código JS como externo. Isso é apenas se o seu código JS não for minificado em nenhum dos lados, e isso não levar em conta o quanto será mais difícil manter seu código, se estiver tudo em uma única página HTML.
Não, você não pode. Código JS, como código CSS e código HTML, é conteúdo estático. Isso significa que, uma vez no navegador, o cliente pode fazer o download completo e do conteúdo. Todos os arquivos, imagens e scripts estão abertos para download. Porém , você pode minificar / modificar seu código para que seja mais difícil para um ser humano usá-lo. Isso é apenas uma consequência da uglificação, que foi feita para o desempenho primeiro.
fonte
Muitos benefícios da separação do conteúdo html e javascript em arquivos separados:
fonte