Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight.js is slow #1036

Closed
tommy351 opened this issue Feb 6, 2015 · 18 comments
Closed

Highlight.js is slow #1036

tommy351 opened this issue Feb 6, 2015 · 18 comments

Comments

@tommy351
Copy link
Member

@tommy351 tommy351 commented Feb 6, 2015

Highlight.js is slow. After turning off the highlighting, the loading speed dropped from 46s to 16s. Maybe we should change another highlighting library or use SyntaxHighlighter or Prism to let browsers do this job.

@tommy351 tommy351 added this to the 3.0 milestone Feb 6, 2015
@Xuanwo
Copy link
Contributor

@Xuanwo Xuanwo commented Feb 6, 2015

From my point of view, it is worthwhile sacrificing some loading time for a quicker open in browser.
And I don't know how much time browsers do this job will take, can you give out some data?

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 6, 2015

Actually it's fast to do highlight on browsers, since browsers only need to render a page at a time and Hexo has to render hundreds of pages in a few seconds. It takes lots of CPU time to do this.

@Xuanwo
Copy link
Contributor

@Xuanwo Xuanwo commented Feb 6, 2015

OK, I will support your idea.

Since I use Travis CI to do this, so I'm not care about the time highlight.js used, hahaha

@tommy351 tommy351 removed the bug label Feb 6, 2015
@iissnan
Copy link

@iissnan iissnan commented Feb 6, 2015

Is there any other lib which has high performance than highlight.js on rendering pages?

@iissnan
Copy link

@iissnan iissnan commented Feb 6, 2015

I mean rendering pages in command line, not in browsers.

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 9, 2015

@iissnan Maybe we can give highlights a try. It's used by atom.

@iissnan
Copy link

@iissnan iissnan commented Feb 10, 2015

@tommy351 Executed a simple performance test with hexo-util and highlights.

highlights spends only 1469, while hexo-util spends 3793.

LGTM.

@iissnan
Copy link

@iissnan iissnan commented Feb 10, 2015

By the way, if this change has effect on theme highlight styles?
If yes, than this may be a breaking change, should be highlighted in release notes.

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 10, 2015

hexo-util may run slow at the first time because it needs to load highlight.js. The speed may be faster after the first run.

The styles may need changes if we change the library.

@iissnan
Copy link

@iissnan iissnan commented Feb 10, 2015

Sorry for the incorrect testing.
Using highlight.js instead of hexo-util, time drops to 3215.

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 10, 2015

Thanks for the testing. I'll try to optimize that function.

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 10, 2015

I just made a benchmark and this is the result:

[00:38:28]    highlight.js - auto detect x 33.79 ops/sec ±1.83% (61 runs sampled)
[00:38:34]    highlight.js - language set x 1,092 ops/sec ±1.46% (90 runs sampled)
[00:38:39]    util.highlight - auto detect x 34.44 ops/sec ±1.12% (62 runs sampled)
[00:38:45]    util.highlight - language set x 1,100 ops/sec ±1.54% (92 runs sampled)
[00:38:45] Fastest tests are util.highlight - language set,highlight.js - language set at 1.01x faster than highlight.js - language set

There's no large differences between them. Here's the source code: https://gist.github.com/tommy351/48401ae93dbf6aa2e94d

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Feb 10, 2015

And this is the test for highlights.

[00:46:25]    highlight.js - auto detect x 35.18 ops/sec ±2.72% (56 runs sampled)
[00:46:31]    highlight.js - language set x 1,042 ops/sec ±9.13% (77 runs sampled)
[00:46:37]    util.highlight - auto detect x 34.77 ops/sec ±1.15% (56 runs sampled)
[00:46:42]    util.highlight - language set x 1,162 ops/sec ±1.37% (89 runs sampled)
[00:46:48]    highlights x 2,098 ops/sec ±1.57% (87 runs sampled)
[00:46:48] Fastest test is highlights at 2.0x faster than highlight.js - language set and util.highlight - language set

P.S. highlights detects languages automatically.

@Xuanwo
Copy link
Contributor

@Xuanwo Xuanwo commented Feb 10, 2015

WOW, it's sound like highlights is good.

@zphj1987
Copy link

@zphj1987 zphj1987 commented Mar 30, 2015

I tell the md the tab text what it is,like bash ,like raw ,the highlight make it so fast

@leesei
Copy link
Member

@leesei leesei commented Dec 8, 2015

Any plan to move to highlights?

Also see #1543.

@tommy351
Copy link
Member Author

@tommy351 tommy351 commented Dec 8, 2015

Remove highlight.js may need to update the stylesheet of all curernt themes.

@leesei leesei added the highlight label Dec 8, 2015
@leesei leesei added the #perfmatters label Feb 22, 2016
@NoahDragon NoahDragon modified the milestones: 4.0, 3.0 Apr 6, 2017
@NoahDragon NoahDragon mentioned this issue Apr 6, 2017
33 of 55 tasks complete
@curbengh
Copy link
Contributor

@curbengh curbengh commented Sep 15, 2019

@hexojs/core
Continuing from hexojs/hexo-util#19 (comment).

What do you think of atom highlights? feasible?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

7 participants
You can’t perform that action at this time.