79
votos
Aceito
Qual a diferença entre $(document).ready() e window.onload?
O evento ready é disparado depois que o documento HTML foi carregado.
O onload só é disparado quando todo o conteúdo é carregado (incluindo imagens, vídeos, etc).
Repare que o ready é específico do ...
- 69,2mil
69
votos
Aceito
Porque usar getElementById se o id está no window?
O facto de elementos nomeados* fazerem parte das propriedades de document e/ou window é uma infelicidade, fruto de aplicações bem simples que havia há muitos anos, no inicio do DOM e JavaScript.
...
- 135mil
36
votos
Aceito
Criar elemento no HTML com JavaScript (appendChild vs innerHTML)
appendChild vs innerHTML
O appendChild não causa uma reconstrução completa do DOM ou mesmo todos os elementos / nós dentro do alvo.
O innerHTML causar uma reconstrução completa do conteúdo do ...
- 16,1mil
29
votos
Porque usar getElementById se o id está no window?
Antes de existirem padrões para o HTML, CSS e javascript quem definia isto eram os browsers, ou seja cada browser tinha a sua maneira de fazer as coisas, como por exemplo cada um tinha uma maneira de ...
- 100mil
29
votos
Aceito
O que é shadow DOM?
Shadow DOM
O shadow DOM, ou shadow tree, é uma árvore de nós HTML assim como qualquer outra árvore que já conhecemos (a light tree), mas que é anexada a um elemento específico da light tree, não ao ...
- 75,9mil
26
votos
Por que é considerado errado/ruim repetir uma ID em HTML?
Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido ...
- 64,6mil
18
votos
Aceito
Como verificar undefined de maneira correta no Javascript
O mais correto é utilizar typeof variavel === "undefined", pois undefined pode ser sobrescrito utilizando window.undefined, fazendo com que a comparação variavel === undefined retorne valores ...
17
votos
Aceito
Exibir muitos elementos no DOM pode prejudicar a performance?
Ter muitos elementos no DOM poderia prejudicar a performance?
Sim, e vamos analisar dois aspectos:
memória - quanto mais elementos o DOM tiver, obviamente mais memória irá consumir, abaixo coloquei ...
- 22,6mil
16
votos
Aceito
O que é parse, e como funciona o parse do DOM no HTML5?
Parsing
O parser é um analisador sintático. Sua função é ler uma entrada de dados que possuem certas regras específicas - em geral é um texto reconhecível por humanos - e montar uma estrutura de como ...
- 475mil
16
votos
Por que é considerado errado/ruim repetir uma ID em HTML?
É errado porque está na especificação do HTML que o ID deve ser único. (Inclusive, se você olhar no documento linkado, que é a especificação oficial do HTML 5, é usada a palavra em inglês "must" - que ...
- 31,4mil
15
votos
Por que é considerado errado/ruim repetir uma ID em HTML?
Ao meu ver atrapalha também no HTML, caso vc use ancoras internas na página normalmente se usa href="#link" e no elemento que sera ancorado o id="link".
Se vc usar o id="link" em vários elementos a ...
- 66,6mil
14
votos
Qual a diferença entre $(document).ready() e window.onload?
O evento ready ocorre depois que o documento HTML foi carregado, enquanto o evento onload ocorre mais tarde, quando todo o conteúdo (por exemplo, imagens) também foi carregado.
O evento onload é um ...
- 4.578
13
votos
Como verificar undefined de maneira correta no Javascript
As duas verificações que você mencionou servem para coisas diferentes.
1. Variáveis não declaradas
Se uma variável não foi declarada, com var variável = ..., você não pode usá-la em comparações de ...
- 65,9mil
11
votos
Aceito
document.getElementById('ID').func(....) vs ID.func(...)
Basicamente é um problema de visibilidade. O que acontece se o seu id for uma propriedade do objeto window? Não sei se sabe, todas propriedades que você acessa globalmente ou estão em window.
O ...
- 475mil
9
votos
Como verificar undefined de maneira correta no Javascript
Depende do que você quer testar:
Se existe ou não uma variável com esse nome
Nesse caso, eu tentaria fazer uma operação com ela e observaria um ReferenceError:
var x;
try {
x + 1;
...
- 82,3mil
9
votos
$ e $$ agora são funções nativas dos navegadores?
Isso são métodos somente da consola, atalhos para facilitar o programador.
Isso confirma-se na documentação do Chrome aqui e na documentação do Edge aqui onde diz:
$() é um atalho para document....
- 135mil
8
votos
Criar elemento no HTML com JavaScript (appendChild vs innerHTML)
Eu costumo gerar sempre via string. Monto sempre identado para que eu tenha, assim que bater o olho, a visão do que aquelo código representa.
Exemplo:
var htmlTabela = "<table> ...
- 12mil
8
votos
A ordem dos estilos CSS influenciam a árvore de renderização?
Eu já havia me feito essa pergunta antes :)
Nessa pergunta similar do SO, as respostas dizem que não: Are there speed benefits of putting CSS attributes in alphabetical order?
Embora não tenha ...
- 22,6mil
8
votos
Aceito
Qual a diferença entre usar o appendChild e o insertAdjacentHTML?
appendChild insere um elemento html ao DOM, no final da lista de filhos, por isso precisa criar um elemento:
let aBlock = document.createElement('block').appendChild( document.createElement('b') );
...
- 22,6mil
7
votos
Criar elemento no HTML com JavaScript (appendChild vs innerHTML)
Bom dia,
bom, imagine a situação que você tem uma tabela que possui temas diferentes de acordo com o horário, de dia a tabela é clarinha e de noite a tabela é mais escura, você terá classes para esta ...
7
votos
A ordem dos estilos CSS influenciam a árvore de renderização?
Interessante tópico, sempre acreditei que a ordem não influenciaria porém ajudaria numa leitura de código.
No Tableless, tem um artigo um pouco antigo não fala de performance mas sugere algumas boas ...
- 71
7
votos
Aceito
Como varrer um array e inserir os elementos no HTML com JS
Existem outras diferentes formas de se criar elementos DOM, aproximando ao teu exemplo pode criar da seguinte forma:
function gerar(){
let nomes = ["Diego", "Gabriel", "Lucas"];
let ...
- 3.942
6
votos
Aceito
Adicionar propriedades ao elemento [Node]
É algo que geralmente se recomenda evitar. Principal motivo: você pode acabar causando uma colisão de nome com uma propriedade que venha a ser futuramente implementada no DOM. Então, mesmo que hoje o ...
- 65,9mil
6
votos
Como funciona o processo de renderização das página web pelo browser?
Não existe algo especifico, isso não ocorre no front-end de fato, ou é dependente de javascript ou algo assim, a questão é que internamente um navegador tem um "motor" (mais de um) baseado em "...
- 100mil
6
votos
Aceito
A ordem dos estilos CSS influenciam a árvore de renderização?
De acordo com o artigo
Quantum Up Close: What is a browser engine?, o mecanismo do navegador lê toda a folha de estilo CSS para então, finalmente, usar a style engine e pegar o CSS para aplicar ao DOM ...
6
votos
Aceito
Ao tentar criar um objeto usando `this` o console diz que a propriedade é undefined
Parte de seus problemas e o entendimento de algumas coisas em seu código, o primeiro que eu vejo é o seu entendimento do this.
O this é o objeto de contexto de execução, sua utilização é um pouco ...
- 4.335
6
votos
Aceito
Qual a diferença entre innerHTML e appendChild no JS?
appendChild(), um método, adiciona um novo elemento ao DOM, portanto é uma ação sendo executada com a clara intenção de expandir o DOM criando um filho para um elemento já existente, não importa o que ...
- 475mil
5
votos
Alterando texto em vários lugares diferentes da página HTML
acredito que a melhor maneira de se fazer isto, é fazendo uso de propriedades data-custom e um json com os valores.
i18n = {};
i18n["pt"] = {
"name": "Nome",
"contact": "Contato"
};
...
- 23,1mil
5
votos
Aceito
Velocidade de renderização de id agrupados vs class
Ferramenta
O Google Chrome tinha um CSS profiler, mas este foi removido porque considera-se que o desempenho do CSS hoje é razoavelmente bom para os casos que eram lentos há alguns anos, então ...
- 74mil
5
votos
Como posso exibir como string qualquer objeto JavaScript?
Acho que podes fazer isso assim:
function stringify(algo) {
function checktype(obj) {
if (!obj || typeof obj == 'number' || typeof obj == 'string') return obj;
if (typeof obj == '...
- 135mil
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
dom × 297javascript × 235
html × 116
jquery × 47
php × 37
html5 × 25
css × 23
javascript-eventos × 10
xml × 7
react × 6
navegador × 6
ajax × 5
array × 5
funções × 5
front-end × 5
table × 5
parser × 5
angularjs × 4
angular × 4
loop × 4
input × 4
eventos × 4
onclick × 4
java × 3
json × 3