How do I optimise Cocoa drawing to ensure smooth scrolling

Question

I am drawing graphs on NSView using standard Cocoa drawing APIs. See image below. There are multiple graphs on the NSView which is in a scrollView. Each graph has around 1440 data points and scrolling performance struggles a bit because of redrawing that is being done.

Is there any way to ensure the graphics are only drawn once such that the image can be scrolled up and down smoothly ?

This same view is used to generate a PDF output file.

Given the drawing does not actually need to change unless the view is resized, and this does not happen, is there any way to prevent the view from redrawing itself during scrolling. Hopefully there is a simple switch to ensure the view draw itself once and keeps that in memory!?

The basic code is in the NSView subclass draw() function.

override func draw(_ dirtyRect: NSRect) {

    drawAxis()

    // Only draw the graph axis during live resize
    if self.inLiveResize {
        return
    }

    plot1()
    plot2()
    plot3()
    ...

 }

 func plot1(){

     for value in plot1Data {

        path = NSBezierPath()

        if isFirst {
           path?.move(to: value)
        } else {
           path?.line(to: value)
        }
     }
 }

Answer 1

Apple has pretty comprehensive advice in their View Programming Guide: Optimizing View Drawing article.

It doesn't appear that you're taking even the minimal steps to avoid drawing what you don't have to. For example, what code you've shown doesn't check the dirtyRect to see if a given plot falls entirely outside of it and therefore doesn't need to be drawn.

As described in that article, though, you can often do even better using the getRectsBeingDrawn(_:count:) and/or needsToDraw(_:) methods.

The scroll view can, under some circumstances, save what's already been drawn so your view doesn't need to redraw it. See the release notes for Responsive Scrolling. One requirement of this, though, is that your view needs to be opaque. It needs to override isOpaque to return true. It's not enough to just claim to be opaque, though. Your view actually has to be opaque by drawing the entirety of the dirty rect on every call to draw(). You can fill the dirty rect with a background color before doing other drawing to satisfy this requirement.

Be sure the clip view's copiesOnScroll property is set to true, too. This can be done in IB (although it's presented as an attribute of the scroll view, there) or in code. It should be true by default.

Note that the overdraw that's part of Responsive Scrolling will happen incrementally during idle time. That will involve repeated calls to your view's draw() method. If you haven't optimized that to only draw the things that intersect with the dirty rect(s), then those calls are going to be slow/expensive. So, be sure to do that optimization.