diff --git a/packages/docs-ui/src/views/doc-canvas-view.ts b/packages/docs-ui/src/views/doc-canvas-view.ts
index 8847619bc1c..9d97aa19ba0 100644
--- a/packages/docs-ui/src/views/doc-canvas-view.ts
+++ b/packages/docs-ui/src/views/doc-canvas-view.ts
@@ -25,6 +25,7 @@ import {
 import { DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_VIEW_KEY, VIEWPORT_KEY } from '@univerjs/docs';
 import type { IRender, IWheelEvent, RenderManagerService, Scene } from '@univerjs/engine-render';
 import { Documents, EVENT_TYPE, IRenderManagerService, Layer, ScrollBar, Viewport } from '@univerjs/engine-render';
+import { IEditorService } from '@univerjs/ui';
 import { BehaviorSubject, takeUntil } from 'rxjs';
 
 @OnLifecycle(LifecycleStages.Starting, DocCanvasView)
@@ -40,7 +41,8 @@ export class DocCanvasView extends RxDisposable {
     constructor(
         @IRenderManagerService private readonly _renderManagerService: RenderManagerService,
         @IConfigService private readonly _configService: IConfigService,
-        @IUniverInstanceService private readonly _currentUniverService: IUniverInstanceService
+        @IUniverInstanceService private readonly _currentUniverService: IUniverInstanceService,
+        @IEditorService private readonly _editorService: IEditorService
     ) {
         super();
         this._initialize();
@@ -190,6 +192,8 @@ export class DocCanvasView extends RxDisposable {
 
         scene.addObjects([documents], DOCS_COMPONENT_MAIN_LAYER_INDEX);
 
-        // scene.enableLayerCache(DOCS_COMPONENT_MAIN_LAYER_INDEX);
+        if (this._editorService.getEditor(documentModel.getUnitId()) == null) {
+            scene.enableLayerCache(DOCS_COMPONENT_MAIN_LAYER_INDEX);
+        }
     }
 }
diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts
index dc0aa281b30..ea683bbccca 100644
--- a/packages/engine-render/src/components/docs/document.ts
+++ b/packages/engine-render/src/components/docs/document.ts
@@ -270,6 +270,18 @@ export class Documents extends DocComponent {
 
             const finalAngle = vertexAngle - centerAngle;
 
+            if (this._isSkipByDiffBounds(page, pageTop, pageLeft, bounds)) {
+                const { x, y } = this._drawLiquid.translatePage(
+                    page,
+                    this.pageLayoutType,
+                    this.pageMarginLeft,
+                    this.pageMarginTop
+                );
+                pageLeft += x;
+                pageTop += y;
+                continue;
+            }
+
             this.onPageRenderObservable.notifyObservers({
                 page,
                 pageLeft,
@@ -538,6 +550,34 @@ export class Documents extends DocComponent {
         });
     }
 
+    private _isSkipByDiffBounds(page: IDocumentSkeletonPage, pageTop: number, pageLeft: number, bounds?: IViewportBound) {
+        if (bounds === null || bounds === undefined) {
+            return false;
+        }
+
+        const { pageWidth, pageHeight } = page;
+
+        const pageRight = pageLeft + pageWidth;
+
+        const pageBottom = pageTop + pageHeight;
+
+        const { left, top, right, bottom } = bounds.viewBound;
+
+        if (pageRight < left || pageBottom < top) {
+            return true;
+        }
+
+        if (pageLeft > right && pageWidth !== Number.POSITIVE_INFINITY) {
+            return true;
+        }
+
+        if (pageTop > bottom && pageHeight !== Number.POSITIVE_INFINITY) {
+            return true;
+        }
+
+        return false;
+    }
+
     // private _addSkeletonChangeObserver(skeleton?: DocumentSkeleton) {
     //     if (!skeleton) {
     //         return;