Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost

[sk1pp3r]

Hola, buenas tardes a todos.

Tengo una pagina llamada index.php en donde se incluyen algunos archivos locales de estilos (.css) y javascript (.js) y de esos archivos incluidos tengo algunos en donde solo uso pocos estilos de css y otras pocas funciones de js de los archivos vinculados. Pero como esos archivos son demaciados grandes (de mas de 22,000 lineas, son de por ejemplo bootstrap 3 -se que en la pagina de bootstrap te permite personalizar las funciones a descargar y tambien se de la existencia de los .min. Sin embargo esto que busco lo hago por temas de mantenimiento de codigo mas facil para mi) entonces quiero reducir el numero de lineas y dejar SOLO LAS USADAS y LLAMADAS por mi index.php. Sin embargo descartar manualmente las lineas de codigo que no le sirven a mi index (porque no las llama) es una tarea hasta cierto punto compleja y toma mucho tiempo.

Entonces las preguntas que tengo son las siguientes:

1. Incluir esos grandes archivos .css y .js ponen lento mi servidor?
2. Cuando un visitante haga uso de index.php, el hecho de tener agregados (<link rel="...<script src="...) grandes .css y .js hace lenta la carga de la pagina al visitante?
3. Existe alguna herramienta tipo Web Developer para descartar las lineas de codigo inservibles de mis .css y .js? De ser asi cuales existen?
4. Se puede obtener unicamente el codigo .css y .js necesario en mi index desde la herramienta "inspeccionar" de google chrome?

De antemano gracias y saludos.

[AlbertoBSD]

Muy buen dia.

Son buenas preguntas, yo en lo personal he usado Boostrap y me funciona bien, Yo incluyo el archivo desde del servidor maxcdn.bootstrapcdn.com y el jquery desde el servidor de google

Código (html4strict) [Seleccionar] Expandir


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


Realmente tenerlos no ralentiza tu servidor dependiendo del numero de visitas que tengas, ademas los usuarios solo pedirán el archivo la primera vez, posteriormente ellos cargaran el archivo desde la cache del navegador que usen.

Con respecto a las otras preguntas no tengo experiencia en ello.

[MinusFour]

Entonces las preguntas que tengo son las siguientes:

1. Incluir esos grandes archivos .css y .js ponen lento mi servidor?
2. Cuando un visitante haga uso de index.php, el hecho de tener agregados (<link rel="...<script src="...) grandes .css y .js hace lenta la carga de la pagina al visitante?
3. Existe alguna herramienta tipo Web Developer para descartar las lineas de codigo inservibles de mis .css y .js? De ser asi cuales existen?
4. Se puede obtener unicamente el codigo .css y .js necesario en mi index desde la herramienta "inspeccionar" de google chrome?

De antemano gracias y saludos.

1. Servir un documento en tu servidor siempre tiene un costo. Entre más grande el archivo, más tarda el usuario en descargarlo, lo que significa que es posible que tengas más usuarios descargando el archivo al mismo tiempo. Consumes ancho de banda extra y posiblemente congestiones tu servidor un poquito más. Configurando bien las cabeceras para utilizar la cache correctamente ayuda bastante. También tienes servicios externos como las CDNs que te permiten ser más eficientes en cuanto a servir estos documentos estáticos.

2. Si y no. En el caso de javascript, cuando el navegador encuentra una etiqueta <script> con un atributo src, el navegador tiene que descargar, ejecutar ese código en javascript y posteriormente traducir el resto del documento (incluyendo otras etiquetas <script>). Hay nuevos atributos para la etiqueta <script> que permiten seguir trabajando en el resto del documento mientras el archivo de javascript está descargándose (async y defer). Si tu pones la etiqueta <script> hasta el final, el resto de tu documento se carga tan rápido como puede y la descarga del documento se realiza al final. Son apariencias más que nada, la etiqueta <script> no tiene ninguna representación visual en el navegador, pero los otros elementos sí. Estas técnicas le dan prioridad a los elementos que necesitan ser representados en el navegador, dando la alusión de una carga más rápida.

En el caso de CSS no estoy seguro, creo que hasta ahora siempre debería bloquear hasta que el archivo haya sido descargado (al menos para <link rel=''>. Me parece que si usas @import, el archivo se baja en paralelo, pero los estilos se aplican al final (realmente no lo he probado). Si es así, tu documento se carga sin estilos (horrible) y al final adquiere forma.

3. Lo dudo mucho. Sería un esfuerzo coordinado entre HTML, JS y CSS. Por ejemplo, considera:

Código (CSS) [Seleccionar] Expandir


elemento.clase {
 /** propiedades **/
}

¿Como puede está herramienta descartar esta declaración? Para que está herramienta considere este código inútil necesitaría revisar en tu archivo HTML por una etiqueta "elemento" con un atributo clase que contenga "clase". Hasta aquí es más que posible. Sin embargo, al meter javascript la situación se complica todavía aún más. Ahora está herramienta tiene que encontrar los scripts siendo corridos en el navegador y analizar las interacciones con el DOM para descartar que en ningún momento el elemento y la clase se presenta en el DOM. En mi opinión esto es bastante complicado. Encima, considera que diversos scripts pueden ser cargados condicionalmente a través de otros scripts.

En cuanto a quitar funciones que no utilizas de javascript, no estoy seguro si eso sea posible. Considera:

Código (javascript) [Seleccionar] Expandir


function noMeLlaman(){

}

function meLLaman(){

}

if(cond1){
 noMeLlaman(); //nunca ocurre por configuracion
} else {
 meLlaman();
}

Para que tu herramienta descarte la función "noMeLlaman()" tendría que cerciorarse que la condición nunca se cumple, lo cual es muy difícil de lograr en un lenguaje en el que permite mutaciones. Para algunas condiciones si es posible eliminar la función, inclusive eliminar el código inútil. Digamos que tu herramienta considera que ambas funciones son necesarias (porque son utilizadas en tu función) y quieres remover las funciones que no son llamadas.

Considera:

Código (javascript) [Seleccionar] Expandir


var obj = {
  handler : function(){

  },
  fn : function(){
     this.handler();
  }
}

if(cond1){
   obj.handler = function(){
   };
}


Mismo problema. ¿Que función remueves y cual no?



4. Sí, el código se puede inspeccionar fácilmente.