Há muitos código JavaScript nos aplicativos da Web agora, e estamos sempre procurando várias soluções que as tornam mais rápidas.
1. Usamos o proxy de eventos para tornar o monitoramento de eventos mais eficiente.
2. Usamos a tecnologia de depuração de funções para limitar o número de vezes que um determinado método é chamado dentro de um período de tempo. Consulte: Como impedir o acionamento de alta frequência das funções de evento (tradução chinesa)
3. Usamos um carregador JavaScript para carregar a parte dos recursos de que realmente precisamos, etc.
Há outra maneira de tornar nossa página mais rápida e eficiente. Isso é para adicionar e excluir dinamicamente certos estilos na folha de estilo através de JS, em vez de consultar constantemente elementos DOM e aplicar vários estilos. Aqui está como funciona.
Pegue a folha de estilo
Você pode escolher qualquer folha de estilo para adicionar regras de estilo. Se você tiver uma folha de estilo definitiva, poderá adicionar um atributo de identificação à tag <link> ou <yoy> na página HTML e, em seguida, você pode obter o objeto CSSSTYLESHEET diretamente através do atributo da folha desse elemento DOM. As folhas de estilo também podem ser atravessadas para:
A cópia do código é a seguinte:
// retorna uma lista de estilo de estilo de matriz (tipo Array)
var sheets = document.stylesheets;
/*
O valor de retorno é semelhante ao seguinte:
Stylesheetlist
{
0: CSSSTYLESHEET,
1: CSSSTYLESHEET,
2: CSSSTYLESHEET,
3: CSSSTYLESHEET,
4: CSSSTYLESHEET,
Comprimento: 5,
Item: função
}
*/
// Obtenha a primeira folha, ignorando o atributo de mídia
var sheet = document.stylesheets [0];
O que você precisa para prestar atenção especial é o atributo de mídia da folha de estilo - quando você deseja exibi -lo na tela, não deve adicionar regras CSS à folha de estilo de impressão. Você pode examinar mais de perto as informações de atributo do objeto CSSSTYLESHEET:
A cópia do código é a seguinte:
// O console gera as informações da primeira folha de estilo
console.log (document.stylesheets [0]);
/*
Valor de retorno:
CSSSTYLESHEET
CSSRULES: CSSRULELELIST [Objeto]
desativado: false
href: "http://davidwalsh.name/somesheet.css"
Mídia: Medialista [Objeto]
Ownernode: link [Objeto]
OwnErrule: NULL
ParentStylesheet: NULL
Regras: CSSRulelist [objeto]
Título: NULL
Tipo: "Texto/CSS"
*/
// Get Media Type (tipo de mídia)
console.log (document.stylesheets [0] .media.mediatext)
/*
O valor de retorno pode ser:
"All" ou "Print" ou outra mídia aplicada a esta folha de estilo
*/
Em todos os casos, você definitivamente tem uma maneira de obter a folha de estilo para adicionar as regras.
Crie uma nova folha de estilo
Em muitos casos, a melhor maneira de fazer isso pode ser criar um novo elemento <estilo> para armazenar essas regras dinâmicas. Isso também é muito simples:
A cópia do código é a seguinte:
var folha = (function () {
// Crie <yoy> tag
var style = document.createElement ("style");
// você pode adicionar um atributo de mídia (/consulta de mídia, mídia)
// style.setattribute ("mídia", "tela")
// style.setattribute ("mídia", "apenas tela e (max-width: 1024px)")
// para hackear webkit :(
style.appendChild (document.createTextNode ("" "));
// Adicionar elemento <estilo> à página
document.head.appendChild (estilo);
Return Style.Sheet;
}) ();
A tragédia é que o WebKit precisa de um pequeno hack para ser criado corretamente, mas precisamos apenas nos preocupar com esta planilha.
Inserir regra
Nas versões anteriores do IE, o método de folhas de estilo Insertrule não estava disponível, embora agora seja o padrão para a injeção de regras. O método Insertrule requer escrever toda a regra CSS, que é a mesma na folha de estilo:
A cópia do código é a seguinte:
Sheet.insertrule ("Cabeçalho {float: esquerda; opacidade: 0.8;}", 1);
Embora esse método da API JavaScript pareça um pouco rústico, funciona assim. O segundo índice de parâmetros indica que o local (índice) a ser inserido na regra. Isso também é muito útil para que você possa inserir a mesma regra/código, que permite que as regras de retorno entrem em vigor. O índice padrão é -1, que representa o final de todo o conjunto. Se você deseja ter regras de controle adicionais/preguiçosas, também pode adicionar! Tags importantes a uma determinada regra para evitar problemas de indexação.
Adicionar regras - Método AddRule não padrão
O objeto CSSStylesheet possui um método AddRule que permite registrar regras CSS na folha de estilo. O método AddRule aceita três parâmetros: o primeiro parâmetro é o seletor, o segundo parâmetro é o código da regra CSS e o terceiro é o índice inteiro que começa a partir de 0, indicando a posição do estilo (no mesmo seletor):
A cópia do código é a seguinte:
Sheet.Addrule ("#MyList Li", "Float: esquerda; fundo: vermelho! IMPORTANTE;", 1);
O valor de retorno do método AddRule é sempre -1, portanto esse valor não tem significado prático.
Lembre -se de que a vantagem dessa abordagem é que os elementos adicionados à página têm os estilos automaticamente aplicados a eles, o que significa que você não precisa adicioná -los a elementos específicos, mas injeta -os diretamente na página. Claro, mais eficiente!
Regras de aplicação de segurança
Como nem todos os navegadores suportam o método Insertrule, é melhor criar uma função de wrapper para lidar com o aplicativo de regra. Aqui está uma maneira rápida de fazer isso:
A cópia do código é a seguinte:
função addcssrule (folha, seletor, regras, índice) {
if ("insertrule" na folha) {
Sheet.insertrule (seletor + "{" + Regras + "}", index);
}
else if ("addRule" na folha) {
Sheet.addrule (seletor, regras, índice);
}
}
// Como usar
addcssrule (document.stylesheets [0], "cabeçalho", "float: esquerda");
Este método de ferramenta deve cobrir todos os casos em que novas regras de estilo são adicionadas. Se você estiver preocupado com os erros em seu aplicativo, envolva o código do método com um bloco Try {} Catch (e) {}.
Insira regras de consulta de mídia
Existem duas maneiras de adicionar regras de consulta de mídia. O primeiro é usar o método Insertrule padrão:
A cópia do código é a seguinte:
Sheet.insertrule (
"@media somente tela e (max-width: 1140px) {cabeçalho {display: None;}}"
);
Obviamente, como a versão antiga do IE não suporta o Insertrule, outra maneira é criar um elemento de estilo, especificar o atributo de mídia apropriado e adicionar o estilo à nova folha de estilo. Isso pode exigir o uso de vários elementos de estilo, mas também é fácil. Eu posso criar um objeto, especificar a consulta de mídia e o índice e criá -los assim.
Adicionar regras dinamicamente às folhas de estilo é um método eficiente e pode ser mais fácil do que você pensa. Lembre -se de que essa solução pode precisar ser usada em seu próximo grande aplicativo, pois pode impedir que você caia no poço no processamento de código e elemento.