Browse Source

Performance improvements when rendering pages

Thibaut Courouble 9 years ago
parent
commit
af8998453a

+ 6 - 4
assets/javascripts/views/content/entry_page.coffee

@@ -40,11 +40,13 @@ class app.views.EntryPage extends app.View
     @trigger 'loaded'
     return
 
-  CLIPBOARD_LINK = '<a class="_pre-clip" title="Copy to clipboard" tabindex="-1"></a>'
-  PRE_TAGS = /<pre[^>]*>/g
-
   addClipboardLinks: ->
-    @el.innerHTML = @el.innerHTML.replace(PRE_TAGS, "$&#{CLIPBOARD_LINK}")
+    unless @clipBoardLink
+      @clipBoardLink = document.createElement('a')
+      @clipBoardLink.className = '_pre-clip'
+      @clipBoardLink.title = 'Copy to clipboard'
+      @clipBoardLink.tabIndex = -1
+    el.appendChild(@clipBoardLink.cloneNode()) for el in @el.querySelectorAll('pre')
     return
 
   LINKS =

+ 26 - 3
assets/javascripts/views/pages/base.coffee

@@ -1,19 +1,42 @@
 class app.views.BasePage extends app.View
   constructor: (@el, @entry) -> super
 
+  deactivate: ->
+    if super
+      @highlightNodes = []
+
   render: (content, fromCache = false) ->
+    @highlightNodes = []
+    @previousTiming = null
     @addClass "_#{@entry.doc.type}" unless @constructor.className
     @html content
     @prepare?() unless fromCache
     @activate()
     @delay @afterRender if @afterRender
+    $.requestAnimationFrame(@paintCode) if @highlightNodes.length > 0
     return
 
   highlightCode: (el, language) ->
     return unless language
+    language = "language-#{language}"
     if $.isCollection(el)
-      @highlightCode e, language for e in el
+      for e in el
+        e.classList.add(language)
+        @highlightNodes.push(e)
     else if el
-      el.classList.add "language-#{language}"
-      Prism.highlightElement(el)
+      el.classList.add(language)
+      @highlightNodes.push(el)
+    return
+
+  paintCode: (timing) =>
+    if @previousTiming
+      if Math.round(1000 / (timing - @previousTiming)) > 50 # fps
+        @nodesPerFrame = Math.round(Math.min(@nodesPerFrame * 1.25, 50))
+      else
+        @nodesPerFrame = Math.round(Math.max(@nodesPerFrame * .8, 10))
+    else
+      @nodesPerFrame = 10
+    Prism.highlightElement(el) for el in @highlightNodes.splice(0, @nodesPerFrame)
+    $.requestAnimationFrame(@paintCode) if @highlightNodes.length > 0
+    @previousTiming = timing
     return