Css 如何避免不必要的文档读取操作

在angular中，我有一个子组件，该组件对100个文档进行读取操作，在HTML代码中，我添加了CSS规则

但是现在当我打开这个显示6*100文档读取操作的单页firestore时
如何防止这种情况？如果用户在同一页面上访问10次达1小时或直到文档发生任何更改，我只需要执行100次读取操作

@media only screen and (min-width:  1032px)
{
    .show-large-screen{
        display:block;
    }
    .show-small-screen{
        display:none;
    }
    .show-medium-large-screen{
        display:none;
    }
    
    .show-tab-screen{
        display:none;
    }
    .show-medium-tab-screen{
        display:none;
    }
    .show-mobile-screen{
        display:none;
    }
}
@media only screen and (max-width: 1031px) and (min-width: 1001px)
{
    .show-medium-large-screen{
        display:block;
    }
    .show-small-screen{
        display:none;
    }
    
    .show-large-screen{
        display:none;
    }
    .show-tab-screen{
        display:none;
    }
    .show-medium-tab-screen{
        display:none;
    }
    .show-mobile-screen{
        display:none;
    }
}
@media only screen and (max-width: 1000px) and (min-width:761px)
{
    .show-tab-screen{
        display:block;
    }
    .show-small-screen{
        display:none;
    }
    .show-medium-large-screen{
        display:none;
    }
    .show-large-screen{
        display:none;
    }
   
    .show-mobile-screen{
        display:none;
    }
    .show-medium-tab-screen{
        display:none;
    }
}
@media only screen and (max-width: 760px) and (min-width:600px)
{
    .show-medium-tab-screen{
        display:block;
    }
    .show-small-screen{
        display:none;
    }
    .show-medium-large-screen{
        display:none;
    }
    .show-large-screen{
        display:none;
    }
    .show-tab-screen{
        display:none;
    }
   
    .show-mobile-screen{
        display:none;
    }
}

@media only screen and (max-width: 599px) and (min-width:386px)
{
    .show-mobile-screen{
        display:block;
    }
    .show-small-screen{
        display:none;
    }
    .show-medium-large-screen{
        display:none;
    }
    .show-large-screen{
        display:none;
    }
    .show-tab-screen{
        display:none;
    }
    .show-medium-tab-screen{
        display:none;
    }
    
}
@media only screen and (max-width: 385px) and (min-width:10px)
{
    .show-small-screen{
        display:block;
    }
    .show-medium-large-screen{
        display:none;
    }
    .show-large-screen{
        display:none;
    }
    .show-tab-screen{
        display:none;
    }
    .show-medium-tab-screen{
        display:none;
    }
    .show-mobile-screen{
        display:none;
    }
}

this.firestore.collection(MillaStudioConfig.tablePages, ref => ref.where('page.title', '==', pageName).where('projectId', '==',  projectId).limit(1))
                .snapshotChanges()
                .pipe(take(1)).subscribe(value => {


                    value.forEach((val) => {
                        let p: MillaPage = val.payload.doc.data()['page'] as MillaPage;
                        if (p != null) {

                            p.id = val.payload.doc.id;

                            this.mApp.pages.push(p);

                        }
                    });
                });