后续陆续推出大学生解惑系列文章，欢迎把疑惑发给我
一、为什么强调轮播图？
很多时候我们强调用户体验，而这里更多时候我们更强调完美的首屏体验，而现在几乎每个网站顶部第一个大模块就是轮播图。轮播图占得区域最大，图片质量也更高，几乎一张图片的面积，体积就快要大于首屏其他模块之和了，更别提轮播图还有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的一系列时间，他虽然执行的时间是微乎其微的，但如果要预加载所有的轮播图，这所有的轮播图是个数组，数量一旦多了，就会遍历再预加载，而遍历操作会使前置预加载代码时间变长。
875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
