介绍,//,这里我们是写了一个单独的js库,包含js请求,和,发布订阅的一些东西,然后打包的时候,通过模板打到,
,//& lt; script> & lt;/script>,标签内,位置在header 最顶部 ,var prefetchSuccessful =,真的;
,,,,,,,try {
,,,,,,,,,,,如果(,window.ytMessager ,,, window.YtPreRequest) {
,,,,,,,,,,,,,,,var params =, {
,,,,,,,,,,,,,,,,,,,itemId:, YtPreRequest.getQueryString (& # 39; itemId # 39;)
,,,,,,,,,,,,,,,};
,,,,,,,,,,,,,,,YtPreRequest.request (
,,,,,,,,,,,,,,,,,,,{
,,,,,,,,,,,,,,,,,,,,,,,url:, & # 39; 1.0.2 {{, reqConfig }}/mall.item.detail.pc & # 39;,
,,,,,,,,,,,,,,,,,,,,,,,数据:,参数,
,,,,,,,,,,,,,,,,,,,,,,,成功:,function (json), {
,,,,,,,,,,,,,,,,,,,,,,,,,,,ytMessager.send (& # 39; mall.item.detail.pc& # 39;, json);
,,,,,,,,,,,,,,,,,,,,,,,},
,,,,,,,,,,,,,,,,,,,,,,,错误:,function (), {
,,,,,,,,,,,,,,,,,,,,,,,,,,,prefetchSuccessful =,假;
,,,,,,,,,,,,,,,,,,,,,,,,,,,ytMessager.send (& # 39; mall.item.detail.pc.error& # 39;);
,,,,,,,,,,,,,,,,,,,,,,,}
,,,,,,,,,,,,,,,,,,,})
,,,,,,,,,,,其他}{
,,,,,,,,,,,,,,,prefetchSuccessful =,假;
,,,,,,,,,,,}
,,,,,,,}catch (e) {
,,,,,,,,,,,prefetchSuccessful =,假;
,,,,,,,} 第一种:,首屏接口已经请求成功了,,业务js代码未加载好。
第二种:业务js代码已经加载好了,但是,首屏接口数据还没请求成功。
为了兼容第二种情况,我们使用发布订阅模式的写法只业务js 先判断全局是否有首屏数据,有就直接拿过来渲染页面,,如果没有则监听一个首屏接口事件,,,首屏接口请求成功后会写入一个全局的首屏数据并且触发事件,业务代码被触发后则拿返回的数据渲染页面。 ,/* *
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关如何实现网络接口前置的性能优化的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
先分享一个比较常用的接口前置的优化方案吧
优化前首屏秒开大约在40%左右<强>首屏秒开大约提高了25%
先发一张优化成果图
<强>前置原因
,对于前后端分离的页面来说,一般的加载方式都是如下:
请求html页面,→浏览器解析html→,请求css js,→js执行请求api接口→js根据数据组装页面→,请求图片→展示首屏
我们可以看下图:
接口请求是在页面加载了<强> 540 女士左右的时候发出的,接口数据返回之后再渲染页面加载图片整个过程都是串行的这样整个页面的首屏时间就比较长了,如果我们能在html页面加载完就立即请求首屏数据然后再请求css js等资源的话将接口请求与css js资源请求并行的话首屏时间就能节省至少1个请求的耗时。
<强>具体实践
使用发布订阅模式
1:首先需要实现一个迷你的ajax方法建议直接使用XMLHttpRequest封装
2:,在html头的里使用,& lt; script>//这里调接口& lt;/script>的方式加载首屏数据,位置仅在ajax库下面,这里不建议使用标签因为标签的话还需要发http请求js文件然后执行才能请求数据。
3:业务代码中使用前置接口数据这时候会出现2种情况
