也说页面性能优化

踏入前端行业也快10个年头了，突然回首才发现竟然没有写过一篇文章（汗颜），是时候整理知识结构了，理一理这些年我都干了写什么，收获了什么，还需要什么。。。

为什么用性能优化来作为话题呢？因为这是一个比较完整的优化手段使用案例，在追求最大性能的前提下，你可以使用所有你可以想到的方案，没有最优，只有更优。

下面以我们的官网首页为例来聊聊常用的优化手段都有哪些（本文不涉及具体方案的操作细节），首先来看一张图：

没错，这就是美乐乐的官网首页，限于篇幅，页面截图只是其中的一部分（实际的页面长度更长）。这是典型的电商网站首页，以展示商品为主；

一、首屏加载
作为前端崽，我想应该不会有人不知道这个东东吧，不过使用频率较高的应该是电商，对于需要加载大量资源的页面，这是必要的，否则页面将一直出鱼加载状态，最终的结果就是消耗用户本来就不多的耐心，然后关页面走人。

1、预留空间
由于每个人使用的浏览器大小不尽相同，因此，我们要尽可能照顾大点的显示器（特别变态的就顾不过来了）；所以，我一般会把第一屏后面紧挨着的栏目也默认加载出来。其他的栏目就可以做懒加载了。

2、首屏懒加载

如首屏的焦点图，默认只需要展示第一张图，切换时再加载当前图片（还可以做预加载，即页面加载完成后，主动加载第二张图片，可以防止自动切换时有白屏的现象，然后就可以一次预加载下一张图片）。

二、用户需要操作才展示的内容默认不展示

页面中有很多内容是不需要默认展示的，用户在浏览状态下可能都不会操作。

1、城市切换

如图中的城市切换，默认情况下会定位用户的所在城市，所以图层中的数据没必要一开始就加载出来，用户需要切换的时候再去请求数据渲染，接受到的数据可以存储在本地浏览器，加个有效期，每次用户切换的时候判断本地是否有缓存数据，如果有再判断是否过期即可。

2、tab

在用户快速浏览的情况下，大概率是不会去出发tab按钮，因此我们只需要展示tab的第一个项（我一般称他为‘face’或‘cover’），其他的项的DOM结构存在即可（因为电商需要考虑seo，所以建议保存DOM结构），图片在用户手动切换的情况下再进行加载。

三、减少http请求

可以说是页面优化中能立竿见影的重要关注点之一，因为浏览器有最大并发请求限制，所以一段同域名的请求超过这个临界值，之后的请求就会开始排队，页面的整体加载就会马上收到影响。

1、合并静态资源
这里的合并资源并不是指代码本身，主要是指css和js的请求合并，我们使用的是阿里提供的Nginx concat模块，需要编译到nginx，可以大大减少请求数量

2、多域名
同一个域下，chrome的最大并发数大概是6个，一旦超过就会排队，因此我们可以考虑一个域名及二级域名（与主域名不同）来处理静态资源

为什么要使用跟主域名不一样的域名？因为同一个域名的请求会带着cookie来回跑，但是图片或者css请求时其实是不需要cookie的，带着跑不但会影响速度，还消耗带宽。js其实也可以放在不同的域名下。

3、使用缓存
这里的缓存包括浏览器缓存、cdn、服务器缓存。。。

4、域名预解析
在meta中添加perfetch，可以对dns域名做预解析，都是为了减少域名查找时间。

总结：页面优化手段多种多样，但大的方向确实相同的，前端追求的“没有最优，只有更优”产生了很多优化方案；其细节也是多种多样，如：减小文件体积、平衡图片大小和质量、图片webp格式，第三方js后置等等。优化之路没有尽头，加油吧，小伙伴们！