上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
第一个优化
从网络详情中可知，页面显示慢最大的问题在于图片的加载需要在接口请求后才能开始，而这两者都需要消耗较长的时间。如果能够在接口请求前对图片进行预加载，那么在接口返回后就能直接渲染图片。
在现代浏览器中，可以通过<link rel="preload" as="image" href="url"> 来预加载一张图片（关于preload的详细用法会在10.1节详细介绍）。于是，可以在HTML文件的<head>标签中加入如下代码。
这样就可以提前开始图片请求。同样，可以开启Fast 3G的网络模拟和Disable cache，以此刷新页面，如图1-6所示。
可以看到，图片和Hello World的请求基本上是同步发起的，原来串行的流程变成并行加载。用户在618ms就可以看到内容和图片，在635ms就可以完成整个页面的渲染。
这样就完成了第一个优化，把图片请求提前和接口并行化加载，可以大幅度缩短用户看到页面的时间，页面的渲染完成时间从1.23s缩短到635ms。
图1-6 刷新页面