htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
Optimizing the toolbar image/load bottleneck.


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


rene@laerke.net
Novice

Jan 31, 2003, 4:51 PM

Post #1 of 20 (6894 views)
Shortcut
Optimizing the toolbar image/load bottleneck. Can't Post

NEW OPTIMIZED VERSION AVAILABLE, SEE BELOW (htmlarea 2.03p)

Hi all,

after having trouble with slow responses on download/startup, caused by the "single" image toolbar architechture, i've taken the liberty to optimize it a bit.

The overall design idear is to have only one image with all buttons (ed_toolbar.gif) and using the advanced css styling to render the toolbar.

The net toolbar image is larger than the old images, but every client will minimize having a server roundtrip for every last button. This will greatly reduce overall performance on download/startup.

The optimized version can be demoed here : http://www.laerke.net/htmlarea203o/example.html and http://www.laerke.net/htmlarea203o/readme.html.

Optimized version is attached to this mail.

Wink Ojo


(This post was edited by rene@laerke.net on Feb 1, 2003, 1:03 PM)
Attachments: htmlarea203o.zip (39.7 KB)


basmul
Novice

Jan 31, 2003, 5:13 PM

Post #2 of 20 (6885 views)
Shortcut
Re: [rene@laerke.net] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Nice work I'll dive into the code on sunday to see what you did precicely but the demo works perfect an loads fast (ofcourse it's hard to notice on a 1,5 Mbit line but the bar appears nicely in one go)


lvni900
User

Feb 1, 2003, 10:20 AM

Post #3 of 20 (6856 views)
Shortcut
Re: [rene@laerke.net] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

It's remarkably quicker! Great work.

But can you explain how your imageposition parameter in the config.btnList works?

Since I added a lot of buttons myselve, I need to understand to adapt my own buttons.

Isn't there a possibility to do the job without that parameter? (the second part seems to me fixed '*20)', the first part is nearly '(' + the table index, or isn' it?

Leo.


rene@laerke.net
Novice

Feb 1, 2003, 11:48 AM

Post #4 of 20 (6852 views)
Shortcut
Re: [lvni900] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Thanx,

Your right ! If you look at the ed_toolbar.gif image (below) you'll see that the image position is a calculation using the "button" number multiplied by the number of pixel width of a single button.



To add additional buttons append the image on the right side with your own "icons". But be aware that the width of the single image must be exactly 20 pixels. Also note that since the image is a "transparent" gif, you'll have to you the same background color for you'r part of the image.

Alternativly you could decide to redesign and add an extra image. Could be called ed_toolbar_extra.gif holding your own images. Thereby isolating the "standard" images from your own images. But this would call for a little extra coding on your part. Doing that would be farely easy, although the solution would have negative impact on performance. But I guess that 2 images files are much better than having 30+.

If you'd like, mail me your images and I'll do the code changes myself (2 image solution) and post that as a new 2.03 optimized version.

;-) Rene'


rene@laerke.net
Novice

Feb 1, 2003, 1:10 PM

Post #5 of 20 (6844 views)
Shortcut
Re: [rene@laerke.net] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Ok,

based on my discussion above I did a new version. Now called 203p. This version uses 2 gif. One for the standard toolbar buttons (ed_toolbar.gif) and one gif you should modify for custom images (ed_toolbar_custom.gif). I've even enclosed an emty .gif (ed_empty.gif) you could use to paste into the ed_toolbar_custom.gif.

To test the new version use this url : http://www.laerke.net/htmlarea203p/example.html (slightly modified to show custom buttons) or here http://www.laerke.net/htmlarea203p/readme.html

Final version is attached as .zip.

Also note that i've enclosed 2 .js files. editor.js and modified_editor.js

The modified_editor.js is a modified version of the original editor.js with comments where I changed the code.

The editor.js is used in the examples and here only the final changes are enclosed. This is done to ensure a fair comparison between load times.

;-) Rene'


(This post was edited by rene@laerke.net on Feb 1, 2003, 2:10 PM)
Attachments: htmlarea203p.zip (54.8 KB)


rene@laerke.net
Novice

Feb 1, 2003, 3:24 PM

Post #6 of 20 (6836 views)
Shortcut
Re: [rene@laerke.net] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Using this tool i've done some testing :

http://www.numion.com/Stopwatch/

You can click below to see a random test of the 3 version.

Original 203 : http://www.numion.com/Stopwatch/start.html?Url=http%3A%2F%2Fwww.laerke.net%2Fhtmlarea203%2Fexample.html

Optimized 203o : http://www.numion.com/Stopwatch/start.html?Url=http%3A%2F%2Fwww.laerke.net%2Fhtmlarea203o%2Fexample.html

Optimized 203p : http://www.numion.com/Stopwatch/start.html?Url=http%3A%2F%2Fwww.laerke.net%2Fhtmlarea203p%2Fexample.html

Some random testing shows that the following results (tried around 10 times for each)
  1. Original around 7-8 secs load time
  2. Optimized around 1-2 secs load time closest to 1 sec
  3. Optimized final around 1-2 secs load time closest to 2 secs


;-) Rene'


mmcw
User

May 30, 2004, 7:41 AM

Post #7 of 20 (5184 views)
Shortcut
Re: [rene@laerke.net] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Is it possible to use something like this in 3.0 RC1 also?


raszi
Novice

Aug 18, 2004, 7:13 AM

Post #8 of 20 (4750 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post


In Reply To
Is it possible to use something like this in 3.0 RC1 also?

I had made a small patch for HTMLArea 3, I've sent it to mishoo but he didn't reply yet.
He was on honeymoon with his wife, maybe he need some time to answer all received mails.


mmcw
User

Aug 18, 2004, 12:27 PM

Post #9 of 20 (4738 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

could you send me the path also (mmcw@gmx.net)? Or attach it to the re-message?


raszi
Novice

Aug 19, 2004, 1:42 AM

Post #10 of 20 (4716 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Of course I can.
There is only one problem with the patch. You cannot access the HTMLArea.imgURL variable from the specified function.
So I hardcoded the image url in one line. It should be fixed before applying into CVS.
Attachments: htmlarea-imageslice.patch (8.79 KB)
  full.gif (2.09 KB)


raszi
Novice

Aug 19, 2004, 1:45 AM

Post #11 of 20 (4715 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

I forgot that this patch is for the CVS version of HTMLArea.

I've also made a PHP script to join the small images into one.
You can use it for the plugins.


mmcw
User

Aug 19, 2004, 12:41 PM

Post #12 of 20 (4710 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

I am interrested!


mmcw
User

Aug 19, 2004, 12:49 PM

Post #13 of 20 (4709 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

I have tried your solution but I do not know if I did it right.

Instead of all images (30 pieces) been loaded the images full.gif is now loaded 30 times!!
The time loading is the same. Can it be a IE problem. I am using IE 6.0.

When you go over the images the background will go white and after a second the onmouseover image look will appear! In the original version the onmouseover button look did show up directly (without delay).

Am I doing something wrong or is IE causing the problems!


raszi
Novice

Aug 20, 2004, 12:14 PM

Post #14 of 20 (4623 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

It's interesting. I didn't notice your problem when I tested the patch in IE.

Could you tell me the version of your explorer?

Btw, maybe we need to preload the full image before inserting them into HTMLArea.


mmcw
User

Aug 20, 2004, 12:21 PM

Post #15 of 20 (4621 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Version 6.0.2800.1106

Preloading could maybe solve the problem?!?!


raszi
Novice

Aug 20, 2004, 1:07 PM

Post #16 of 20 (4616 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Maybe. I'll take a look at IE.

Be patient :)


raszi
Novice

Aug 24, 2004, 6:01 AM

Post #17 of 20 (4550 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

hello again,

I had a little time to check this preloading problem. Here is the new patch.

Could you try it in your testcase?
Attachments: htmlarea-imageslice-with-preload.patch (9.33 KB)


mmcw
User

Aug 25, 2004, 12:31 AM

Post #18 of 20 (4528 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

Sorry to say but still the same problem.
When opening the page the image full.gif is loaded once for each button.
When going over a button the image is loaded again!


raszi
Novice

Aug 25, 2004, 4:57 AM

Post #19 of 20 (4517 views)
Shortcut
Re: [mmcw] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

It's interesting because I couldn't reproduce the problem. Unsure

I'd tested with Apache's mod_bandwith module and in my testcase Internet Explorer didn't want to reload the images.

How do you serve the images? Maybe the header information of the full.gif isn't good.

Could you show me your testcase? Is it in public area?


mmcw
User

Aug 25, 2004, 1:08 PM

Post #20 of 20 (4491 views)
Shortcut
Re: [raszi] Optimizing the toolbar image/load bottleneck. [In reply to] Can't Post

I made you some examples:

http://mmc-shop.nl/htmlarea3/examples/full_image_2.html
(Original loading without button change using css - silver)

- All image are loaded

http://mmc-shop.nl/htmlarea3/examples/full_image_2.html
(Your code without button change using css - silver)

- First time all image are loaded but the second time a lot less!! I think you forgot ed_blank.gif and the table buttons are loaded again and again! I think it is loading faster?!?!?

http://mmc-shop.nl/htmlarea3/examples/full_image_css_2.html
(Original loading with button change using css - silver)

- All image are loaded - incl.silver.gif (Background button)

http://mmc-shop.nl/htmlarea3/examples/full_image_2.html
(Your code with button change using css - silver)

- Alle image are loaded and between all images the button background will be loaded! Maybe preloading button background?!?

- Looks like the second problem - button reloading probem - is because every time you go over the button the image is loading again!

- Some buttons I use are not included in the full.gif image so then will be loaded again and again. Also the table buttons!

Try and let me know what can be done.


(This post was edited by mmcw on Aug 25, 2004, 1:18 PM)

 
 
 


Search for (options)