Se estou criando um site de uma página, é melhor criar um arquivo externo para o meu código JS ou apenas colocá-lo no código html? Colocá-lo na página é mais rápido para carregar? Posso alterar as permissões para negar as solicitações dos usuários para o código, mas a página html ainda pode chamar o código?
Respostas:
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.
Estou criando um site de uma página
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.)
Posso alterar as permissões para negar as solicitações dos usuários para o código, mas a página html ainda pode chamar o código?
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.
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 .
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.
é melhor criar um arquivo externo para o meu código JS ou apenas colocá-lo no código html?
É 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.
Colocá-lo na página é mais rápido para carregar?
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.
Posso alterar as permissões para negar as solicitações dos usuários para o código, mas a página html ainda pode chamar o código?
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.
Muitos benefícios da separação do conteúdo html e javascript em arquivos separados: