web接口前置的性能优化讲解

 // 这里我们是写了一个单独的js库 包含js请求 和 发布订阅的一些东西 然后打包的时候 通过模板打到 
 //<script> </script> 标签内 位置在header 最顶部

 var prefetchSuccessful = true;
 try {

 if( window.ytMessager && window.YtPreRequest){
 var params = {
 itemId: YtPreRequest.getQueryString('itemId')
 };
 YtPreRequest.request(
 {
 url: '{{ reqConfig }}1.0.2/mall.item.detail.pc/',
 data: params,
 success: function (json) {
 ytMessager.send('mall.item.detail.pc',json);
 },
 error: function () {
 prefetchSuccessful = false;
 ytMessager.send('mall.item.detail.pc.error');
 }
 })
 }else{
 prefetchSuccessful = false;
 }
 }catch (e){
 prefetchSuccessful = false;
 }

第一种： 首屏接口已经请求成功了， 业务js代码未加载好。
第二种： 业务js代码已经加载好了，但是 首屏接口数据还没请求成功。

为了兼容第二种情况 我们使用发布订阅模式的写法。 业务js 先判断全局是否有首屏数据 有就直接拿过来渲染页面 ，如果没有则监听一个首屏接口事件， 首屏接口请求成功后会写入一个全局的首屏数据并且触发事件，业务代码被触发后则拿返回的数据渲染页面。

 /**
 ** 如果已经请求好了数据 直接渲染 否则监听事件回调中渲染
 */

if(window.ytMessager && prefetchSuccessful){
 ytMessager.on('mall.item.detail.pc',(json)=>{
 this.renderData(json); // 渲染页面
 },true);

 ytMessager.on('mall.item.detail.pc.error',()=>{
 this.getPageData(); // 异常补救
 },true)

}else{
 this.getPageData(); // 异常补救
}