Web performance essentials - Goodies

Web Site – Good Practices and Tuning Combination of goodies from great resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],- By Jerry Emmanuel Cognizant

CSS guidelines ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript – Good practices ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript – Good practices ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript – JSON ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript – JSON<> Java ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web performance Tuning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning - Make fewer Http Requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Style sheets at the top ,[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Placing scripts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Avoid CSS Expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Make JS &CSS external ,[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Minification ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Resource/Web server end ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tuning – Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Miscellaneous Tips – 1/2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Miscellaneous Tips – 2/2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var i, j, el, table, tbody, row, cell; el = document.createElement("div"); document.body.appendChild(el); table = document.createElement("table"); el.appendChild(table); tbody = document.createElement("tbody"); table.appendChild(tbody); for (i = 0; i < 1000; i++) { row = document.createElement("tr"); for (j = 0; j < 5; j++) { cell = document.createElement("td"); row.appendChild(cell); } tbody.appendChild(row); } var i, j, el, idx, html; idx = 0; html = []; html[idx++] = "<table>"; for (i = 0; i < 1000; i++) { html[idx++] = "<tr>"; for (j = 0; j < 5; j++) { html[idx++] = "<td></td>"; } html[idx++] = "</tr>"; } html[idx++] = "</table>"; el = document.createElement("div"); document.body.appendChild(el); el.innerHTML = html.join("");

Firebug Features – Steve’s Yslow component ,[object Object],[object Object]

Firebug Features – Yslow - Stats

Firebug Features – Yslow - Components

FireBug – Add on of Fire Fox ,[object Object],[object Object]

Firebug - Features ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Firebug - Features Inspect and edit(live) HTML View source live Changes highlighted Instant HTML Editing Find Elements with Mouse Search Copy HTML

Firebug - Features CSS Development - Inspect/Edit style Sheets LIVE! Inspect the cascade Preview/Copy colors and images Auto complete edit ↑↓ key Numbers ↑↓ key Property Disable Property

Firebug - Features CSS Layout - Measure Layout LIVE! Change dimensions in the box model

Firebug - Features Network Monitoring - Track http requests

Firebug - Features Network Monitoring Watch the time unfold Break it down by type Cached or not cached Examine HTTP Headers XmlHttpRequest Monitoring

Firebug - Features JavaScript Debugging - A powerful JavaScript debugger - Measure performance - Identify bottle Necks

Firebug - Features JavaScript Debugging Find Scripts easily Pause execution on any line Pause execution based on exp Step – Debug functions Break on errors Stack traces unstacked

Firebug - Features JavaScript Debugging Watch expressions Variable tooltips Profile JavaScript performance Logging function calls Js line jump

Firebug - Features Finding Errors Informative JS errors Jump to debugger Filtering errors

Firebug - Features DOM Exploration Informative summaries Edit/Auto complete Dom  Script Window

Firebug - Features Java Script Command Line - Execute JavaScript on the fly.

References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web performance essentials - Goodies

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Web performance essentials - Goodies

Ähnlich wie Web performance essentials - Goodies (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web performance essentials - Goodies