PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.33k stars 1.29k forks source link

prism@1.6.0 extremely slow with JS snippet with comments (~8s on Chrome/macbookpro) #1152

Closed gre closed 7 years ago

gre commented 7 years ago
screen shot 2017-07-05 at 12 43 20

This seems to be related to the comments because if I remove all of them, it no longer hangs for 8 seconds!

//@flow
import React from "react";
import { Uniform, Shaders, Node, GLSL, NearestCopy } from "gl-react";
import { Surface } from "gl-react-dom";
import timeLoop from "../../HOC/timeLoop";

export const shaders = Shaders.create({
  InitGameOfLife: {
    // returns white or black randomly
    frag: GLSL`
precision highp float;
varying vec2 uv;
float random (vec2 uv) {
  return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453);
}
void main() {
  gl_FragColor = vec4(vec3(step(0.5, random(uv))), 1.0);
}`
  },
  GameOfLife: {
    // implement Game Of Life.
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float size;
uniform sampler2D t; // the previous world state
void main() {
  float prev = step(0.5, texture2D(t, uv).r);
  float c = 1.0 / size;
  float sum =
  step(0.5, texture2D(t, uv + vec2(-1.0, -1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2(-1.0,  0.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2(-1.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 0.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0,  0.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0, -1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 0.0, -1.0)*c).r);
  float next = prev==1.0 && sum >= 2.0 && sum <= 3.0 || sum == 3.0 ? 1.0 : 0.0;
  gl_FragColor = vec4(vec3(next), 1.0);
}`
  }
});

const refreshEveryTicks = 20;

export const GameOfLife = ({ tick }) => {
  // Changing size is "destructive" and will reset the Game of Life state
  const size = 16 * (1 + Math.floor(tick / refreshEveryTicks));
  // However, we can conditionally change shader/uniforms,
  // React reconciliation will preserve the same <Node> instance,
  // and our Game of Life state will get preserved!
  return tick % refreshEveryTicks === 0
    ? <Node
        shader={shaders.InitGameOfLife}
        width={size}
        height={size}
        backbuffering // makes Node holding 2 fbos that get swapped each draw time
        sync // force <Node> to draw in sync each componentDidUpdate time
      />
    : <Node
        shader={shaders.GameOfLife}
        width={size}
        height={size}
        backbuffering
        sync
        uniforms={{
          t: Uniform.Backbuffer, // Use previous frame buffer as a texture
          size
        }}
      />;
};

const GameOfLifeLoop = timeLoop(GameOfLife, { refreshRate: 20 });

export default () => (
  <Surface width={384} height={384}>
    <NearestCopy>
      <GameOfLifeLoop />
    </NearestCopy>
  </Surface>
);
Golmote commented 7 years ago

Thanks for reporting, the performance issue should be fixed now. (Though the Node tags are still not highlighted since Prism does not support comments in those.)

gre commented 7 years ago

woo, cool thanks