jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2009-3-17 00:03

JavaScript 粒子模擬系統 v0.2

[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] Particle system written in pure Javascript v0.2
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://wilq32.googlepages.com/wilq32.particles[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] JavaScript 也可以這樣用...

[jsg.example]
<iframe src="_lib/others/Wilq32.Particles/Wilq32.Particles.html?text=jsgears.com" width="1200" height="420" frameborder="0" scrolling="no" onfocus="iframefocus()" onblur="iframeblur()"></iframe>
[/jsg.example]

作者在進行這個專案的同時,也學到了一些優化的技巧分享給大家:
[list=1]
[*]將元素隱藏、移動再顯示並不會比較快,直接用這樣去移動是比較快的:
[code js]
element.style.top="10px";
element.style.left="10px";  
[/code]
[*]移動物件的最快方法是直接改變 style 的屬性:[code]element.setAttribute("style","left: 10px; top: 10px");[/code]但是在 IE 中,這招無效,最快的方式還是如第一點所述,將 top 和 left 分別指定。
[/list]

不過再怎麼優化,Client 端的瀏覽器要跑出這樣的效果通常速度都很慢,經過實測,Google Chrome > FireFox > IE
還沒用過 Google Chrome 的人快去下載來試試看喔 :)

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.