前端首屏渲染优化

如何让用户第一时间看到他们想要浏览的网站是前端工程师必须要解决的问题。本文就介绍几种优化的方案：

1. 将客户端请求的资源放置在CDN上，这样可以让客户端从最快的节点下载相关资源，进而减少资源下载的时间。同时可以将资源进行gzip压缩，并且请求头加上gzip，可以让请求的资源文件大小减少50%左右。
2. 将已获得的静态资源（app shell,图片,css等）使用cache进行缓存，之后的访问直接从本地获取资源，方便下次加载。
3. 使用prefetch,preload预加载资源，并在css与js标签上加上async或defer属性实现异步加载。在webpack中可以使用script-ext-html-webpack-plugin实现相关功能。
4. 如果首页有较多图片资源，可以尝试将图片转化为webp格式来减小请求图片的大小，并设置图片懒加载。
5. 将首屏加载的资源单独打包，当用户访问首屏页面时仅给与首屏页面相关资源。
6. 针对部分简单的展示页面，也可考虑使用AMP来提供极速的页面加载。