文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

从页面加载到数据请求，前端页面性能优化实践分享

前端优化的内容很多，按照粒度等级划分可以大致分为两类：页面优化级别和代码级别优化。 页面优化主要针对页面加载环节，包括：HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等内容。...不同位置的请求只会调用同一个图片，大大减少页面对服务器的请求次数，降低服务器的压力；这样也可以提高页面的加载速度，节约服务器的流量。...代码级别：减少数据请求次数 前面我们列举了在页面初始加载时的优化方法，然而在某些场景下这还不够，因为经常会出现页面展示和使用时，频繁请求服务来更新信息的场景。...例如在开发类Excel在线协同系统时，因为单元格业务相互独立，全屏刷新无法满足需求。我们只能定时从服务器获取每个单元格的值，检测到变化后展示在页面上。...这些最佳实践覆盖了页面加载和数据请求环节。在文章的后半部分，我们通过类Excel在线协同编辑的实例，详细介绍了“数据请求队列化”的实现，希望对您的前端开发有帮助。

2K60

下一代前端构建利器——Turbopack

Parallel Routes平行路由平行路由允许在同一布局中同时或有条件地呈现一个或多个页面。对于应用的高度动态部分（例如社交网站上的仪表板和源信息），平行路由可用于实现复杂的路由模式。4....Data fetching在next13.4版本中，组件默认为服务端组件，大大减少了请求数据时的代码篇幅：async function getData() {const res = await fetch...所有子页面都可以获取到fetch的数据.7....禁用缓存每次打包构建后，我们获取到的数据都是静态的，意味着无法获取到最新的数据async function getData() {const res = await fetch('https://api.example.com...这意味着只有在需要时才会重新生成页面，其他情况下将直接使用缓存的版本，提供更快的页面加载速度和更高的性能。

2.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Nextjs任意组件数据加载

    服务端组织数据 Nextjs提供了便捷强大的服务端渲染功能——getInitialProps()，通过这个方法可以简单为服务端和前端同时处理异步请求数据： const load = async () =...所以有理由为_Nextjs_的./pages之外的组件实现ssr数据异步加载。...客户端执行过程 初始化页面时（首次打开页面）： _app constructor() _app render() _page constructor() _page render() 客户端在首次打开页面时...数据加载方法注册 首先需要为我们组件提供一个注册异步加载数据的接口，组件可以利用这个接口注册异步加载数据的方法让框架统一去getInitialProps()执行。 ...., 'executeReport'); /** * app的getInitialProps会在服务端被调用一次，在前端每次切换页面时被调用。

    5.8K20

    React 设计模式 0x5：服务端渲染 SSR

    相对于客户端渲染（CSR，Client-Side Rendering），SSR 可以提高页面的首屏加载速度和搜索引擎优化（SEO），因为它可以在服务器端直接生成 HTML，并将静态资源（如 CSS、JavaScript...等）和页面数据一起返回给客户端，从而减少客户端的渲染工作量。...我们花更多的时间编写功能，而不是在构建工具和 Webpack 上挣扎 自动路由 NextJS 将项目结构化为页面，并添加路由 数据获取 根据应用程序的用例以不同的方式呈现内容 包括使用服务器端呈现或静态站点生成进行预渲染以及使用增量静态再生在运行时更新或创建内容...中间件 此功能使您可以在请求完成之前运行代码，以便在请求和重定向用户时更改响应到另一个路由 数据安全性 Next.js 不会阻塞浏览器以一次性下载和执行大量的 JavaScript 代码，它有潜力显着改善总阻塞时间...预渲染有两种类型，即： 静态生成（Static Generation） 服务器端渲染（Server-side Rendering） # 静态生成 在构建时生成 HTML 页面，这些页面将在每个请求上重用

    5.5K10

    Next.js的创建与使用

    NextJs是React的服务器渲染框架，区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果，本网站目前使用的前端框架就是NextJs 本文章默认你已将学会了React，如果你不会...React可以去搜索页面去搜索React相关的文章来学习一下React 下面我讲一下NextJs和React的区别，Reac他和其他两个框架的主要区别就是官方只会提供核心库剩余的像：路由（react-router...），状态管理（redex），或者css（css in js、scss）方案都由社区提供，而Next和React最大的区别就是路由以及成果物的渲染方式，核心库基本没有区别因为在NextJs官网声明了NextJs... ); } 这是我首页的源码 大家也注意到了每次我们在路由中导入变量是不在是...transition will happen after 100ms ) } } exportdefault withRouter(MyLink) 适用setTimeout进行延迟跳转路由时就是预加载的最佳适用环境

    4.7K20

    基于 Next.js 的 SSRSSG 方案了解一下？

    这意味着在呈现主页时，最初不会提供其他页面的代码，同时可确保即使您有数百个页面，主页也能按需快速加载。...仅加载您请求的页面的代码也意味着页面变得独立，如果某个页面抛出错误，应用程序的其余部分仍然可以工作。...在 Next.js 的生产版本中，每当 Link 组件出现在浏览器的视口中时，Next.js 都会在后台自动预取链接页面的代码。当您单击链接时，目标页面的代码已在后台加载，页面转换将近乎即时。...当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互。..... } } （3）客户端渲染时获取数据 如果不需要“预渲染”时候获取数据，即不需要“静态生成”和“服务端渲染”的时候获取数据，则可以在对应页面组件代内，编写网络请求相关代码。

    6.7K30

    手把手教你用神器nextjs一键导出你的github博客文章生成静态html！

    目标 配合nextjs实现一个命令把自己的github issues里的文章导出成自己的博客html页面。...这样的好处是 可以折腾 可以折腾 可以折腾 开玩笑的，真正的好处是 编写博客时可以利用github完善的编辑器。 可以把github issues作为自己的数据存储服务，不用担心数据丢失和维护。...config中填写client_id和client_secret可以用于取消请求限制。 （可选）使用now部署 进入out目录，然后执行now，页面就会自动部署了。...发起请求拉取自己github仓库里的博客，获取文章存成md格式在本地。 根据nextjs的约定，把生成的md文章改写成jsx，写入到pages目录下。...rebuild函数清空pages文件夹，防止同步不同账号的数据以后产生数据混乱，但是nextjs中我们可能会自定义_document.js或者_app.js，这玩意也不需要动态生成，所以我们就先在pages-template

    4.4K20

    Next.js + TypeScript 搭建一个简易的博客系统

    传统导航 我们先来看看从 page1 到 page2，传统导航是怎么实现的? ? 访问第一个页面 page1 时，浏览器请求 html，然后依次加载 css、js。...如果 public 中的静态资源没有加缓存，这样每次请求资源都会去请求服务器，造成资源浪费。 但是如果加了缓存，我们每次更新静态资源就必须更新资源名称，否则浏览器还是会加载旧资源。...然后我们借助 gray-matter 从 md 文件中解析数据。 lib/posts.tsx 这个文件导出 JSON 数据。...一是白屏，目前解决方法是在 AJAX 得到相应之前，页面中先加入 Loading。二是 SEO 不友好，因为搜索引擎访问页面时，默认不会执行 JS，只能看到 HTML，看不到 AJAX 请求的数据。...因为数据本来不在页面上，通过 ajax 请求后渲染到页面上。 文章列表都是前端渲染的，我们称之为客户端渲染。

    4.9K20

    梳理NextJS13两种路由下的不同渲染方式：SSG，ISR，SSR，RSC

    官方文档传送门：nextjs.org/docs SSR SSR也就是服务端渲染，页面在后端先获取到数据，然后发回前端注水渲染，如果你不是很熟悉，可以先看一下SSR相关的文章介绍。...getStaticProps：返回静态页面匹配成功后，需要加载的数据。...('path') || '/pokemon/[name]'; // 这里可以匹配fetch请求中指定的collection变量 const collection = request.nextUrl.searchParams.get...Nextjs在组件中指定了dynamicParams的值（true默认），当dynamicParams设置为true时，当请求尚未生成的路由段时，我们的页面将通过SSR这种方式来进行渲染。...传统 SSR 执行步骤 在服务器上，获取整个应用的数据。 在服务器上，将整个应用程序数据渲染为 HTML 并发送响应。 在浏览器上，加载整个应用程序的 JavaScript 代码。

    3K31

    一文讲解前端路由、后端路由、单页面应用、多页面应用

    前端路由 定义：主要用于单页面应用，大部分页面结构不变，只通过JS改变部分内容的使用（例如：react-router,vue-router） 优点：用户体验好，不需要每次都从服务器全部获取，在切换页面时快速展现给用户客户端渲染可以减轻服务器压力...，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。...单页面应用 优势： 实际上并不存在页面切换问题，因为整个网站只有一个HTML，通过预先加载好的JS控制页面显示会更流畅，而且可以附加各种动画和过度效果，用户体验更好。...，如果测试有误对漏掉一些BUG很可能影响后续功能 体积较大，首次加载时间较长，首页白屏问题 多页面应用 优势: 逻辑清楚页面直接几乎没有相互影响 单个页面体积小，加载速度快 劣势: 代码冗余 页面切换体验不好...，我们需要的是保证大部分三大框架优点的同时解决此问题，如果你们网站是纯静态的推荐使用预渲染，如果是根据AJAX动态更新的推荐使用NextJs/NuxtJs等服务器渲染框架 3.页面中传值问题 基本分为通过

    2.9K20

    动手练一练，使用 React 和 Next.js 做一个简单的博客网站（上）

    本篇文章，我将和大家一起使用 React 和 Next.js 技术从0到1创建一个博客网站，通过本案例，你将会学习到 Next.js 的以下内容： 如何创建一个基本的页面 如何通过已有的 Markdown...Next.Js 将每个页面单独打包，打开首页时会加载应用基础代码和首页代码，其它页面代码只会在打开时才去加载，这对于大型应用来说非常有用。...并且 NextJS 还支持页面预加载，在链接页面时可以选择是否在打开本页时就预先获取被链接页面的代码，这样打开链接时就不需要再发送网络请求，直接渲染！...Next.js 同时提供 SSR 技术渲染页面，在服务器上运行页面逻辑和呈现可以避免向客户端发送大量JavaScript，这有助于实现快速的交互时间 （TTI）；同时利用搜索引擎(SEO)优化，搜索引擎来抓取页面的时候...        ); } 当点击 /about 链接时，Next.js 会以 Ajax 的方式加载内容一次，并缓存起来，并在页面中呈现它。

    4.8K51

    初见next.js

    next 简介 　　 　　Next.js 是一个轻量级的 React 服务端渲染应用框架 　　 　　next 特点 　　 　　默认情况下由服务器呈现 　　 　　自动代码拆分可加快页面加载速度 　　...(路由与 pages 下的文件名称完全匹配) 　　 　　页面间的导航,我们可以 a 标签来进行导航.但是,它不会执行客户端导航.并且,每次点击浏览器将向服务器请求下一页,同时刷新页面.因此,为了支持客户端导航...下面的 3 个帖子,会出现对应的 title 页面 　　 　　们通过查询字符串参数（查询参数）传递数据,通过查询字符串传递任何类型的数据. 　　 　　...创建动态路由时,我们 id 放在方括号之间.这是页面接收到的查询参数的名称,因此/p/hello-nextjs 在 query 对象就是{ id: 'hello-nextjs'},我们可以使用 useRouter...获取远程数据 　　 　　实际上,我们通常需要从远程数据源获取数据.Next.js 自己有标准 API 来获取页面数据.我们通常使用异步函数 getInitialProps 来完成此操作 .这样,我们可以通过远程数据源获取数据到页面上

    6.1K00

    卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽

    让建站酷起来SSRSSR (server-side rendering)相对比较好理解，它算是是SPA大行其道之前主流的方式，简单来说就是服务端，拉取数据组装页面，返回前端HTML。...这种方式优点在于简单直接，每次访问都能够拿到最新数据。但缺点是有点费网，如果流量大，用户分布广就需要费不少功夫优化，这里不再展开。...这里的问题仍在在于数据，除非是经过特意的改造，一般网站的数据仍需要请求到一个中心化的源服务中。图片一方面用户体验仍然不佳，另一方面源服务压力仍然巨大，成本不低。...上面NextJs的ISR或多或少也是为了解决这个问题。当然另一个更彻底的思路，在边缘的节点上也能有数据持久化的能力，例如cloudflare，或者使用一些分布式的数据库，这里不再展开。...一点就是页面数据会变大(移动站点不太友好)，另一方面首次可交互时间也会延后。这里实际上就涉及Hydration注水的概念。

    2.3K50

    卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽

    让建站酷起来 SSR SSR (server-side rendering)相对比较好理解，它算是是SPA大行其道之前主流的方式，简单来说就是服务端，拉取数据组装页面，返回前端HTML。...这种方式优点在于简单直接，每次访问都能够拿到最新数据。但缺点是有点费网，如果流量大，用户分布广就需要费不少功夫优化，这里不再展开。...这里的问题仍在在于数据，除非是经过特意的改造，一般网站的数据仍需要请求到一个中心化的源服务中。 一方面用户体验仍然不佳，另一方面源服务压力仍然巨大，成本不低。...上面NextJs的ISR或多或少也是为了解决这个问题。当然另一个更彻底的思路，在边缘的节点上也能有数据持久化的能力，例如cloudflare，或者使用一些分布式的数据库，这里不再展开。...一点就是页面数据会变大(移动站点不太友好)，另一方面首次可交互时间也会延后。 这里实际上就涉及Hydration注水的概念。

    2.3K30

    如何优雅地部署一个 Serverless Next.js 应用

    bucket: serverless-nextjs-xxx 浏览器访问，打开调试控制台，可以看到访问的静态资源请求路径如下： ?...备注：之前由于都是将 .next 部署到了云函数，所以没法访问页面后，页面中的静态资源，如图片，都需要再次访问云函数，然后获取。...于是看似我们请求了一次云函数，而实际上云函数单位时间并发数，会根据页面静态资源请求数而增加，从而造成冷启动问题。 静态资源配置 CDN 上面我们已经将静态资源都部署到 COS 了，页面访问也快了很多。...函数在执行前，会先加载 Layer 中的文件到 /opt 目录下（云函数代码会挂载到 /var/user/ 目录下），同时会将 /opt 和 /opt/node_modules 添加到 NODE_PATH...description: Layer created by serverless component runtimes: - Nodejs10.15 - Nodejs12.16 version: 1 从输出可以清晰看到

    3.8K52

    有必要使用服务器端渲染(SSR)吗？

    传统 jsp、php、django 这些服务端渲染框架都是返回 html 字符串，类似于传统的 MPA 多页面模式。所以切换页面的时候就会刷新，重新请求 css 和 js 文件，用户体验比较差。...所以 nextjs 和 nuxtjs 不仅支持服务端渲染，还支持 SPA，常用的是对首页进行服务端渲染，其他页面依然保持 SPA 的无刷新访问模式。...支持 Post 请求 一个是重构的 h5 页面，项目以前是新加坡团队用 Python + Django 写的，所以有些页面是第三方网站 Post 提交表单打开的。...我们重构后的 H5 页面都挂在腾讯云 CDN 上面，不支持用 Post 打开的。为什么不改成 Get 呢？因为这是以前他们协定的，然后银行都是爸爸，他们不会为了我们去改协议的。...因为 Nuxt 初始化的时候会把这些数据存到 store 里面，后续再怎么刷新，这个文件也不会在服务端重新加载，因为模块会被 Node 缓存起来，所以日期就不会更新。

    11.1K30

    Q 前端首屏加载优化记录

    在NextJS构建时，默认的分包策略会对代码的粒度拆分的比较细，所以导致最终资源输出时，但是因为用户服务器的带宽不高，导致如果使用http2.0的优化策略，会导致每个页面访问时，资源并发多，带宽被平分。...最终包体积从1.26MB减低到958KB，减少约24%的体积。 资源加载策略问题 思考： 受限于Discuz !...深入业务优化 通过分析整个页面的加载，发现就算是js和css等静态资源加载完毕后，还是无法渲染有价值的内容，因为并不是静态页面的关系，代码运行时需要请求后端数据才能渲染出对应的组件，提供有价值的内容给用户...既然如此，我们能不能进一步减少首屏的代码体积，将依赖后端数据渲染的内容进行懒加载，这样就能既减少首屏所需要的代码量，也可以让懒加载的代码和数据请求同时进行。进一步优化首屏速度呢。...二期优化方案主要是对于首屏所需要的代码优先加载，对于页面中与接口数据高度依赖的模块，统一采用懒加载的方式，可以让用户更快的看到页面的呈现。

    1.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券