Qual o processo de leitura de um javaScript?
comentada em 11/11/2022 16:28

O javascript (no navegador) é executado pela engine do navegador e pode rodar em vários momentos. Quando ele termina de ser carregado, quando o HTML termina de ser carregado, quando a página termina de ser renderizada, quando existe interação do usuário etc.

O browser fica, de fato, em um "while" ouvindo vários eventos da página e, ao carregar o(s) arquivo(s) .js, sabe o que rodar e quando. Programas de computador em geral funcionam assim em loop, especialmente os que interação com usuário.

HTML/CSS/Javascript é relativamente fácil de começar por ser algo que temos vivência (páginas web) e fácil de construir algo simples na mão, mas o browser em si é super complexo e tem muita coisa acontecendo só de carregar uma página relativamente complexa. Não desanime, ninguém sabe tudo sobre tudo.

Depende de como vc declara no seu código, me corrijam se estiver errado, mas é comum declarar o JS só no final do HTML, para que seja executado após carregar todo o conteúdo, ou seja é top-down

Um adendo: o computador não necessariamente sabe o que é esquerda/direita/cima/baixo, é só o editor que mostra assim pra você

No nível JS de abstração, é a sequência de bytes do arquivo, o que não tem direita ou esquerda. No máximo tem esquerda/direita os bits, mas é bem mais baixo nível (pesquisa por right most bits/ left most bits se tem curiosidade sobre os detalhes).

@Don_Draper existem maneiras de executar o JS antes/depois sem ser necessariamente na ordem de carregamento, mas antigamente era assim mesmo. Hoje em dia é mais comum carregar tudo junto (exceto no primeiro load que o navegador não sabe que tem que buscar esses arquivos JS).

Faz mais sentido você carregar os .js no final, pois em geral o JavaScript vai interagir com os elementos da página (DOM) e o CSS.

Se você executa uma função JS que, por exemplo, altera a cor de uma DIV, e essa DIV não está renderizada, vai dar uma falha,

Hoje o JS está bem avançado nessas questões de load, tem import/export que deixaram tudo mais fácil de controlar e mais rápido.

@a.Brenner

Tem n maneiras de importar JS no navegador (ou fora dele - NodeJS)

pegando o caso de sites você pode

1 - colocar o código dentro de uma <script> tag como faziam os neanderthais
2 - importar de um CDN
3 - importar com um bundler tipo webpack, que reúne diversos códigos e mapeia para um só


A dúvida é: no processo de leitura do computador, o .js já é automaticamente lido quando importado pelo html? Ou a leitura do js somente inicia a partir de um determinado gatilho?

Depende de como você importou e como você configurou

Uma questão interessante que não consegui entender ainda é a seguinte... Se o arquivo .js já é lido/importado automaticamente com a abertura do documento em HTML, como o comptuador o trata? Ele fica lendo e relendo o código várias vezes, como um while sem fim, ou ele lê uma vez e não havendo nenhum gatilho/função para automatizar o documento ele simplesmente para e a página volta a ser tornar algo estático, sem dinamismo?

Também vai depender de como você importou e o que tem no código. Faz um teste aí: aperta F12, clica em console, e digita

console.log('hello world')




Pronto, seu browser acabou de ler um JS e fim
Poderia ter um loop com alguma condição para ficar rodando até a condição ser atingida, poderia ser um script mais avançado async que aguardasse dados de alguma API, etc
Tudo vai depender :) não tem como ser específico aqui, espero que dê para entender hehehe

Para entender melhor porque existem tantas maneiras de usar JS e todas são 'válidas', e o que é mais usado hj em dia, esse artigo explica bem:

Modern JavaScript Explained For Dinosaurs

@hcljunior @don_draper

postado por @Don_Draper em 11/11/2022 15:27

Depende de como vc declara no seu código, me corrijam se estiver errado, mas é comum declarar o JS só no final do HTML, para que seja executado após carregar todo o conteúdo, ou seja é top-down

Pode importar em qualquer lugar, geralmente na head, e colocar um defer

assim só executa quando terminar de carregar

<script src="teste.js" defer></script>

If
defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing

HTML script defer Attribute

Acho que a pergunta dele foi mais a nível de entender como funciona por debaixo dos panos...

Em tese javascript é uma linguagem interpretada, o que significa que ele vai ler sim nessa ordem aí.

Gatilhos funcionam desde que o método já tenha sido lido pelo interpretador. Lembre-se que o interpretador é um programa. Ele tem memória. Ele tem cache, ele é capaz até mesmo de otimizar seu código.

Se ele já passou por aquele método, ele pode gravá-lo e mantê-lo em memória, enquanto aquele js estiver sendo interpretado.

Mas de verdade mesmo saber como funciona só lendo o código do interpretador, afinal cada interpretador pode se comportar de uma forma diferente.

No caso, os navegadores mais modernos usam o Webkit.  WebKit

O fonte do webkit dá uns 2 GB, então é bastante coisa, mas você pode baixá-lo se quiser entender de fato como funciona.

Ao contrário de linguagem interpretada, as linguagens compiladas (C, C++ por ex) resultam em um binário de linguagem de máquina (OPCODES + Data) passível de ser lido pelo Sistema Operacional alvo da compilação.

Ele vai ser lido sempre da mesma forma, pois não depende de outro programa. 

Um javascript não é compilado, então seu comportamento final será determinado pelo programa interpretador.

@FlyCavok




AdendoArt.Origem do Selo128 posts

Is JavaScript interpreted by design? - Software Engineering Stack Exchange