原文链接 https://wilsonis.github.io/blog/posts/shein-performance-analysis
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。
对shein网站前端性能的简单分析
一、 首页
1. Chorme Timeline分析
根据上图，将分析的时间段控制在打开页面的5S中以内，如下图可以看到，首页的性能还是不错的，包括HTML解析、JS执行、渲染和重绘的总事件为1894ms，也就是说在2S以内完成了能够自由浏览页面所需要的动作。主要消耗的时间在js执行部分，包括加载图片和js文件以及js的执行，即下图中的黄色和灰色块，总耗时1407ms，占比74%。
2. Chrome WebInspector分析results
下图是Chrome WebInspector自动检测出来的可以进行性能优化的部分，主要包括：
- 多个js、css文件的合并
- 利用浏览器缓存图片
- css文件提前到js文件前面
- 将CSS放在head中
- 优化CSS代码
二、 What’s New页面
1. Chrome Timeline分析
选取what’s new页面的原因是该页面需要加载大量的图片，对于电商类网站具有一定的典型性。 然后选取页面打开到页面可以自由浏览的时间段进行分析，如图1选取时间段长6.46s，非空闲时间3.17s，其中js执行+other耗时2.10s，占比66.25%。加载图片和js文件是主要的耗时原因。
从图2和图3可以看出，加载了大量的图片，究其原因是没有使用懒加载/滚动加载技术，打开页面一次性加载了所有图片造成的。这对于电商类网站是至关重要的，国内任意大型电商网站都一定使用了懒加载/滚动加载技术，否则大量图片请求容易造成页面的卡顿，浏览不畅等。
懒加载以及其他前端性能优化的最佳实践点击链接查看。
2. Chrome WebInspector分析results
WebInspector对该页面的优化推荐与首页类似，这里就不做分析了。
