Πως αποτρέπω εξωτερικό CSS από το να φορτώσει;

25 views
Skip to first unread message

George Georgovassilis

unread,
Feb 7, 2017, 6:57:54 AM2/7/17
to GreeceJS
Αγαπητοί,
παίζω με ένα CMS το οποίο παράγει δυναμικά σελίδες HTML και έχω μερικό έλεγχο στο αποτέλεσμα,λ.χ. μπορώ να εισάγω javascript. Η παραγόμενη σελίδα τρέχει στο intranet, αλλά φορτώνει ένα CSS από το internet, στο οποίο η πρόσβαση είναι εξαιρετικά αργή (αργό DNS resolution). Προκύπτει λοιπόν το πρόβλημα πως, όσο το εξωτερικό CSS δεν έχει φορτώσει (10"+), η σελίδα δεν εμφανίζεται (βλ. css render blocking). Η παραγόμενη σελίδα χονδρικά έχει τη δομή:

<html>
<head>
<!-- θέση 1 για δικό μου κώδικα -->
<link rel="stylesheet" href="http://external.domain/style.css"/>
</head>
<body>

<!-- θέση 2 για δικό μου κώδικα -->
</body>
</html>

Προσπάθησα με JS στην θέση 1 να διαγράψω τον κόμβο link που φορτώνει το εξωτερικό CSS. Όταν το κάνω "απευθείας" στην θέση 1:

var links = document.getElementsByTagName("link");
links[0].parentNode.removeChildElement(links[0])


τότε δεν βρίσκει (ακόμα) τον κόμβο link... κάπως αναμενόμενο αφού ο browser δεν έχει κατασκευάσει το DOM δένδρο πέρα από την θέση 1. Μεταφέροντας τον κώδικα σε timer...


window.setTimeout(function(){
var links = document.getElementsByTagName("link");
links[0].parentNode.removeChildElement(links[0]);
},10);


... ο browser συνεχίζει να "κολλάει" ακόμα και όταν ο link κόμβος έχει αφαιρεθεί, τουλάχιστο σε FF.

Ιδέες;

Angelos Chaidas

unread,
Feb 7, 2017, 7:02:35 AM2/7/17
to GreeceJS
> Ιδέες?

Χμ. Περίεργη προσέγγιση!

Εγω προσωπικά στην "θέση 2" θα κολλούσα κάτι που να ακούει το domready event και να αφαιρεί το css που δεν θέλεις:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    // Do your removal stuff here, το <link> θα είναι διαθέσιμο να το "βρείς"
  });
</script>

George Lapatas

unread,
Feb 7, 2017, 7:10:26 AM2/7/17
to gree...@googlegroups.com
δεν μπορεις να κατεβασεις το css για να το φορτωσεις απο local?

--
You received this message because you are subscribed to the Google Groups "GreeceJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to greecejs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

George Georgovassilis

unread,
Feb 7, 2017, 8:50:36 AM2/7/17
to GreeceJS
Παραξενεύομαι που το DOMContentLoaded βαράει ενώ περιμένει ακόμα το css να φορτώσει (επειδή υποτίθεται πως είναι render-blocking και καλά), όμως φαίνεται πως όντως δουλεύει μέχρι εκεί. Δυστυχώς και πάλι ο browser (FF) κολλάει όπως στην απόπειρα με το timer, ακόμα και όταν ο κόμβος έχει αφαιρεθεί από το DOM.

George Georgovassilis

unread,
Feb 7, 2017, 8:51:23 AM2/7/17
to GreeceJS
Αμέ. Αλλά δεν θα έλυνε το πρόβλημα, δες παρακαλώ προσεκτικά την περιγραφή :-)
To unsubscribe from this group and stop receiving emails from it, send an email to greecejs+u...@googlegroups.com.

George Georgovassilis

unread,
Feb 7, 2017, 8:53:02 AM2/7/17
to GreeceJS
Σε δεύτερη ανάγνωση ίσως δεν ήταν 100% ξεκάθαρο: δεν μπορώ να πειράξω το κομμάτι της HTML που εισάγει την αναφορά στο εξωτερικό CSS.

George Lapatas

unread,
Feb 7, 2017, 9:33:27 AM2/7/17
to gree...@googlegroups.com
Βρηκα αυτο το σχολιο "Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will not finish parsing - and DOMContentLoaded will not fire - until the stylesheet is loaded.


Μηπως αυτο συμβαινει και σε σενα?

To unsubscribe from this group and stop receiving emails from it, send an email to greecejs+unsubscribe@googlegroups.com.

George Lapatas

unread,
Feb 7, 2017, 9:37:56 AM2/7/17
to gree...@googlegroups.com
Επισης 2 λινκ για το πως μπορεις να βελτιστοποιησεις το φορτωμα του CSS 

George Georgovassilis

unread,
Feb 8, 2017, 5:29:10 PM2/8/17
to GreeceJS
Τελικά το έλυσα... κάπως. Ο browser ξεκολλάει με window.stop() και αρκετές παρενέργειες: https://blog.georgovassilis.com/2017/02/unjam-css.html
Reply all
Reply to author
Forward
0 new messages