当前位置：首页 > article >正文

web前端面试题附答案016-怎么让顶部轮播图渲染的更快？

article 来源：原创 2022/10/5 15:37:44

一、为什么强调轮播图？

很多时候我们强调用户体验，而这里更多时候我们更强调完美的首屏体验，而现在几乎每个网站顶部第一个大模块就是轮播图。轮播图占得区域最大，图片质量也更高，几乎一张图片的面积，体积就快要大于首屏其他模块之和了，更别提轮播图还有N张图片需要渲染，所以首屏优化中，顶部轮播图（也叫首焦图，banner图）成为了重中之重。

二、都有哪些手段呢？

1、压缩图片

把图片压缩再压缩，在保证清晰的前提下，先让UI用专业工具压缩，然后我们再转webp格式，或者尽量能够下发对应尺寸的图片，以保证图片更小

2、SSR手段

SSR跟vue react没关系，最早的jsp那也是SSR手段。在服务端HTML落地页还没有被浏览器下载下来的时候，请求banner图接口，然后将所有图片在服务端那一步的时候就开始组装，不管是jq vue react，就已经组装好了这个模块。

这么做的好处是无需再等HTML落地下下载完成，等待js css的下载，浏览器再解压，解析，执行，组件组装，图片请求，浏览器渲染图片这一系列的操作步骤，一旦HTML落地页下载下来以后，图片将直接开始请求，下载，被浏览器渲染，省去了前置js那些浏览器行为

3、前置页面预加载

如果我们要去的那个页面（二级页面）是有比较大的轮播图的，那么如果在一级页面的时候就比较肯定二级页面的一些参数，或者说二级页面的轮播图就是比较固定的。那么可以在一级页面提前预加载.。预加载的好处就是不占用当前网页主线程，可以使用户无感知的进行秘密加载到浏览器的缓存中。

<script>var preImage = new Image();preImage.src = 'aa.png';
</script>

4、当前页面前置预加载

<!DOCTYPE html>
<html><head><title>title1</title></head><body><div id="app"></div><!-- 在这里做前置预加载 --><script src="app.js"></script></body>
</html>

从上图可以看到，在浏览器对js css做了一系列操作之后，才有机会开始下载图片，从哪里下载呢，从图片服务器，所以变得滞后了，也就会很慢。而上一篇文章web前端面试题附答案009-不改业务逻辑代码不改打包方式，怎么让js加载的更快？说了怎么让js加载的更快，所以这里可以专心的说怎么预加载图片，让图片渲染得更快了。

<!DOCTYPE html>
<html><head><title>title1</title></head><body><div id="app"></div><!-- 在这里做前置预加载 --><script>fetch(url, data).then((res) => {let imgData = res.list[0]['img'];let preImage = new Image();preImage.src = imgData;})</script><script src="app.js"></script></body>
</html>

想想是不是这个逻辑，前置的一段代码所执行的时间微乎其微，然后就开始下载图片，下载的过程是一个异步的事情，所以不会影响下面主js的下载，解析和执行，而利用浏览器对js的一系列操作间隔期，很可能图片已经下载完成，被浏览器缓存了。而前端组件组装完成后，所要渲染的图片已经在浏览器缓存中了，即可快速渲染。

三、为什么只预加载第一张图片？

1、因为轮播投的轮动播放一般都会是3S甚至更长，所以我们有更多的时间在这3S时间内，让其他轮播图进行下载

2、因为预加载也是一段前置代码，他始终还是会影响到下面主js的一系列时间，他虽然执行的时间是微乎其微的，但如果要预加载所有的轮播图，这所有的轮播图是个数组，数量一旦多了，就会遍历再预加载，而遍历操作会使前置预加载代码时间变长。

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/58364.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

web前端面试题附答案016-怎么让顶部轮播图渲染的更快？

一、为什么强调轮播图？

二、都有哪些手段呢？

1、压缩图片

2、SSR手段

3、前置页面预加载

4、当前页面前置预加载

三、为什么只预加载第一张图片？

相关文章：

web前端面试题附答案016-怎么让顶部轮播图渲染的更快？

Python脚本，物联网云服务器端口监控

Python之wxPython框架的使用

量子密钥分发B92协议——笔记

TiFlash 数据校验

JavaWeb实战002-servlet原理

基于深度学习的命名实体识别研究综述——论文研读

2022下半年数学建模竞赛汇总(比赛时间、出成绩时间)

为什么python证券接口通达信系统中没有接口？

基于JAVA校园自助式按量点餐系统服务端计算机毕业设计源码+系统+数据库+lw文档+部署

吉林省互联网医院资质申请条件|牌照申请

解决linux如何安装BBRplus，以及安装BBRplus版加速失败的问题

【目标检测】---- 正负样本匹配策略

类初始化过程与对象创建过程

cdr怎么保存低版本 cdr保存低版本闪退

数据库，容器化如虎添翼

【CE】Mac下的CE教程Tutorial：基础篇（第5关：代码查找器）

MySQL数据库——数据库是什么？关系型数据库和非关系型数据库又是什么？

Spring Cloud Stream 学习笔记

langchain学习4