上次Q做了一波网页性能优化，积累了一点经验。记录和分享。先分享一个比较常用的界面预优化方案。优化前，首屏二次打开约为40%。也就是说，一般的加载方式是：请求html页面->浏览器解析html->请求cssjs->js执行请求api接口->js根据数据组装页面->请求图片->显示首屏可以看到下图：页面加载约540ms时发送接口请求。接口数据返回后，渲染页面，加载图片。整个过程是串行的，所以整个页面的首屏时间比较长。如果我们能在html页面加载完成后立即请求首屏数据，然后请求cssjs等资源，如果接口请求与cssjs资源请求并行，首屏时间至少可以节省1次耗时要求。具体做法是使用发布-订阅模式1：首先需要实现一个miniajax方法。推荐直接使用XMLHttpRequest封装//这里我们单独写了一个js库，包含js请求和发布订阅，然后在封装的时候通过模板打入//标签中的位置是header2:在htmlhead中使用加载首屏数据。位置只在ajax库下，这里不推荐使用tags，因为如果使用tags，需要发送http请求js文件，然后执行请求数据。varprefetchSuccessful=true;尝试{if(window.ytMessager&&window.YtPreRequest){varparams={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);},错误:function(){prefetchSuccessful=false;ytMessager.send('mall.item.detail.pc.error');}})}else{prefetchSuccessful=false;}}catch(e){prefetchSuccessful=false;}3：在业务代码中使用prefetch接口数据这时候会出现两种情况。第一个：首屏界面请求成功，业务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();//异常补救}优化后，当页面加载超过100ms时，接口发送请求。业务代码执行前，数据已经存在
