include von js und css in html-datei

Dieses Thema im Forum "Webentwicklung" wurde erstellt von encud, 11. Oktober 2010 .

Schlagworte:
  1. 11. Oktober 2010
    Moin!
    Um requests zu sparen habe ich mir gedacht, man könnte ja auch einfach alle js und css datein per php includieren, damit wenigstens für den code an sich nur noch ein request über bleibt.

    Nun weiß ich selber, dass ich wahrscheinlich nicht der erste mit dieser blitzidee bin und man sieht ja doch viele websites auf denen das ganze nicht so gehandhabt wird.

    Gibt es da irgend welche negativen Aspekte die mir auf den ersten blick nicht auffallen, oder ist auf irgendwas zu achten?

    also ich stelle mir das halt gerade so vor:
    HTML:
     <style type="text/css">
     <?php require_once("css/style.css"); ?>
     </style>
    
     <script type='text/javascript'>
     <?php require_once("js/jquery-1.4.2.min.js"); ?>
     <?php require_once(...............); ?>
     </script>
    was ich selber schon bemerkt hab ist, dass mein quellcode jetzt nicht mehr als valide erkannt wird, durch das javascript

    würde mich über weitere vor- und nachteile eurerseits zu dieser methode freuen!

    gruß encud
     
  2. 11. Oktober 2010
    AW: include von js und css in html-datei

    Verwendet man require oder include wird der PHP-Code in den Dateien ausgeführt. Das ist in dem Fall aber garnicht nötig, wesshalb du hier zu readfile greifen solltest.

    Zu den Nachteilen von eingebettetem JS oder CSS: Lagerst du statischen Content aus, kann der Browser die Daten cachen. Pro Seitenaufruf wird zwar ein Request zum Abrufen der JS-/CSS-Datei abgeschickt, aber vom Server mit einem 304 Not Modified beantwortet, was natürlich Traffic einspart. Im Gegensatz dazu wird der JS/CSS Code bei jeder nicht vom Browser gecachten Seite mitgeliefert - das ist alles Overhead.
    Wenn du nur minimale Änderungen an deinen JS/CSS Codes vornimmst, werden automatisch alle deine Seiten aktualisiert, womit die von deinen Besuchern gecachten Seiten alle ungültig werden. Das verbraucht dann wieder Serverload & Traffic.

    Eins sollte dir gesagt sein: Dieses ganze Performancegeschraube lohnt sich erst richtig, wenn man auch genug Besucher hat, die ausreichend Seitenaufrufe produzieren können, um deinen Server auszulasten. Da Server & das Internet immer schneller und Traffic immer billiger wird, braucht man sich über sowas kaum noch den Kopf zerbrechen.
    Wichtig ist aber, das Suchmaschinen auf Dokumente stehen, die aus so wenig Code, aber soviel Inhalt wie möglich bestehen.
     
  3. 11. Oktober 2010
    AW: include von js und css in html-datei

    Das macht ueberhaupt keinen Sinn, da du bei jedem Aufruf den Code neu runterlaedst, was bei nem 30kb javascript jedes mal 30kb sind. Die Browser cachen allerdings statische Sachen wie js Dateien, sofern kein modified datum mitgesendet wird, was neuer ist und schon wird die Datei nicht runtergeladen. D.h. nur beim ersten Seitenaufruf wird das js ueberhaupt komplett heruntergeladen. Mit deiner Variante verursachst du nur mehr Traffic. Die Load steigt zudem auch, da du die Daten noch durch den PHP Parser schiebst. Sinn wuerde das ganze nur machen, wenn du die Files in memcached vorhaelst o.ae.

    tldr-> deine Variante senkt weder Load noch Traffic
     
  4. 11. Oktober 2010
    AW: include von js und css in html-datei

    jap danke macht sinn!

    mache das gerade auch hauptsächlich zur übung damit ich weiß wie es geht. Zudem hab neulich mal gelesen das die suchmaschinen jetzt neuerdings auch auf die dauer des aufbaus der seite achten, sprich man wird besser gelistet wenn man nen schnellen server hat...
    aber gut, dann pack ich jetzt meine gesamten js- und css-daten in jeweils ein file und gut ist
     
  5. 11. Oktober 2010
    AW: include von js und css in html-datei

    Das ist auch das beste was du machen kannst

    Zudem kannst du den Code verkleinern in dem du unnötige Leerzeichen, Umbrüche und Tabs entfernst.
    Außerdem kannst du dir in CSS das ; vor dem } sparen

    Beispiel:
    Code:
    html {
     font-size: 11px;
     }
    Wird zu:
    Code:
    html{font-size:11px;}
    Noch besser:
    Code:
    html{font-size:11px}

    Perfekt:
    Code:
    html{font:11px}
     
  6. 11. Oktober 2010
    AW: include von js und css in html-datei

    diese schreibweiße sollte man sich aber nicht angewöhnen. für solche sachen gibts programme im web:

    CSS Drive Gallery- CSS Compressor
    YUI Compressor
     
  7. 17. Oktober 2010
    AW: include von js und css in html-datei

    das css programm ist gut mit dem von yahoo komm ich irgendwie nicht wirklich klar, was muss ich da runterladen und wie funktioniert das dann?!?!

    gibts ansonsten noch irgendwas für js datein?
     
  8. 17. Oktober 2010
    AW: include von js und css in html-datei

    Download: Downloads

    Benutzung:

    java -jar yuicompressor-x.y.z.jar [options] [input file]

    Beispiel: java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

    Hilfe:

    Spoiler
    Global Options
    -h, --help Displays this information
    --type <js|css> Specifies the type of the input file
    --charset <charset> Read the input file using <charset>
    --line-break <column> Insert a line break after the specified column number
    -v, --verbose Display informational messages and warnings
    -o <file> Place the output into <file>. Defaults to stdout.

    JavaScript Options
    --nomunge Minify only, do not obfuscate
    --preserve-semi Preserve all semicolons
    --disable-optimizations Disable all micro optimizations

    GLOBAL OPTIONS

    -h, --help
    Prints help on how to use the YUI Compressor

    --line-break
    Some source control tools don't like files containing lines longer than,
    say 8000 characters. The linebreak option is used in that case to split
    long lines after a specific column. It can also be used to make the code
    more readable, easier to debug (especially with the MS Script Debugger)
    Specify 0 to get a line break after each semi-colon in JavaScript, and
    after each rule in CSS.

    --type js|css
    The type of compressor (JavaScript or CSS) is chosen based on the
    extension of the input file name (.js or .css) This option is required
    if no input file has been specified. Otherwise, this option is only
    required if the input file extension is neither 'js' nor 'css'.

    --charset character-set
    If a supported character set is specified, the YUI Compressor will use it
    to read the input file. Otherwise, it will assume that the platform's
    default character set is being used. The output file is encoded using
    the same character set. IMPORTANT: if you do not supply this argument
    and the file encoding is not compatible with the system's default
    encoding, the compressor will throw an error. In particular, if your
    file is encoded in utf-8, you should include this parameter.

    -o outfile
    Place output in file outfile. If not specified, the YUI Compressor will
    default to the standard output, which you can redirect to a file.

    -v, --verbose
    Display informational messages and warnings.

    JAVASCRIPT ONLY OPTIONS

    --nomunge
    Minify only. Do not obfuscate local symbols.

    --preserve-semi
    Preserve unnecessary semicolons (such as right before a '}') This option
    is useful when compressed code has to be run through JSLint (which is the
    case of YUI for example)

    --disable-optimizations
    Disable all the built-in micro optimizations.
     
  9. 18. Oktober 2010
    AW: include von js und css in html-datei

    bringt mich gerade nicht so richitg weiter.
    muss ich das irgendwo eingeben, wenn ja wo^^
    hab auch versucht die yuicompressor-2.4.2.jar zu öffnen, doppelklick schein mit nicht viel zu bringen.
    sry wenn ich mich gerade ein bisschen doof anstelle aber ich versteh es echt nicht!
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.