Fluxo javascript básico - em vários navegadores
Estou tentando aprender o fluxo em JavaScript com um exemplo muito simples, mas três navegadores (Chrome, IE e Firefox) estão mostrando diferentes padrões de fluxo e diferentes resultados finais. Eu sei que existem problemas entre navegadores que são esperados, mas esse é super simples. Então, eu estou tentando entender como interpretar como o JavaScript realmente flui.
Aqui está o código:
<!DOCTYPE html>
<html>
<head>
<title>Test 01</title>
<script type="text/javascript">
document.bgColor = "red";
</script>
</head>
<body bgColor="yellow">
<p>Paragraph 1</p>
<script>alert("after para 1");</script>
<p>Paragraph 2</p>
<script>alert("after para 2");</script>
<p>Paragraph 3</p>
<script>alert("after para 3");</script>
</body>
</html>
O que estou vendo é que o texto "Parágrafo 1" está aparecendo no Chrome após o alerta e assim por diante com os outros dois alertas também. O IE e o Firefox parecem estar fazendo a coisa certa aqui - mostrando o texto antes do alerta.
E entre o IE e o Firefox, o IE está terminando com um fundo vermelho e o Firefox com amarelo. Portanto, não sei exatamente o que interpretar. O comportamento é diferente para todos os navegadores.
Como você aprende sobre como isso deve funcionar exatamente?
Editar: remover a var x = 10 que não é relevante para esta pergunta. E a questão é como você interpreta o comportamento dos cromos onde o alerta é exibido antes do texto relevante - e também porque o bgcolor está sendo substituído em um caso e não em outros.