网站建设方案对比分析,app开发商业计划书模板,icp备案管理系统,网站模糊设计说起数据加载的机制#xff0c;有一个绕不开的话题就是前端性能#xff0c;很多电商门户的首页其实都会做一些垂直的定制优化#xff0c;比如让请求在页面最早加载#xff0c;或者在前一个页面就进行预加载等等。随着react18的发布#xff0c;请求机制这一块也是被不断谈起…说起数据加载的机制有一个绕不开的话题就是前端性能很多电商门户的首页其实都会做一些垂直的定制优化比如让请求在页面最早加载或者在前一个页面就进行预加载等等。随着react18的发布请求机制这一块也是被不断谈起并且在后续其实也给出了明确的方向。
假如我们页面中有三个组件C1、C2、C3依次嵌套每个组件中有对应的请求F1、F2、F3通常大多数人会使用useeffect和state变量来实现数据流的获取这样就意味着必须在组件加载时才能发起请求所有数据获取都发生在组件的生命周期中如下图所示我们可以将这种获取数据的方式称作瀑布流渲染但是这种方式有一个问题是在这种方法中组件之间的数据获取是按顺序进行的这实际上意味着它们彼此阻塞如果组件的层级嵌套很深的话就会导致页面的加载时间特别长。 为了阻止组件间数据获取的这种顺序阻塞另一种方法就是在组件加载前可以使用Promise.all获取所有的请求数据这样在组件加载时就已经获取到所有的数据了。这种方式解决了组件加载顺序阻塞彼此数据流获取的问题但是也产生了一个新的问题在请求完成之前页面都会是空白的。 基于第二种先请求后渲染的方式还可以使用Suspense将请求和渲染并行化Suspense 可以使得组件可以“等待”某些操作结束后再进行渲染。而这种方式如果要用到实际项目中还需要考虑C1、C2、C3对应的请求写在哪里如果写在组件中那么加载还是慢的。如果拆分出来就需要考虑文件拆分、code splitting等工程化问题。 在认真的分析了以上三种方式以后发现各有优劣同时基于上述方案我也提供一个请求优化的思路首先将请求的JS单独拆分出来打一个文件request.js在html头部引入request.js并使用async属性让脚本并行执行(如下代码所示)这样既可以保证我们的请求在最开始就能发出也能不阻塞后续React代码打包的js文件的执行相当请求和渲染的代码在并行执行。
// html头部引入request.js
script async src/js/request.js/script
在发送完请求之后需要将返回的数据注入到React组件中这部分怎么注入呢简单的代码示例如下
// request.js 中请求部分 evt是发布订阅模式的一个实例
window.InitData {data: null,on: (msg, fn) evt.on(msg, e fn(e)),emit: (msg, data) evt.emit(msg, data),
};fetch().then(rs {InitData.data rs;InitData.emit(init_data, rs);return rs;
});
// index.js react代码逻辑…….useEffect(() {if (InitData.data ! null) {// 这里已经获取到了请求的返回值doSomething();} else {InitData.on(init_data, (data) { // 利用发布订阅模式获取到数据doSomething();});}
}, []);…….
总体思路就是在html中最先加载单独打包出来的请求文件并加入async属性使脚本并行执行将返回的数据挂载到window下或者利用发布订阅模式将数据注入到react组件中。这样其实类似于边请求边渲染的模式利用提前请求来减少加载的时间。后续也是希望能用工程化的方式去解决数据的请求机制。
未来的话在开发时肯定是更倾向于边请求边渲染的这种模式在React的官网中也有说到未来计划让Suspense 处理更多的场景包括获取数据等等在新发布的React18中Suspense也是支持了服务端渲染包括近期开源的remix也都在优化请求机制能够让应用更快的加载。也欢迎有兴趣的小伙伴一起来讨论和实践。 作者京东零售 梁峰峰 来源京东云开发者社区
