Browser hacking: Let's profile and optimize LibJS to improve the "Canvas Cycle" demo!

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ธ.ค. 2024

ความคิดเห็น • 61

  • @Mad3011
    @Mad3011 3 ปีที่แล้ว +39

    20:42 Sentence of the day: "It's always complicated when you're building a browser" like that's a completely normal thing to do :^)

  • @begga9682
    @begga9682 3 ปีที่แล้ว +34

    I don't know why but these 2 hour videos are really chill

    • @wiktorwektor123
      @wiktorwektor123 3 ปีที่แล้ว +1

      I'm putting them on background when coding myself. Then I'm doing this "in team" ;P

    • @qwertpain
      @qwertpain 3 ปีที่แล้ว

      @@wiktorwektor123 w.w a a

    • @qwertpain
      @qwertpain 3 ปีที่แล้ว

      @@wiktorwektor123 a a a a a o.a.a

    • @qwertpain
      @qwertpain 3 ปีที่แล้ว

      @@wiktorwektor123 w a.aw a

    • @qwertpain
      @qwertpain 3 ปีที่แล้ว

      @Zayden Paul iw

  • @smestre
    @smestre 3 ปีที่แล้ว +26

    Hell yeah! I was wondering if you'd make a vid optimizing this demo! I really enjoy watching people optimizing code
    Your approach to it is really nice, too. It's very high level, and seems to stick to the 20-80 rule

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +16

      Nice, I love watching people do performance optimizations too. It's almost as fun as making them yourself, but you don't have to think as much :^)

  • @DexesTTP
    @DexesTTP 3 ปีที่แล้ว +11

    Around 1:27:00 , a feature that could have helped you is the "select next occurence" thing (I think it's "Alt+J" by default on CLion). This select the "next" piece of text matching what you already selected with a new cursor. In this example, you could have selected/highlighted the first "global_object.vm()" you wanted to replace, pressed "Alt+J" a bunch of time, then wrote "vm" to replace them all at once !

  • @TimMorgan
    @TimMorgan 3 ปีที่แล้ว +6

    26:06 before doing my own profiling work, I wouldn't have fully grasped how good that feels when you cut run time in half. Now I get it! 🤗

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +1

      It’s a rare and magical feeling indeed 😊

  • @simonfarre4907
    @simonfarre4907 3 ปีที่แล้ว +23

    When you do a = [function() {},function() {}] the individual elements, do not get their "name" fields set though, even though they show up as a() in firefox. When you for instance do a[0].name, that is an empty string, so the firefox implementation of javascript seem to conform to standards, and not name the anonymous expressions in the array

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +9

      Oh, that's a great observation! :)

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +14

      I guess they’re just showing it that way for some kind of visual developer convenience(?)

  • @thiagosobral998
    @thiagosobral998 3 ปีที่แล้ว +3

    I'm a curious for everything related to programming (and synthwave!), especially things related to OS and low-level programming. This channel is a true gem, and I'm curious to try SerenityOS : ). My programming skills are very limited, but I always learn/discover something new when watching your videos. What a great find to ease these lockdown days. Greetings from Portugal! Thank you.

  • @simonfarre4907
    @simonfarre4907 3 ปีที่แล้ว +19

    Since you're "new" to CLion, if you want it to get snappy - when you are editing a large project, you can right click on individual folders in the file explorer and select -> Mark as -> Exclude, this excludes the directory from indexing, and thus CLion won't have to know what's in there, it won't search for anything in there, etc, so if you're working on a specific subset of a project, or if there's libraries you don't care about at all, at that point, you can just mark them as excluded and it will make the UI a bit snappier in certain scenarios. This is especially useful if you also have 3rd party libraries, which I know you don't, but I think it's useful to point that out, since you don't want to (necessarily) go looking for symbols there most of the time.

    • @badpotato
      @badpotato 3 ปีที่แล้ว +1

      why use IDE then?

    • @liamkearn
      @liamkearn 3 ปีที่แล้ว

      Not really sure why you are suggesting this, this is pretty much just a given with any IDE that indexes. I’m 90% sure he will know about it.

    • @simonfarre4907
      @simonfarre4907 3 ปีที่แล้ว

      @@liamkearn Because judging from the videos he just recently started using Clion - and he literally thought that the IDE was unresponsive even though it was just a typo. Add to that, the fact that people who watch this video might be unfamiliar with CLion. Do you want more reasons?

    • @simonfarre4907
      @simonfarre4907 3 ปีที่แล้ว +1

      @@badpotato If you've ever worked on a project where 3rd party libraries are used, you don't want to build huge symbol tables, especially if those libraries are well tested. Also add to that, when you search for symbols it will literally search the entire directory structure - documentation, and non code as well.

    • @badpotato
      @badpotato 3 ปีที่แล้ว +1

      @@simonfarre4907 Why the IDE devs can not make it faster. Why it has to be slow?

  • @kleinesfilmroellchen
    @kleinesfilmroellchen 3 ปีที่แล้ว +2

    6:30 The command "git blame" was definitely not a misnomer. Linus did it!

  • @xDeltaF1x
    @xDeltaF1x 3 ปีที่แล้ว

    I really enjoy your browser hacking videos and watching the numbers drop :) I recently had an assignment in an environment with no profiling tools so I wrote a very simple profiler, inspired by seeing how useful it is in your videos. It paid off, I was able to see all of my mistakes and to reduce a call from 10 minutes to ~30 seconds.

  •  3 ปีที่แล้ว +2

    Hi, first time writing a comment under one of your videos, I like the way you think, I find it interesting. It makes the videos so much better, but that might just be me, seeing as I write some code and apps myself. Keep that up!
    TL;DR
    Love your content, it is interesting. Keep it up!

  • @dreirex33
    @dreirex33 3 ปีที่แล้ว +5

    Great video! Just got a bit confusing at the end.
    Aren't positive and negative zero supposed to be equal both in C and in JS?

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +4

      Yeah that was confusing to me too.. :)
      They should be equal, *but* turning them to a string creates different results for positive and negative zero :)

  • @thislooksfun1
    @thislooksfun1 3 ปีที่แล้ว +1

    I figured out why the -0 check was failing! The I32 path checks if trunc(value) == value. Since trunc(-0) == -0, this then sends -0 down the I32 path. It also failed for the old static_cast for the same reason.

  • @mikeziri
    @mikeziri 3 ปีที่แล้ว

    alt+up to expand selection. then ctrl+g to add next selection occurrence to the selection (multi cursor)

  • @Stoneheadification
    @Stoneheadification 3 ปีที่แล้ว +1

    What would be the hardest LibJS optimisation procedure? fast-path? Also Kling is awesome. Engagement. Do your thing Algo.

  • @KyleLanmon
    @KyleLanmon 3 ปีที่แล้ว

    When trying to find the commit that broke the tests near the end of the video, you could use `git bisect`

  • @stephenkamenar
    @stephenkamenar 3 ปีที่แล้ว +1

    why would the compiler not inline simple functions like that?
    is it because it doesn't know it's called often, and inlining makes the binary filesize a bit bigger?

    • @JannisAdmek
      @JannisAdmek 3 ปีที่แล้ว

      I guess inlining is always a trade-off, right? You can't potentially call the function from outside (which is good or bad), the binary gets bigger because you are repeating yourself. Bigger functions can also impact how often you miss caches, and you have to recompile more if anything changes.

  • @pitust
    @pitust 3 ปีที่แล้ว +2

    I want to point out this was added between es5 and es2020, which means it's propably safe to not implement it.

  • @hugosales8102
    @hugosales8102 2 ปีที่แล้ว +1

    29:30 Global variables not being optimized
    Well, I just watched the new video where they did get optimized, so I don't understand how this video I watched afterwards claims they're not /s

  • @barakap2372
    @barakap2372 2 ปีที่แล้ว

    How is your clion theme called?

  • @lukewilson199
    @lukewilson199 3 ปีที่แล้ว +1

    37:37 you make up for your almost entire lack of comments in code, with expert technical writing on git commit descriptions.

  • @MrHarry37
    @MrHarry37 3 ปีที่แล้ว +2

    Great video as always! Also, what's your opinion on Rust?

  • @ncot_tech
    @ncot_tech 3 ปีที่แล้ว +1

    The anonymous function stuff at the start is just the kind of madness that makes me not want to be a web developer.

  • @willbou2011
    @willbou2011 3 ปีที่แล้ว

    Is it usual to make that much commits in a big open source project?

  • @inWOTweTrust
    @inWOTweTrust 3 ปีที่แล้ว +2

    seems youtube shadowbanned me on your channel for posting a link to git docs in your comment section about git-bisect ;(

  • @pitust
    @pitust 3 ปีที่แล้ว +1

    I think you should just port some JIT (maybe port firefox or webkit?)

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว +12

      There is absolutely nothing fun or interesting about doing that :)

  • @TheClonerx
    @TheClonerx 3 ปีที่แล้ว

    Comparing to a modern browser like firefox is kinda unfair taking in consideration that nowadays all major browsers jit javascript

    • @awesomekling
      @awesomekling  3 ปีที่แล้ว

      Gotta have some ambition :)

  • @wiilillad
    @wiilillad 3 ปีที่แล้ว

    LibLagom :sweden:

  • @void_p
    @void_p 3 ปีที่แล้ว +6

    o:

  • @thegabriel3891
    @thegabriel3891 3 ปีที่แล้ว +3

    Just use DirectX, bro