I generally try to listen to JavaScript/development podcasts and videos when I'm working. It's a great way to continue to learn and get ideas while doing the ho hum programming busywork that's unavoidable. Here's a great Google Talks presentation that was given last summer about JavaScript and speed.
After you watch some of it, let me know what you think. Oh, and trust me, I've seen your JS -- you need this.
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack...
Note: For this tutorial, I'm using version1 of the Google Translate API. A newer REST-based version is available.
In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...
Thank you for sharing, huge help and now i’ve got gobs and gobs of javascript to go refactor. :)
Jean-Nicolas Boulay Desjardins
Thanks for sharing.
I will also have to re-write some of my code.
I’m wandering if Mootools should remove .each(); to encourage good performance practice? Or at least put a note in the documentation warning that it will slow down the code…
Also, is DocumentFragment use in Mootools to speed accessing the DOM?
Well, removing the each() function is not the solution I think… How would you make a sortable list or something like that dynamically? I don’t know another solution for that, you’ll have to select EACH element so you use an each function I gues…. Maybe David does?
How do I track the execution time of my script in several browsers? I’d like to see what kind of improvement I’ll make when I’m adjusting my scripts and classes.
Thank you for a good link and Mootools, David!
I’m just the user of Moo, I like it. Only one thing that makes me unhappy with moo – is to much time, required for library initialization.
I’m constantly optimizing my servers and sites to give users faster and earler page view as much as I can and the last bottleneck is JS library initialization time.
When I’m looking at Firebug in FF I see mootools is blocking all images , asking browser to wait for it’s initialization. It takes about 0.5-0.8 seconds for browser to figure out that it can continue load multimedia objects on page after mootools load.
0.5-0.8 seconds is significant for me, becose some of my users have too much hops (asia) to my servers and usually pages is loading in 1.5 seconds. 0.8 – is the half (!), not filled with any useful actions page load time, too big comparing with total page load time.
Yes, mootools is loading from page header.
According to YSlow or Page Speed recommendations I could move mootools to the end of the page, but I’m worry about document.write calls, that could not modify page objects in some initialization functions that you’re using and I donw’t deeply know…
So my questions is:
1) Can I do “late” or “parallel with loading static multimedia objects” initialization of mootools library somehow?
2) can I safety move whole mootools (or some parts of the library) to the page bottom to prevent browser blocking on objects loading?
3) what methods you’ll advise to speedup parallel page loading with whole (core and nc) mootools?
Wow… is my scripting really that bad?
It’s refactoring time :D
Thank you for sharing, huge help and now i’ve got gobs and gobs of javascript to go refactor. :)
Thanks for sharing.
I will also have to re-write some of my code.
I’m wandering if Mootools should remove .each(); to encourage good performance practice? Or at least put a note in the documentation warning that it will slow down the code…
Also, is DocumentFragment use in Mootools to speed accessing the DOM?
Well, removing the each() function is not the solution I think… How would you make a sortable list or something like that dynamically? I don’t know another solution for that, you’ll have to select EACH element so you use an each function I gues…. Maybe David does?
How do I track the execution time of my script in several browsers? I’d like to see what kind of improvement I’ll make when I’m adjusting my scripts and classes.
Awesome video, currently in the process of writing it up into a full blog post and I came across something pertaining to MooTools
Does the method “setStyles” cause multiple reflows?
[code]
element.setStyles({
height: “100px”,
display: “block”,
fontsize: “130%”
})
[/code]
will that cause 1 or 3 reflows?
Thank you for a good link and Mootools, David!
I’m just the user of Moo, I like it. Only one thing that makes me unhappy with moo – is to much time, required for library initialization.
I’m constantly optimizing my servers and sites to give users faster and earler page view as much as I can and the last bottleneck is JS library initialization time.
When I’m looking at Firebug in FF I see mootools is blocking all images , asking browser to wait for it’s initialization. It takes about 0.5-0.8 seconds for browser to figure out that it can continue load multimedia objects on page after mootools load.
0.5-0.8 seconds is significant for me, becose some of my users have too much hops (asia) to my servers and usually pages is loading in 1.5 seconds. 0.8 – is the half (!), not filled with any useful actions page load time, too big comparing with total page load time.
Yes, mootools is loading from page header.
According to YSlow or Page Speed recommendations I could move mootools to the end of the page, but I’m worry about document.write calls, that could not modify page objects in some initialization functions that you’re using and I donw’t deeply know…
So my questions is:
1) Can I do “late” or “parallel with loading static multimedia objects” initialization of mootools library somehow?
2) can I safety move whole mootools (or some parts of the library) to the page bottom to prevent browser blocking on objects loading?
3) what methods you’ll advise to speedup parallel page loading with whole (core and nc) mootools?