Hay mucho código JavaScript en las aplicaciones web ahora, y siempre estamos buscando varias soluciones que las hagan más rápido.
1. Utilizamos la proxy de eventos para que el monitoreo de eventos sea más eficiente.
2. Utilizamos la tecnología de desacreditación de funciones para limitar el número de veces que se llama un método dado dentro de un período de tiempo. Consulte: Cómo evitar la activación de las funciones de eventos de alta frecuencia (traducción al chino)
3. Utilizamos un cargador JavaScript para cargar la parte de los recursos que realmente necesitamos, etc.
Hay otra forma de hacer que nuestra página sea más rápida y eficiente. Eso es agregar y eliminar dinámicamente ciertos estilos en la hoja de estilo a través de JS, en lugar de consultar constantemente elementos DOM y aplicar varios estilos. Así es como funciona.
Obtenga la hoja de estilo
Puede elegir cualquier hoja de estilo para agregar reglas de estilo. Si tiene una hoja de estilo definida, puede agregar un atributo de ID a la etiqueta <link> o <style> en la página HTML, y luego puede obtener el objeto CSSStylesheet directamente a través del atributo de hoja de este elemento DOM. Las hojas de estilo también se pueden atravesar a:
La copia del código es la siguiente:
// Devuelve una lista de estilos de lista de estilo de matriz (como una matriz)
VAR HOJAS = Document.stylesheets;
/*
El valor de retorno es similar al siguiente:
StylesheetList
{
0: Cssstylesheet,
1: CSSStylesheet,
2: CSSStylesheet,
3: Cssstylesheet,
4: CSSStylesheet,
Longitud: 5,
Elemento: función
}
*/
// Obtenga la primera hoja, ignorando el atributo de medios
Var hoja = document.stylesheets [0];
A lo que debe prestar especial atención es el atributo de medios de la hoja de estilo: cuando desea mostrarla en la pantalla, no debe agregar reglas CSS a la hoja de estilo de impresión. Puede echar un vistazo más de cerca a la información del atributo del objeto CSSStylesheet:
La copia del código es la siguiente:
// La consola genera la información de la primera hoja de estilo
console.log (document.stylesheets [0]);
/*
Valor de retorno:
Hoja de cssstyles
CSSRULES: CSSRULELISTA [Objeto]
Desactivado: falso
href: "http://davidwalsh.name/somheet.css"
Medios: medialista [objeto]
Propiedad: enlace [objeto]
OwnErrule: NULL
PadreStyles Hoje: NULL
Reglas: CSSRULELISTA [objeto]
Título: NULL
Tipo: "Texto/CSS"
*/
// Obtener tipo de medios (tipo de medios)
console.log (document.stylesheets [0] .media.mediatext)
/*
El valor de retorno puede ser:
"Todos" o "Imprimir" u otros medios aplicados a esta hoja de estilo
*/
En todos los casos, definitivamente tiene una manera de obtener la hoja de estilo para agregar las reglas.
Crea una nueva hoja de estilo
En muchos casos, la mejor manera de hacerlo podría ser crear un nuevo elemento <estilo> para almacenar estas reglas dinámicas. Esto también es muy simple:
La copia del código es la siguiente:
VAR SHOED = (function () {
// crear <estilo> etiqueta
Var style = document.createElement ("estilo");
// puede agregar un atributo de medios (/consulta de medios, consulta de medios)
// style.setattribute ("medios", "pantalla")
// style.setattribute ("medios", "solo pantalla y (width máximo: 1024px)")
// para WebKit Hack :(
style.appendChild (document.createTextNode (""));
// Agregar <estilo> elemento a la página
document.head.appendChild (estilo);
Estilo de retorno. Hoja;
}) ();
La tragedia es que WebKit necesita un pequeño truco para crearse correctamente, pero solo necesitamos preocuparnos por esta hoja.
Regla de insertar
En versiones anteriores de IE, el método de insertrule de las hojas de estilo no estaba disponible, aunque ahora es el estándar para la inyección de reglas. El método InserTrule requiere escribir toda la regla CSS, que es lo mismo que en la hoja de estilo:
La copia del código es la siguiente:
sheet.insertule ("Header {float: izquierda; opacidad: 0.8;}", 1);
Aunque este método API de JavaScript se ve un poco rústico, funciona así. El segundo índice de parámetros indica la ubicación (índice) que se insertará en la regla. Esto también es muy útil para que pueda insertar la misma regla/código, lo que permite que las reglas posteriores entren en vigencia. El índice predeterminado es -1, que representa el final de todo el conjunto. Si desea tener reglas de control adicionales/perezosas, también puede agregar etiquetas importantes a una determinada regla para evitar problemas de indexación.
Agregar reglas: método de AddRule no estándar
El objeto CSSStylesheet tiene un método AddRule que le permite registrar las reglas CSS en la hoja de estilo. El método AddRule acepta tres parámetros: el primer parámetro es el selector, el segundo parámetro es el código de regla CSS, y el tercero es el índice entero que comienza desde 0, lo que indica la posición del estilo (en el mismo selector):
La copia del código es la siguiente:
sheet.Addrule ("#mylist li", "float: izquierda; fondo: rojo! importante;", 1);
El valor de retorno del método Addrule siempre es -1, por lo que este valor no tiene importancia práctica.
Recuerde, la ventaja de este enfoque es que los elementos agregados desde la página tienen automáticamente los estilos aplicados a ellos, lo que significa que no tiene que agregarlos a elementos específicos, sino inyectándolos directamente en la página. ¡Por supuesto, más eficiente!
Reglas de solicitud de seguridad
Debido a que no todos los navegadores admiten el método InserTrule, es mejor crear una función de envoltura para manejar la aplicación de la regla. Aquí hay una forma rápida de hacerlo:
La copia del código es la siguiente:
function addcssrule (hoja, selector, reglas, índice) {
if ("insertule" en la hoja) {
sheet.insertule (selector + "{" + reglas + "}", index);
}
else if ("addrule" en la hoja) {
sheet.addrule (selector, reglas, índice);
}
}
// Cómo usar
addcssrule (document.stylesheets [0], "encabezado", "flotar: izquierda");
Este método de herramienta debe cubrir todos los casos en los que se agregan nuevas reglas de estilo. Si está preocupado por los errores en su aplicación, debe envolver el código para el método con un bloque de try {} capt (e) {}.
Insertar reglas de consulta de medios
Hay dos formas de agregar reglas de consulta de medios. El primero es usar el método estándar de insertrule:
La copia del código es la siguiente:
sábana.
"@media solo pantalla y (max-width: 1140px) {encabezado {display: none;}}"
);
Por supuesto, debido a que la versión anterior de IE no admite InserTrule, otra forma es crear un elemento de estilo, especificar el atributo de medios apropiado y luego agregar el estilo a la nueva hoja de estilo. Esto puede requerir el uso de elementos de estilo múltiple, pero también es fácil. Podría crear un objeto, especificar la consulta de medios, así como el índice, y crear/obtenerlo así.
Agregar dinámicamente reglas a las hojas de estilo es un método eficiente, y puede ser más fácil de lo que piensas. Recuerde que esta solución puede necesitar usarse en su próxima gran aplicación, ya que puede evitar que caiga en el pozo tanto en el procesamiento de código como en elementos.