HTML5/JS Optimization Techniques?

[JeZxLee]

HTML5/JS Optimization Techniques?

 

Hi,

 

I have my new HTML5/JavaScript website working well here: www.16BitSoft.com .

Website runs about 50 Frames Per Second on my 1.2GHz Intel Celeron dual-core CPU.

I tried the website on a 12 year old desktop with 1.2GHz single core AMD CPU and it runs 5 FPS.

I would like to learn better optimization techniques to make website run better on older/slower hardware.

 

I've already implemented TTF text preloading and that helps alot, but need to squeeze some more performance.

Anyone have some suggestions on how to optimize HTML5/JavaScript code?

My website is fairly simple, background PNG image, company logo PNG, some TTF texts, and 1-2 PNG images per page.

 

Thanks in advance for your help!

Also please critique my current website and make suggestions for improvement...

(I am obviously not a website designer and am just a computer programmer)

 

JeZxLee

16BitSoft Inc.

Video Game Design Studio

www.16BitSoft.com

[JUL]

One thing that could be done, but I don't know if it's really feasable here, since you use a lot of "gradients" and complex colors, is to switch to a lower number of colors with by exporting your images to png8, 16, 32 or 64 colors, it will free some memory, you could also remove the pixel smoothing.

 

Try in photoshop, export for the web, then select png8 and select the number of colors.

 

 

This is what a 16 color looks like.

[Sebi]

You shouldn't use canvas to display an entire website on it.

But to improve your performance:

Only redraw the canvas when something is changing. Why would you draw something static, like a website, 60 times per second?

[JeZxLee]

You shouldn't use canvas to display an entire website on it.

But to improve your performance:

Only redraw the canvas when something is changing. Why would you draw something static, like a website, 60 times per second?

Hi,

 

Normally I only draw when there is a change.

When I press [D] on keyboard I enter DEBUG mode.

DEBUG mode redraws everything every frame and displays Frames Per Second.

Purpose of DEBUG mode is to see Frames Per Second and to judge overall performance.

 

On the 12 year old desktop I am getting about 5 Frames Per Second when in DEBUG mode.

The slowest part of the website is the screen fading transitions.

I draw a 900x700 black PNG sprite with varying levels of alpha to transition from screen to screen.

 

I am also trying to get the website to run at acceptable speed on my Panasonic SmartTV.

It works on SmartTV but is running about 2 Frames Per Second now.

 

JeZxLee

[Sebi]

Then don't use debug mode.

[JUL]

You should definitely look at CSS transitions.

 

http://www.w3schools.com/css/css3_transitions.asp

 

And CSS gradients

 

http://www.colorzilla.com/gradient-editor/

 

Because what you're doing here, has a name, it's called heresy.

 

No offense intended, but you're using a bulldozer to build a sand castle.

[JeZxLee]

One thing that could be done, but I don't know if it's really feasable here, since you use a lot of "gradients" and complex colors, is to switch to a lower number of colors with by exporting your images to png8, 16, 32 or 64 colors, it will free some memory, you could also remove the pixel smoothing.

 

Try in photoshop, export for the web, then select png8 and select the number of colors.

 

 

This is what a 16 color looks like.

Hi,

 

How do I disable pixel smoothing?

 

Jesse

[JUL]

In your CSS file

 

img {
image-rendering: optimizeSpeed; /* FUCK SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */

}

 

http://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images

[pixelpathos]

As JUL has mentioned, <canvas> may not be the optimum tool for creating a website of this kind, as you lose a lot of what HTML and CSS give you for free, including CSS transitions, but also responsive, resolution-independent design, the ability to copy-and-paste text, the ability for search engines to read that text etc.

 

Having said that, there are a number of optimisations you could implement that would be useful when writing canvas-based games. You shouldn't need a separate debug mode for your site. If you need to see FPS performance, then modern browsers offer profiling tools to examine performance in detail. I'm particularly familiar with Chrome's DevTools.

 

I stuck your site through Chrome's profiler, and the loading screen is rendering each line of text over 30 times per *frame*, presumably to achieve the outline (DrawTextOntoCanvas is the culprit here). Rather than doing such complex rendering on-the-fly, a pre-rendered bitmap font might be more appropriate. You could then slice out and draw the appropriate glyphs when you need the text. There are various tools to help you to do this (I've used a combination of Bitmap Font Generator, Photoshop to add additional outline, and EaselJS's BitmapText). You could do something similar in your custom 2D game engine.

 

When I hovered over your e-mail link, you redraw your entire page, rather than just drawing the e-mail link in a different colour.

 

Drawing a black PNG with varying alpha over the entire canvas won't be the fastest way to achieve your transition, particularly as you'll be having to redraw the entire underlying page each frame. The way a game might achieve this is to have layered canvases. Have each page pre-rendered (once!) to separate canvases lying on top of each other. Ensure the page background is styled black in CSS (no image necessary!), then simply animate the opacity style of each canvas (reduce opacity of previous page, increase opacity of next page). No canvas redrawing should be necessary here; you'd just be using the device's GPU to achieve the compositing (composition?) of the various layers.

 

Hope this helps,

 

Vince.