He estado trabajando en desarrollo frontal durante más de un año, y todavía tengo algunas ideas sobre el front-end. Hoy compartiré contigo.
Varias herramientas poderosas son indispensables para el desarrollo frontal. Por ejemplo, estoy acostumbrado a usar Google Browser y Heavy Weapon Fiddller.
1: situación original
Primero, echemos un vistazo al siguiente código:
La copia del código es la siguiente:
< %@ Página lenguaje = "C#" AutoeventWireUp = "True" CodeBeHind = "Default.aspx.cs" heredes = "jsload.default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</ablo>
<Body>
<img src = "1.jpg" />
</body>
</html>
Se estima que el 90% de los programadores pondrán archivos JS en la cabeza, pero ¿alguna vez ha profundizado? Muchos navegadores utilizarán un solo hilo para hacer "actualización de la interfaz de usuario de la interfaz" y "procesamiento de script JS".
Es decir, cuando el motor de ejecución encuentra "<script>", la descarga y la representación de la página deben esperar a que se complete la ejecución de <script>. Entonces es triste para el usuario, mirando la página bloqueada,
En este momento, el usuario probablemente lo apagará por usted.
Desde el diagrama de cascada anterior podemos ver dos puntos:
Primero:
Tres archivos JS se descargan en paralelo, pero de acuerdo con mi teoría anterior, JS debe ejecutarse uno por uno. Sin embargo, en IE8, Firefox 3.5 y Chrome 2 implementan descargas paralelas de JS.
Esto es bastante bueno, pero aún obstaculizará la descarga de otros recursos, como imágenes.
segundo:
La descarga de la imagen 1.jpg se activa después de que se completa la ejecución JS, lo que también verifica la situación mencionada anteriormente y evita que la imagen se carga.
Dos: el primer paso es la optimización
Dado que JS previene la representación de la interfaz de usuario, podemos considerar poner a JS frente a </body>, de modo que el HTML antes de <script> se pueda representar perfectamente sin dejar que los usuarios vea la página en blanco esperando.
Y la situación angustiada aumenta naturalmente la amistad.
La copia del código es la siguiente:
< %@ Página lenguaje = "C#" AutoeventWireUp = "True" CodeBeHind = "Default.aspx.cs" heredes = "jsload.default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</ablo>
<Body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
La siguiente figura también muestra que 1.jpg y tres js se descargan y ejecutan casi en paralelo. El tiempo se reduce de "469ms+" arriba a "326ms".
Tres: el segundo paso de optimización
Mirando el "diagrama de cascada" arriba, supongo que todos también pueden ver que los tres archivos JS hicieron tres solicitudes de "obtener". Todos saben que las solicitudes obtienen los encabezados HTTP.
Por lo tanto, lleva tiempo, por lo que la solución que adoptamos es naturalmente para reducir las solicitudes. Por lo general, hay dos opciones.
Primero: Fusionar archivos JS, como fusionar los anteriores "Hello.js" y "World.js" se fusionan.
Segundo: use herramientas de terceros, como Miniify en PHP.
Con respecto al segundo método, Taobao se usa bastante. Eche un vistazo a uno de los scripts y aplica tres archivos JS. Cambiar de 3 solicitudes de obtener a 1.
Cuarto: el tercer paso de optimización
Ya sea que esté colocando el archivo JS al final del pie o combinando tres en uno, su esencia es el "modo de bloqueo", lo que significa bloquear el navegador. Cuando la página web se vuelve cada vez más compleja, hay más y más archivos JS, o
Lo que nos hace dolor de cabeza, en este momento, abogamos por un "modo de no bloqueo" para cargar scripts JS, es decir, se presentan todas las páginas y luego se agrega JS, que corresponde al activador del evento Window.onload.
Agregar JS es el llamado "sin bloqueo", pero una cosa a la que debe prestarse atención es si nuestros requisitos para JS están en orden estricto.
Primero: no hay requisito de pedido. Por ejemplo, si no tengo un requisito de pedido para "Hello.js" y "World.js", entonces podemos usar jQuery para agregarlo dinámicamente.
La copia del código es la siguiente:
< %@ Página lenguaje = "C#" AutoeventWireUp = "True" CodeBeHind = "Default.aspx.cs" heredes = "jsload.default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</ablo>
<Body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
window.onload = function () {
$ ("#Head"). Append ("<script src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#Head"). Append ("<script src = 'js/world.js' type = 'text/javascript'> <// script>");
}
</script>
</body>
</html>
Como se puede ver en la figura, "Hello.js" y "World.js" aparecen en la línea azul, lo que significa que estos dos J se activan para cargarse después de que se termine el DomContentLoad, para que la página no se bloquee.
esperar.
Segundo: hay requisitos de pedido
¿Por qué tiene que ser necesario para tener pedido? Para el archivo "Two JS" adjunto dinámicamente arriba, en la serie IE, no puede garantizar que Hello.js se ejecutará antes de World.js.
Solo ejecutará el código en el orden devuelto por el lado del servidor.
La copia del código es la siguiente:
< %@ Página lenguaje = "C#" AutoeventWireUp = "True" CodeBeHind = "Default.aspx.cs" heredes = "jsload.default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</ablo>
<Body>
<img src = "1.jpg" />
<script type = "text/javaScript">
function loadScript (url, devolución de llamada) {
var script = document.createElement ("script");
script.type = "text/javaScript";
//ES DECIR
if (script.readyState) {
script.onreadystateChange = function () {
if (script.readyState == "cargado" || script.readyState == "completo") {
script.onreadyStateChange = null;
llamar de vuelta();
}
}
} demás {
// no II
script.Onload = function () {
llamar de vuelta();
}
}
script.src = url;
document.getElementById ("Head"). AppendChild (script);
}
// El primer paso es cargar la biblioteca de clases jQuery
loadScript ("jQuery/jQuery-1.4.1.js", function () {
// El segundo paso es cargar hola.js
loadScript ("js/hello.js", function () {
// El tercer paso es cargar World.js
loadScript ("js/world.js", function () {
});
});
});
</script>
</body>
</html>
Como también puede ver, el tiempo que tarda la página en cargarse completamente es en realidad solo unos 310 ms, lo que mejora enormemente la descarga y la apariencia amigable de la página web.
También puede consultar tencent.com, que es lo que hace.
¿No es muy útil? He pasado algún tiempo haciendo estas investigaciones y pruebas aquí. Espero que puedas verlo en tu corazón. Después de todo, esta es también la solución de la compañía "Mahua Vine". Consulte ello.