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

Open
tommy351 opened this Issue Feb 6, 2015 · 17 comments

Comments

6 participants
@tommy351
Member

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

This comment has been minimized.

Show comment
Hide comment
@Xuanwo

Xuanwo Feb 6, 2015

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 6, 2015

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@Xuanwo

Xuanwo Feb 6, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan Feb 6, 2015

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

iissnan commented Feb 6, 2015

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

@iissnan

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan Feb 6, 2015

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

iissnan commented Feb 6, 2015

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

@tommy351

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 9, 2015

Member

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

Member

tommy351 commented Feb 9, 2015

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

@iissnan

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan 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 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

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan 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.

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

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 10, 2015

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan Feb 10, 2015

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

iissnan commented Feb 10, 2015

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

@tommy351

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 10, 2015

Member

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

Member

tommy351 commented Feb 10, 2015

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

@tommy351

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 10, 2015

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Feb 10, 2015

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@Xuanwo

Xuanwo Feb 10, 2015

Contributor

WOW, it's sound like highlights is good.

Contributor

Xuanwo commented Feb 10, 2015

WOW, it's sound like highlights is good.

@zphj1987

This comment has been minimized.

Show comment
Hide comment
@zphj1987

zphj1987 Mar 30, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@leesei

leesei Dec 8, 2015

Member

Any plan to move to highlights?

Also see #1543.

Member

leesei commented Dec 8, 2015

Any plan to move to highlights?

Also see #1543.

@tommy351

This comment has been minimized.

Show comment
Hide comment
@tommy351

tommy351 Dec 8, 2015

Member

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

Member

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 referenced this issue Apr 6, 2017

Open

Hexo 4.0 Roadmap #2492

10 of 43 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment