上个Q做了一波web性能优化,积累了一点点经验 记录分享一下。

先分享一个比较常用的接口前置 的优化方案吧

优化前首屏秒开大约在40%左右 首屏秒开大约提高了25%

先发一张优化成果图

前置原因
对于前后端分离的页面来说,一般的加载方式都是如下:

请求html页面 -> 浏览器解析html -> 请求css js  -> js执行请求api接口 -> js根据数据组装页面 -> 请求图片 -> 展示首屏
我们可以看下图:

接口请求是在页面加载了 540ms左右的时候发出的 接口数据返回之后再渲染页面 加载图片 整个过程都是串行的 这样整个页面的首屏时间就比较长了。 如果我们能在html页面加载完就立即请求首屏数据 然后再请求css js等资源的话 将接口请求与 css js资源请求并行的话 首屏时间就能节省 至少1个请求的耗时。

具体实践
使用发布 订阅模式

1: 首先需要实现一个mini的ajax方法 建议直接使用XMLHttpRequest封装

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

2: 在html head的里使用 <script> // 这里调接口 </script> 的方式 加载首屏数据 位置仅在ajax库下面 这里不建议使用标签 因为标签的话 还需要发http请求 js文件 然后执行 才能请求数据 。

 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;
}

3: 业务代码中使用前置接口数据 这时候会出现2种情况

第一种: 首屏接口已经请求成功了, 业务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(); // 异常补救
}

优化后

接口在页面加载100多ms的时候就发出请求了。在业务代码执行之前 数据就已经有了

web页面性能优化之接口前置的更多相关文章

  1. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  2. Web页面性能优化(YSlow)

    YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...

  3. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

  4. base64:URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  5. 小tip: base64:URL背景图片与web页面性能优化——张鑫旭

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  6. 小tip: base64:URL背景图片与web页面性能优化

    转自:http://www.zhangxinxu.com/wordpress/?p=2341 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP ...

  7. web开发性能优化---UI接口章

    1.尽可能的远div+css设计 DIV+CSS与表相比格优势布局: a.精简代码 采用DIV+CSS设计,页面代码精简.这是为了XHTML了解都知道. 代码精简所带来的直接优点有两点:一是提高蜘蛛爬 ...

  8. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  9. web页面内容优化管理与性能技巧

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

随机推荐

  1. CV之各种不熟悉但比较重要的笔记

    解析: skip connection 就是一种跳跃式传递.在ResNet中引入了一种叫residual network残差网络结构,其和普通的CNN的区别在于从输入源直接向输出源多连接了一条传递线, ...

  2. boostrap的select2自动换行的问题解决

    最近在使用boostrap的select2控件实现多选效果时发现一个问题正常效果:但是当选择了两个长一些的option时,发现select2莫名其妙的换了一行空白行:经过F12调试发现是因为selec ...

  3. LeetCode-063-不同路径 II

    不同路径 II 题目描述:一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角( ...

  4. java实现上传图片并压缩图片大小功能

    缩略图压缩文件jar包 <!-- 图片缩略图 --> <dependency> <groupId>net.coobird</groupId> <a ...

  5. SQL注入 - SQLi-Labs靶场过关记录

    Less-1 1.看报错类型,确定注入点 ?id=1' order by 4--++ 2.确定数据库 ?id=-1' union select 1,2,3--++ 3.查看数据库 ?id=-1' un ...

  6. CentOS Linux服务器安装Nginx

    1.安装nginx前,我们首先要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件,可通过如图所示命令进行检测,如果以安装我们可以通过图二所示卸载 ...

  7. 2022年官网下安装MongoDB最全版与官网查阅方法(5.0.6)

    一.下载安装 1.百度搜索,找到官网,或直接访问:https://www.mongodb.com/ 2.寻找下载位置,双击下载. 3.找到本地位置,双击执行,进入欢迎界面,选择next. 4.勾选协议 ...

  8. 变量、变量作用域、常量final、变量的命名规范

    变量 变量是什么:就是可以变化的量! Java是一种强类型语言,每个变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域. 注意事项: 每个变量都有类型,类 ...

  9. LGP6156题解

    真·简单题 题目大意 给定 \(n\) 和 \(k\),求出这个柿子的值: \[\sum_{i=1}^n\sum_{j=1}^n(i+j)^k\mu^2(\gcd(i,j)gcd(i,j) \] 按照 ...

  10. ArcGIS进行容积率计算

    空间分析--题目2 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)又称建筑面积毛密度,是指一个小区的地上总建筑面积与用地面积的比率.对于开发商来说,容 ...