elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost  (Leído 3,411 veces)
sk1pp3r

Desconectado Desconectado

Mensajes: 51


Ver Perfil
Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost
« en: 9 Mayo 2016, 03:38 am »

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.


En línea

AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.619


🏴 Libertad!!!!!


Ver Perfil WWW
Re: Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost
« Respuesta #1 en: 9 Mayo 2016, 07:17 am »

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
  1. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  3.  

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.


En línea

Donaciones
1Coffee1jV4gB5gaXfHgSHDz9xx9QSECVW
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.336


I'm fourth.


Ver Perfil WWW
Re: Como detectar que codigo JS y CSS se usa en una pagina html y/o PHP en localhost
« Respuesta #2 en: 9 Mayo 2016, 16:36 pm »

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
  1. elemento.clase {
  2.  /** propiedades **/
  3. }

¿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
  1. function noMeLlaman(){
  2.  
  3. }
  4.  
  5. function meLLaman(){
  6.  
  7. }
  8.  
  9. if(cond1){
  10.  noMeLlaman(); //nunca ocurre por configuracion
  11. } else {
  12.  meLlaman();
  13. }

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
  1. var obj = {
  2.   handler : function(){
  3.  
  4.   },
  5.   fn : function(){
  6.      this.handler();
  7.   }
  8. }
  9.  
  10. if(cond1){
  11.    obj.handler = function(){
  12.    };
  13. }
  14.  

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



4. Sí, el código se puede inspeccionar fácilmente.
« Última modificación: 9 Mayo 2016, 16:38 pm por MinusFour » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
codigo de pagina html a variable o array????
PHP
gm-vl 3 1,479 Último mensaje 3 Agosto 2007, 11:31 am
por Agente Naranja
Detectar elemento y rellenar en página web html?
Programación Visual Basic
usuario oculto 0 2,059 Último mensaje 8 Octubre 2011, 12:36 pm
por usuario oculto
Ayuda con problema en el código HTML letras á en página web.
Desarrollo Web
Kikoneh95 3 1,695 Último mensaje 26 Julio 2016, 00:39 am
por Kikoneh95
Cómo detectar si una página web es falsa
Noticias
wolfbcn 1 1,352 Último mensaje 1 Julio 2017, 00:02 am
por Serapis
Como detectar una pagina falsa.
Hacking
fox505 1 893 Último mensaje 29 Mayo 2018, 15:39 pm
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines