2008 13 de setembro de 2008

JavaScript: Editar página web no navegador

Bem, devo dizer, não como uma peça útil da ciência, mas se você for um desenvolvedor Web, pode vir a calhar, um dia (ou será?). Aqui é pequeno bookmarklet, que permite editar a página na web para qualquer site.
E Sorry! Você pode salvar os resultados em sua máquina local.

javascript: document.body.contentEditable = 'true'; document.designMode = 'on' void 0


2008 15 de maio de 2008

Melhores Práticas: Trabalhando com JavaScript

Incluir JavaScript na parte inferior do documento HTML

Se você não tem document.write (ou qualquer geração dinâmica de conteúdo da página usando javascripts) para inserir parte do conteúdo da página em seus scripts, mover o script include para a parte inferior da página, antes do final da tag BODY.
A especificação HTTP/1.1 sugere que os navegadores não baixar mais de dois componentes em paralelo por hostname. Se você servir suas imagens a partir de nomes de hosts múltiplos, você pode obter mais de dois downloads para ocorrer em paralelo. Enquanto um script está baixando, no entanto, o navegador não irá iniciar nenhum download outros, mesmo em nomes de máquinas diferentes.
Existem também as formas para criar dinamicamente nós script e carregar scripts remotos após a página ser carregada usando AJAX.

Externalizar você JavaScript

Usando arquivos JavaScript externos vai resultar em mais rápido carregamento das páginas, pois os arquivos JavaScript são armazenados em cache pelo navegador. 'Inline JavaScript em documentos HTML são baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reduzir o número de pedidos HTTP feitas mas subsequentemente aumenta o tamanho do documento HTML. Externo JavaScript são armazenados em cache pelo navegador, o tamanho do documento HTML é reduzido sem aumentar o número de solicitações HTTP.
Por favor note que, se os usuários do seu site tem várias exibições de página por sessão e muitas das suas páginas reutilizar os mesmos scripts e folhas de estilo, há um benefício maior potencial de cache de arquivos externos.

Embale seus arquivos JavaScript

Em caso de JavaScripts, ao contrário do CSS, os arquivos podem crunched usando alguns algoritmos padrão que daria um tamanho de arquivo menor do que a simples remoção de espaços ou tabulações. Um exemplo de javascript empacotador pode ser encontrada aqui http://dean.edwards.name/packer/

Livrar-se de quaisquer scripts duplicados

É muito raro que os scripts inteiros podem ser duplicados, mas uma revisão dos dez principais sites dos Estados Unidos da web mostra que dois deles contêm um script duplicado. Duplicar scripts, mas, obviamente, reduz o desempenho através da criação de solicitações desnecessárias de HTTP e desperdiçou a execução de JavaScript.
Além disso, em muitos casos, embora os nomes scripts são diferentes, existe uma probabilidade de scripts duplicados na mesma página devido ao tamanho da equipe e número de scripts.

Minimizar acesso a elementos DOM, sempre que possível

Acessando elementos DOM com JavaScript é tão lento, a fim de ter uma página mais interativa, você deve:
• As referências a elementos de cache acessados
Nós • Atualizar "offline" e, em seguida, adicioná-los à árvore
• Evite fixar layout com JavaScript

Comportamento separado de Conteúdo e Apresentação

Assim como nós Apresentação separado (CSS / XSLT) de conteúdo (XHTML / XML), também devemos separar Comportamento (Javascript). Isto é chamado Javascript discreto. Assim como vincular a arquivos CSS externos, devemos vincular a arquivos externos JavaScript.

Em vez de codificação comportamento rígido para o conteúdo (por exemplo, onmouseover, onclick, etc), o comportamento deve ser dinamicamente adicionados elementos, classes e elementos únicos (IDS), usando o DOM. O documento fundamental, o conteúdo, deve conter apenas XHTML / XML e não javascript.
Javascript deve aumentar o conteúdo, adicionando comportamento. O conteúdo deve permanecer útil e utilizável sem javascript (ou sem suporte javascript completo).


NDK casa | Expressando IT | Palate Expressando | Penmenship Expressando | Awe Expressando | expressar-me