11 ms·

Why is collapsing a Hacker News comment so slow?

190 points by thewarpaint 7y ago

RBenjamin 7y ago
Or just use my Greasemonkey/Tampermonkey plugin which disables the Hackernews collapsible comments and introduces its own collapsible comments logic, which is much faster and has a variety of convenience features: http://mental-reverb.com/creations.php http://mental-reverb.com/creations.php
- thewarpaint 7y ago
  The slow behaviour is mostly noticeable on mobile Chrome, but will have a look, thanks for sharing.
abakker 7y ago
I am just now realizing that HN comments are collapsible...I wonder if anyone has ever looked at upvote/scroll behavior when the collapse button is used vs not? There are a ton of threads where the top comment is also a non-sequitur, but I know when that happens I frequently don't scroll past the hundreds of replies to see what the other first level comments are.
- AareyBaba 7y ago
  Okay. I'll bite. What is everyone talking about ? I see an upvote triangle, a down vote [-] and nothing else. Is this a mobile only thing ? I can't see a way to collapse comments under Chrome or Safari on a desktop. I am out of the loop what's the secret ?
  - thewarpaint 7y ago
    [-] is not a downvote button, but the collapsing one.
    - AareyBaba 7y ago
      TIL ... after years on HN. For anyone else out of the loop like me: Where's the downvote button? https://news.ycombinator.com/item?id=17731487 https://news.ycombinator.com/item?id=17731487
      - kingosticks 7y ago
        It's not available until you have a certain amount of karma. I think it's 500 or thereabouts.
ha99ja 7y ago
That is really ugly code.
- nicolaslem 7y ago
  For me HN is a great reminder that done is better than perfect.
  - mda 7y ago
    More like, "It kinda works, we don't give a crap".
    - rolltiide 7y ago
      as it should be think about all the other things perfectionist coders and product managers could be working on
    - jimbob45 7y ago
      The Craigslist special
    - archy_ 7y ago
      Yep, and they could easily find volunteers to improve the site (make the login page look nicer, maybe even implement 2fa) but there's no incentive to improve
    - dang 7y ago
      That's not nice. I don't mind if you diss our code. But I do mind if you say we don't give a crap.
      - thewarpaint 7y ago
        OP here. Dissing was not the intention of my post, if I can help in any way to improve HN let me know, would be more than glad to do so. Peace!
  - Toine 7y ago
llamathrowaway 7y ago
> There is also a GET request to https://news.ycombinator.com/collapse?id=1234567 https://news.ycombinator.com/collapse?id=1234567 to save the state of the collapsed/expanded comment if the user is logged in, but it's an async request so it doesn't have an impact. Is this a correct place to use 'GET'?
- dexen 7y ago
  >Is this a correct place to use 'GET'? Not at all; GET requests are specified [0] to not cause any modifications to the resources (aside of meta-data like logging etc.). It should also be 100% safe for web spiders to issue any GET at any time [1], server overload aside. I presume it's an artifact of earlier implementation -or just an idea- to have the collapse work without JavaScript. It would be doable with a normal A HREF with the current link format of https://news.ycombinator.com/collapse?id=20336970 https://news.ycombinator.com/collapse?id=20336970 -- [0] "In particular, the convention has been established that the GET and HEAD methods SHOULD NOT have the significance of taking an action other than retrieval." - https://tools.ietf.org/html/rfc2616#section-9.1.1 https://tools.ietf.org/html/rfc2616#section-9.1.1 [1] in the early day of the internet, a friend lost most of his CRM's content because he had record deletes implemented as A HREF issuing GET requests. Having learned the lesson, he instead turned to JavaScript code issuing GETs...
  - cheschire 7y ago
    The weight of a well used ellipsis...
  - hjek 7y ago
    The 'logout' button is also a GET request.
  - baddox 7y ago
    I thought that the normal way to have this work without JavaScript would be to have a form tag with the submit button styled to look like the collapse button.
  - merb 7y ago
pg_bot 7y ago
I would use the <details> tag to solve this problem. Most people don't know this exists and I have no idea why. You would probably have to rewrite the html so it no longer uses tables but I don't really consider that to be a negative. I would also question why we are saving collapsed comments. I feel like this is something that doesn't need to be persisted forever. If you want this behavior why not use local storage instead?
- giancarlostoro 7y ago
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de... This is awesome! I had no idea! You're right, I don't think most people even realize. There's often times I get upset when using Bootstrap or just doing CSS and look up ways to do specific things and don't find out of the box solutions, this is one time I'm glad I found a decent alternative. One case that comes to mind is collapsible trees and dropdown boxes where you can type / search on them, and anything with dropdown boxes like checkmarks gets a wee bit hacky.
  - jhomedall 7y ago
    Note that it's not yet supported by Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/ https://developer.microsoft.com/en-us/microsoft-edge/platfor...
    - Ajedi32 7y ago
      Edge is turning into Chromium soon, so that shouldn't be a problem for much longer.
      - reaperducer 7y ago
        Considering there are millions of people still using IE11, I'd say it will continue being a problem for a long time. 18% of my users are on IE11. Some industries (healthcare, for example) don't change if they don't perceive something to be broken.
enriquto 7y ago
I cannot visually notice any delay. It seems instantaneous in my browser.
- bhauer 7y ago
  Same. I am really picky about performance, and I've never seen anything but instantaneous response from collapsing comments. I just tried it right now on a few example threads from the home page and confirmed that it's instantaneous. I would estimate less than 50ms. I can rapidly click a + and - and collapse/expand a comment tree more or less as fast as I can click (the limiting factor being that my browser wants to select the + button itself as text). For whatever it's worth, I use Firefox on Windows. But I just fired up Chrome and gave it a test, and I see the same thing there. But I don't do a whole lot of HN comment browsing on my mobile device, so I suppose that's the difference.
  - mfatica 7y ago
    I've only noticed on mobile
- Ajedi32 7y ago
  It's really only an issue on mobile when you're collapsing larger threads. Try collapsing the first comment in this thread, for example: https://news.ycombinator.com/item?id=14656945 https://news.ycombinator.com/item?id=14656945 Not terrible, but there's a noticeable (maybe ~1 second on my phone) delay. My desktop is fast enough that it still feels instant.
  - krapp 7y ago
    One answer to this is to paginate long threads so there's a definite upper limit to the length and depth of the thread on any page.
    - enriquto 7y ago
      this is a bit ridiculous... folding a few thousand lines of plain text should be fast no matter what. If it isn't, then there's something quite wrong.
gowld 7y ago
I suspect the pg answer to this question is "there's too much noise on some posts, and deterring interaction with posts of 300+ comments is a feature, not a bug.
- bburinanan 7y ago
  lol
kabwj 7y ago
It’s fast on Safari mobile but very slow on Firefox desktop. Goes to show many things.
Waterluvian 7y ago
I have a budget moto and HN comments section is completely unusable on Chrome but perfectly smooth on Firefox. Haven't explored why. On Chrome any comment section with more than about 100 comments grinds to a halt. If I try to type in a comment there's a three second delay waiting for every letter to appear.
- deburo 7y ago
  The typing thing also happens on 4chan and reddit for me. I wonder what's causing this.
- thewarpaint 7y ago
  I didn't want to make the post even bigger and deal with other browsers but that's a good idea for a follow-up.
wierdaaron 7y ago
A lot could be gained by simply storing the jQuery objects instead of doing the lookups multiple times per method. That’s a lot of unnecessary dom traversal.
bozoUser 7y ago
In the similar vein, feature request to sort by best/new :)
deleted 7y ago
[deleted]
polote 7y ago
Fun fact In a previous company we were building a session replay tool, and as you may know it is pretty complex to evaluate the impact of the single script on a page. The only way we found to test the impact of the script was to execute it on a page with the most mutations on an event, and try to see how much the event was impacted. The only place where we found a heavy use of mutations was the hackernews page that had more than 100 comments in a thread. And the first time we tested, we tripled the time to collapse the thread
oftenwrong 7y ago
I dug into the collapsing code recently because I wanted to make a script that collapses HN threads by default. In other words, only the top-level comments would be shown at first. To me this makes more sense. If I am interested in continuing a thread, I can expand it. If I am not interested in continuing, I don't want to have to scroll past its children. According to the comments here, maybe I would be better off implementing my own collapsing scheme.
dangus 7y ago
If you don't mind me being negative here for a moment: 1. It's not your website, why spend so much time and effort on dissecting the issue? If one did this for every webpage they visited it'd be a more than a full time job. 2. Does it really look like Hacker News has had any serious development effort poured into it anytime recently? What incentive does YC have to put time and money into a forum that generates zero revenue? 3. Do we really expect web browsing to be pleasant on a 3 year old budget smartphone with a Qualcomm 617? The Moto G4 Plus is solidly in the bottom 25% of phones listed here: https://www.androidbenchmark.net/cpumark_chart.html https://www.androidbenchmark.net/cpumark_chart.html
- Insanity 7y ago
  As for your first point, my answer would be because it can be fun to do so.
  - thewarpaint 7y ago
    Fun, interesting, you learn stuff, what's not to like?
- JeremyBanks 7y ago
  "Generates zero revenue" is silly. Hacker News has certainly generated tens of millions of indirect profits for YC; probably much more. It's tremendous marketing value for the organization and its companies.
  - deleted 7y ago
    [deleted]
- thewarpaint 7y ago
  1. Too much free time I guess. I'm a frontend guy, I find frontend stuff interesting. 2. No. Probably none. 3. Are you saying that you are willing to sacrifice the user experience of the bottom 25% of the users of a website?
  - 7y ago
someexgamedev 7y ago
I wrote a browser extension to collapse HN comments past the first depth and ended up just attaching their css classes and setting the sub-comment count myself. It was the fastest behavior I could find at the time for reasons I've since forgotten. I did try to use their existing js but it took forever to collapse the page. Here's my collapse code if interested https://github.com/a13o/disengaged/blob/master/src/hacker-news/collapse-deep-comments.js https://github.com/a13o/disengaged/blob/master/src/hacker-ne...
env123 7y ago
Refined hacker news, anyone? https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news

190 points by thewarpaint 7y ago

Or just use my Greasemonkey/Tampermonkey plugin which disables the Hackernews collapsible comments and introduces its own collapsible comments logic, which is much faster and has a variety of convenience features: http://mental-reverb.com/creations.php http://mental-reverb.com/creations.php

thewarpaint 7y ago
The slow behaviour is mostly noticeable on mobile Chrome, but will have a look, thanks for sharing.

abakker 7y ago

I am just now realizing that HN comments are collapsible...I wonder if anyone has ever looked at upvote/scroll behavior when the collapse button is used vs not? There are a ton of threads where the top comment is also a non-sequitur, but I know when that happens I frequently don't scroll past the hundreds of replies to see what the other first level comments are.

AareyBaba 7y ago
Okay. I'll bite. What is everyone talking about ? I see an upvote triangle, a down vote [-] and nothing else. Is this a mobile only thing ? I can't see a way to collapse comments under Chrome or Safari on a desktop. I am out of the loop what's the secret ?
- thewarpaint 7y ago
  [-] is not a downvote button, but the collapsing one.
  - AareyBaba 7y ago
    TIL ... after years on HN. For anyone else out of the loop like me: Where's the downvote button? https://news.ycombinator.com/item?id=17731487 https://news.ycombinator.com/item?id=17731487
    - kingosticks 7y ago
      It's not available until you have a certain amount of karma. I think it's 500 or thereabouts.

ha99ja 7y ago

That is really ugly code.

nicolaslem 7y ago
For me HN is a great reminder that done is better than perfect.
- mda 7y ago
  More like, "It kinda works, we don't give a crap".
  - rolltiide 7y ago
    as it should be think about all the other things perfectionist coders and product managers could be working on
  - jimbob45 7y ago
    The Craigslist special
  - archy_ 7y ago
    Yep, and they could easily find volunteers to improve the site (make the login page look nicer, maybe even implement 2fa) but there's no incentive to improve
  - dang 7y ago
    That's not nice. I don't mind if you diss our code. But I do mind if you say we don't give a crap.
    - thewarpaint 7y ago
      OP here. Dissing was not the intention of my post, if I can help in any way to improve HN let me know, would be more than glad to do so. Peace!
- Toine 7y ago

llamathrowaway 7y ago

> There is also a GET request to https://news.ycombinator.com/collapse?id=1234567 https://news.ycombinator.com/collapse?id=1234567 to save the state of the collapsed/expanded comment if the user is logged in, but it's an async request so it doesn't have an impact. Is this a correct place to use 'GET'?

dexen 7y ago
>Is this a correct place to use 'GET'? Not at all; GET requests are specified [0] to not cause any modifications to the resources (aside of meta-data like logging etc.). It should also be 100% safe for web spiders to issue any GET at any time [1], server overload aside. I presume it's an artifact of earlier implementation -or just an idea- to have the collapse work without JavaScript. It would be doable with a normal A HREF with the current link format of https://news.ycombinator.com/collapse?id=20336970 https://news.ycombinator.com/collapse?id=20336970 -- [0] "In particular, the convention has been established that the GET and HEAD methods SHOULD NOT have the significance of taking an action other than retrieval." - https://tools.ietf.org/html/rfc2616#section-9.1.1 https://tools.ietf.org/html/rfc2616#section-9.1.1 [1] in the early day of the internet, a friend lost most of his CRM's content because he had record deletes implemented as A HREF issuing GET requests. Having learned the lesson, he instead turned to JavaScript code issuing GETs...
- cheschire 7y ago
  The weight of a well used ellipsis...
- hjek 7y ago
  The 'logout' button is also a GET request.
- baddox 7y ago
  I thought that the normal way to have this work without JavaScript would be to have a form tag with the submit button styled to look like the collapse button.
- merb 7y ago

pg_bot 7y ago

I would use the <details> tag to solve this problem. Most people don't know this exists and I have no idea why. You would probably have to rewrite the html so it no longer uses tables but I don't really consider that to be a negative. I would also question why we are saving collapsed comments. I feel like this is something that doesn't need to be persisted forever. If you want this behavior why not use local storage instead?

giancarlostoro 7y ago
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de... This is awesome! I had no idea! You're right, I don't think most people even realize. There's often times I get upset when using Bootstrap or just doing CSS and look up ways to do specific things and don't find out of the box solutions, this is one time I'm glad I found a decent alternative. One case that comes to mind is collapsible trees and dropdown boxes where you can type / search on them, and anything with dropdown boxes like checkmarks gets a wee bit hacky.
- jhomedall 7y ago
  Note that it's not yet supported by Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/ https://developer.microsoft.com/en-us/microsoft-edge/platfor...
  - Ajedi32 7y ago
    Edge is turning into Chromium soon, so that shouldn't be a problem for much longer.
    - reaperducer 7y ago
      Considering there are millions of people still using IE11, I'd say it will continue being a problem for a long time. 18% of my users are on IE11. Some industries (healthcare, for example) don't change if they don't perceive something to be broken.

enriquto 7y ago

I cannot visually notice any delay. It seems instantaneous in my browser.

bhauer 7y ago
Same. I am really picky about performance, and I've never seen anything but instantaneous response from collapsing comments. I just tried it right now on a few example threads from the home page and confirmed that it's instantaneous. I would estimate less than 50ms. I can rapidly click a + and - and collapse/expand a comment tree more or less as fast as I can click (the limiting factor being that my browser wants to select the + button itself as text). For whatever it's worth, I use Firefox on Windows. But I just fired up Chrome and gave it a test, and I see the same thing there. But I don't do a whole lot of HN comment browsing on my mobile device, so I suppose that's the difference.
- mfatica 7y ago
  I've only noticed on mobile
Ajedi32 7y ago
It's really only an issue on mobile when you're collapsing larger threads. Try collapsing the first comment in this thread, for example: https://news.ycombinator.com/item?id=14656945 https://news.ycombinator.com/item?id=14656945 Not terrible, but there's a noticeable (maybe ~1 second on my phone) delay. My desktop is fast enough that it still feels instant.
- krapp 7y ago
  One answer to this is to paginate long threads so there's a definite upper limit to the length and depth of the thread on any page.
  - enriquto 7y ago
    this is a bit ridiculous... folding a few thousand lines of plain text should be fast no matter what. If it isn't, then there's something quite wrong.

gowld 7y ago

I suspect the pg answer to this question is "there's too much noise on some posts, and deterring interaction with posts of 300+ comments is a feature, not a bug.

bburinanan 7y ago
lol

kabwj 7y ago

It’s fast on Safari mobile but very slow on Firefox desktop. Goes to show many things.

Waterluvian 7y ago

I have a budget moto and HN comments section is completely unusable on Chrome but perfectly smooth on Firefox. Haven't explored why. On Chrome any comment section with more than about 100 comments grinds to a halt. If I try to type in a comment there's a three second delay waiting for every letter to appear.

deburo 7y ago
The typing thing also happens on 4chan and reddit for me. I wonder what's causing this.
thewarpaint 7y ago
I didn't want to make the post even bigger and deal with other browsers but that's a good idea for a follow-up.

wierdaaron 7y ago

A lot could be gained by simply storing the jQuery objects instead of doing the lookups multiple times per method. That’s a lot of unnecessary dom traversal.

bozoUser 7y ago

In the similar vein, feature request to sort by best/new :)

deleted 7y ago

[deleted]

polote 7y ago

Fun fact In a previous company we were building a session replay tool, and as you may know it is pretty complex to evaluate the impact of the single script on a page. The only way we found to test the impact of the script was to execute it on a page with the most mutations on an event, and try to see how much the event was impacted. The only place where we found a heavy use of mutations was the hackernews page that had more than 100 comments in a thread. And the first time we tested, we tripled the time to collapse the thread

oftenwrong 7y ago

I dug into the collapsing code recently because I wanted to make a script that collapses HN threads by default. In other words, only the top-level comments would be shown at first. To me this makes more sense. If I am interested in continuing a thread, I can expand it. If I am not interested in continuing, I don't want to have to scroll past its children. According to the comments here, maybe I would be better off implementing my own collapsing scheme.

dangus 7y ago

If you don't mind me being negative here for a moment: 1. It's not your website, why spend so much time and effort on dissecting the issue? If one did this for every webpage they visited it'd be a more than a full time job. 2. Does it really look like Hacker News has had any serious development effort poured into it anytime recently? What incentive does YC have to put time and money into a forum that generates zero revenue? 3. Do we really expect web browsing to be pleasant on a 3 year old budget smartphone with a Qualcomm 617? The Moto G4 Plus is solidly in the bottom 25% of phones listed here: https://www.androidbenchmark.net/cpumark_chart.html https://www.androidbenchmark.net/cpumark_chart.html

Insanity 7y ago
As for your first point, my answer would be because it can be fun to do so.
- thewarpaint 7y ago
  Fun, interesting, you learn stuff, what's not to like?
JeremyBanks 7y ago
"Generates zero revenue" is silly. Hacker News has certainly generated tens of millions of indirect profits for YC; probably much more. It's tremendous marketing value for the organization and its companies.
- deleted 7y ago
  [deleted]
thewarpaint 7y ago
1. Too much free time I guess. I'm a frontend guy, I find frontend stuff interesting. 2. No. Probably none. 3. Are you saying that you are willing to sacrifice the user experience of the bottom 25% of the users of a website?
- 7y ago

someexgamedev 7y ago

I wrote a browser extension to collapse HN comments past the first depth and ended up just attaching their css classes and setting the sub-comment count myself. It was the fastest behavior I could find at the time for reasons I've since forgotten. I did try to use their existing js but it took forever to collapse the page. Here's my collapse code if interested https://github.com/a13o/disengaged/blob/master/src/hacker-news/collapse-deep-comments.js https://github.com/a13o/disengaged/blob/master/src/hacker-ne...

env123 7y ago

Refined hacker news, anyone? https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news