Javascript 如何提高获取api JSON下载速度或加载图标？

正如标题所示。如何特别针对注释提高fetchapi JSON下载速度

试图将Javascript保存到ES6

单击帖子时，它将运行getSelectedPost和GetComments函数。为什么获取注释JSON文件这么慢？这是因为它只是一个大文件吗

我可以添加什么来提高性能和/或潜在的加载图标

谢谢

getPosts； document.addEventListener“单击”函数事件{ 如果event.target.matches.post'| | event.target.parentElement.matches.post'{ const postId=event.target.getAttribute'data-postId'| | event.target.parentElement.getAttribute'data-postId'； getSelectedPostpostId； getCommentspostId； } } 函数getPosts{ 康斯特邮政公司https://jsonplaceholder.typicode.com/posts'; 回帖 .thenresponse=>response.json .thendata=>{ 用于数据的const post{ 常量标记=` ${post.title} ${post.body}

`; document.getElementById'back'。style.display='none'； const grid=document.querySelector.grid； grid.innerHTML+=； grid.innerHTML+=标记； } } .catcherr=>{ console.error； } } 函数getSelectedPostpostId{ 常量postSingle=https://jsonplaceholder.typicode.com/posts/ +职位； 回帖单 .thenresponse=>response.json .thendata=>{ 常量标记=` ${data.title} ${data.body}

`; document.getElementById'back'。style.display='block'； const single=document.querySelector'.single'； const grid=document.querySelector.grid； grid.innerHTML=； single.innerHTML=； single.innerHTML=标记； } .catcherr=>{ console.error； } } 函数getCommentspostId{ 常量后命令=https://jsonplaceholder.typicode.com/posts/ +posted+/评论； console.logpostComments 获取后命令 .thenresponse=>response.json .thendata=>{ 对于数据的常量注释{ 常量标记=` ${comment.name} ${comment.body}

`; const comments=document.querySelector.comments'； comments.innerHTML+=； comments.innerHTML+=标记； } } .catcherr=>{ console.error； } } document.getElementById'back'。addEventListener'click'，getPosts； 身体{ 字体系列：roboto； } 背{ 显示：无； 边缘底部：1rem； 光标：指针； } .集装箱{ 最大宽度：78.75雷姆； 宽度：100%； 保证金：0自动； 填充：0 1rem； } .电网{ 显示：网格； 网格间距：1rem； 网格模板列：repeat5，1fr； } .邮政{ 背景色：ccc； 填充：1.5雷姆； 过渡：全部3秒； } .post:悬停，.post.active{ 背景色：黑色； 颜色：白色； 光标：指针； } .post.active{ 边缘底部：1rem； } .post.active：悬停{ 游标：默认值； } .title、.name{ 字体大小：粗体； } 返回

---

我认为需要重构的一件事是使用innerHTML，在下面的代码中，我只使用了一次

getPosts； document.addEventListener“单击”函数事件{ 如果event.target.matches.post'| | event.target.parentElement.matches.post'{ const postId=event.target.getAttribute'data-postId'| | event.target.parentElement.getAttribute'data-postId'； getSelectedPostpostId； getCommentspostId； } } 函数getPosts{ 康斯特邮政公司https://jsonplaceholder.typicode.com/posts'; 回帖 .thenresponse=>response.json .thendata=>{ 设grid=； 用于数据的const post{ 常量标记=` ${post.title} ${post.body}

`; document.getElementById'back'。style.display='none'； 网格+=标记； } 返回网格； }.thengrid=>{ document.querySelector.grid.innerHTML=grid； } .catcherr=>{ console.error； } } 函数getSelectedPostpostId{ 常量postSingle=https://jsonplaceholder.typicode.com/posts/ +职位； 回帖单 .thenresponse=>response.json .thendata=>{ 常量标记=` ${data.title} ${data.body}

`; document.getElementById'back'。style.display='block'； const single=document.querySelector'.single'； const grid=document.querySelector.grid； grid.innerHTML=； single.innerHTML=； single.innerHTML=标记； } .catcherr=>{ console.error； } } 函数getCommentspostId{ 常量后命令=https://jsonplac eholder.typicode.com/posts/+postd+/评论； console.logpostComments 获取后命令 .thenresponse=>response.json .thendata=>{ 让评论=； 对于数据的常量注释{ 常量标记=` ${comment.name} ${comment.body}

`; 注释+=标记； } 返回评论； }.thencomments=>{ document.querySelector.comments.innerHTML=comments； } .catcherr=>{ console.error； } } document.getElementById'back'。addEventListener'click'，getPosts； 身体{ 字体系列：roboto； } 背{ 显示：无； 边缘底部：1rem； 光标：指针； } .集装箱{ 最大宽度：78.75雷姆； 宽度：100%； 保证金：0自动； 填充：0 1rem； } .电网{ 显示：网格； 网格间距：1rem； 网格模板列：repeat5，1fr； } .邮政{ 背景色：ccc； 填充：1.5雷姆； 过渡：全部3秒； } .post:悬停，.post.active{ 背景色：黑色； 颜色：白色； 光标：指针； } .post.active{ 边缘底部：1rem； } .post.active：悬停{ 游标：默认值； } .title、.name{ 字体大小：粗体； } 返回

---

你有没有尝试过任何改进性能的方法。你是说评论是大文件。为什么不只加载一些实际显示在网页上的评论，然后在滚动或类似事件中加载其余的评论呢