optimalizace webových aplikací
Post on 29-Jun-2015
223 Views
Preview:
DESCRIPTION
TRANSCRIPT
Op#malizace webových aplikací
Ondřej Mirtes @OndrejMirtes Vašek Purchart
@VasekPurchart
Spojování souborů
• reset.css • layout.css • typography.css • naviga;on.css • bu=ons.css • forms.css • tables.css • editor.css
all.css
Minifikace #navigation ul { font-‐size: 24px; line-‐height: 40px; } #navigation ul li { padding: 0; } #navigation ul li a { border: 0; color: #333; } #navigation ul li a .count { font-‐size: 14px; color: #c41700; }
#navigation ul{font-‐size: 24px;line-‐height: 40px;}#navigation ul li{padding:0;#navigation ul li a{border: 0;color: #333;}#navigation ul li a .count{font-‐size:14px;color: #c41700;} #navigation ul li a:hover {color:#c41700;#navigation ul li ul{padding: 0;font-‐size: 18px;}#navigation ul li.active > a {color:#c41700;#navigation ul li:before{display: none;}select.submenu {display: none;}
CSS & JavaScript připojujte externě
<html> <head> <style> #navigation ul { font-‐size: 24px; line-‐height: 40px; } #navigation ul li { padding: 0; } ... </style> </head> ...
CSS & JavaScript připojujte externě
<head> <link rel="stylesheet" type="text/css"
href="all.css"> </head>
CSS & JavaScript připojujte externě
<html> <body> <script> $('#container') .click(function(e) { // ... }); </script> </body> ...
CSS & JavaScript připojujte externě
<script src="all.js"></script>
Kam připojit JavaScript?
• Náročná blokující operace • Těsně před </body> • Prohlížeč dá při načítání přednost viditelným prvkům jako jsou obrázky
CSS sprites
CSS sprites
.question-‐mark-‐icon { width: 15px; height: 19px; background-‐image:
url(sprites.png); background-‐position:
-‐103px -‐172px; }
Obrázky s data URI
• Zakódování obrázku do řetězce • V Internet Exploreru s problémy
background-‐image: url(data:image/png;base64,iVBORw0KGgoAAAA...);
Opakující se pozadí
Opakující se pozadí
JPEG
PNG
• Bezeztrátová komprese • Vhodný pro ikony a webdesign • U fotografií příliš narůstá velikost
Vektorová grafika
• CSS3 – kulaté rohy, barevné přechody, sZny • SVG – obrázky zapsané v XML • Sady ikon jako speciální fonty – Font Awesome
Vektorová grafika
Doporučení k obrázkům
• V HTML by měly mít uvedené rozměry • Zabrání se nechtěným skokům při načítání
<img src="image.jpg" width="150" height="100">
Doporučení k obrázkům
• Barva pozadí by měla odpovídat grafice, která se přes něj načte
Content Delivery Network (CDN)
• Určitě využijete pro načtení frameworků • Pozor na práci off-‐line • Pro vlastní sta;cké soubory – Amazon S3, CloudFront – Velcí hráči si budují vlastní CDN
• Max. 2-‐6 souběžných požadavků na doménu – Řeší se rozložením na více subdomén
Obsluha sta#ckých souborů přes PHP
• Jen při potřebě zabezpečení souborů pro přihlášené uživatele
• Spouštění aplikace je náročné a prodlužuje odezvu
• Server za nás implementuje např. navazování stahování
☠
Průběh načtení stránky
F12 tools
• Firefox – Firebug (addon)
F12 tools
• Chrome
Komunikace se serverem
Last-‐Modified, If-‐Modified-‐Since
• První dotaz Response: Last-‐Modified: Fri, 3 May 2013 12:00:00 GMT
Last-‐Modified, If-‐Modified-‐Since
• První dotaz Response: Last-‐Modified: Fri, 3 May 2013 12:00:00 GMT
• další dotazy Request: If-‐Modified-‐Since: Fri, 3 May 2013 12:00:00 GMT
• 304 Not Modified
ETag, If-‐None-‐Match
• První dotaz Response: ETag: "686897696a7c876b7e "
ETag, If-‐None-‐Match
• První dotaz Response: ETag: "686897696a7c876b7e "
• další dotazy Request: If-‐None-‐Match: "686897696a7c876b7e "
• 304 Not Modified
Expires
• První dotaz: Response: Expires: Mon, 3 Jun 2013 12:00:00 GMT
Expires
• První dotaz: Response: Expires: Mon, 3 Jun 2013 12:00:00 GMT
• další dotazy Nic, pokud neexpirovalo
Cache-‐Control: max-‐age
• První dotaz: Response: Cache-‐Control: max-‐age=2678400
Vyhnue se cachování
• Cache-‐Control: no-‐cache • staré Expires
gzip komprese
• Pro HTML, CSS, JavaScript • V .htaccess: <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-‐javascript text/javascript application/javascript application/json </IfModule>
Chrome Audit
Ukládání dat u uživatele
Applica#on Cache
Web(local) storage
Web SQL
IndexedDB
Dynamické načítání obsahu
Vizuální zrychlení
Server
• Návrh aplikace • Volba frameworků • Nastavení a volba serveru • Op;malizace aplikačního kódu • Opcode cache • Cachování dat
Databáze
• Databázové indexy • Pozor na počet dotazů • Stahovat jen potřebná data
top related