Recent

Author Topic: Let's write a web browser  (Read 17739 times)

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Let's write a web browser
« Reply #45 on: May 21, 2018, 05:19:58 am »
If you can't design with HTML and JS something you can do in Lazarus is not my problem. I can and I do it well, and in no time thanks to open source.

I mean, you're the primary author of BGRAControls. Surely you realize that there's all kinds of things you've done there that you couldn't even dream of doing in JS with any kind of reasonable performance?

Well. I was amazed of discovering the opposite.

Or I'm sure I'm coding wrong. But I compared a full screen material design button ( I know it's a non sense, but a way to check performance). The one made with CSS runs faster than mine. And also it only requires a few lines to make one.

I'm not a master in opengl like you. So you can know more in that field. But for regular controls the easy way of making them is really good with CSS and they run fast.

About animation: the "infinity turtle graphics" I made with BGRABitmap and then ported to JS. Runs faster in JS. So, it must be faster with Lazarus I understand that. But that is always faster is not true with my tests.


taazz

  • Hero Member
  • *****
  • Posts: 5368
Re: Let's write a web browser
« Reply #46 on: May 21, 2018, 07:21:05 am »
If you can't design with HTML and JS something you can do in Lazarus is not my problem. I can and I do it well, and in no time thanks to open source.

I mean, you're the primary author of BGRAControls. Surely you realize that there's all kinds of things you've done there that you couldn't even dream of doing in JS with any kind of reasonable performance?

Well. I was amazed of discovering the opposite.

Or I'm sure I'm coding wrong. But I compared a full screen material design button ( I know it's a non sense, but a way to check performance). The one made with CSS runs faster than mine. And also it only requires a few lines to make one.

I'm not a master in opengl like you. So you can know more in that field. But for regular controls the easy way of making them is really good with CSS and they run fast.

About animation: the "infinity turtle graphics" I made with BGRABitmap and then ported to JS. Runs faster in JS. So, it must be faster with Lazarus I understand that. But that is always faster is not true with my tests.
this is purely to satisfy my curiosity, but can you provide both the css button and the test program?
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Let's write a web browser
« Reply #47 on: May 21, 2018, 02:38:33 pm »
this is purely to satisfy my curiosity, but can you provide both the css button and the test program?

Sure.

My material design button:
https://github.com/bgrabitmap/materialdesign/blob/master/mdbutton.pas

*Any* other CSS MD Button:
https://materializecss.com/buttons.html

Here a big one:
https://codepen.io/anon/pen/aGXXgM

In fact you can use any, but I don't have the demos, you should make them. Is just putting a button in a form / html, and sizing it to fit window, so you have a really big button.

The thing you should compare is the animation smoothness.

And the animations that I also mentioned:

BGRA
https://github.com/lainz/turtlegraphics

JS
https://lainz.github.io/webapps/turtlegraphics/

Simply run them in fullscreen or maximized to see the difference.
« Last Edit: May 21, 2018, 02:49:54 pm by lainz »

Akira1364

  • Hero Member
  • *****
  • Posts: 561
Re: Let's write a web browser
« Reply #48 on: May 21, 2018, 07:37:27 pm »
The Pascal version of the Turtle one is slow because of the TTimer stuff. What it's doing isn't really similar at all to what "window.RequestAnimationFrame" does in JS. I've attached a modified version to this comment that among other changes uses an OnIdle handler instead. Big speed difference.
« Last Edit: May 21, 2018, 09:38:35 pm by Akira1364 »

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Let's write a web browser
« Reply #49 on: May 21, 2018, 07:48:28 pm »
The Pascal version of the Turtle one is slow because of the TTimer stuff. What it's doing isn't really similar at all to what "window.RequestAnimationFrame" does in JS. I've attached a modified version to this comment that among other changes uses an OnIdle handler instead. Big speed difference.

Thanks. I'm working now I will test it later. So I was not that wrong, the culprit was my code.

Well. I was amazed of discovering the opposite.

Or I'm sure I'm coding wrong....

You think that the same can be applied to the Material Design Button?
« Last Edit: May 21, 2018, 07:58:54 pm by lainz »

circular

  • Hero Member
  • *****
  • Posts: 4196
    • Personal webpage
Re: Let's write a web browser
« Reply #50 on: May 21, 2018, 08:45:25 pm »
Most of the processing time is not in the JS code itself but in the rendering and the library used in the browser is very much optimized and is not written in JS.

This shows that there are probably some optimizations that could be done in BGRABitmap.
Conscience is the debugger of the mind

 

TinyPortal © 2005-2018