前端性能优化----如何减短首屏加载时间？

为什么首屏加载会出现短暂几秒白屏呢？随着Vue、React等框架的出现，SPA单页面应用越来越广泛被开发者应用。但是呢，SPA应用页面打包之后的js文件是非常大的。要等这个js文件加载完成之后才能进行首屏渲染，这样就导致了白屏的问题。

一、使用动态Polyfill

Polyfill可以为浏览器提供和标签API一样的功能，无需引入插件，只需要引入一个js文件就行。可以使用动态使用Polyfill来代替我们现有的比较笨重的兼容问题，动态使用Polyfill使用过浏览器的UA头，然后根据不同浏览器选择其对应需要的Polyfill。

二、使用骨架屏

骨架屏就是指在未加载完时，先简单用图形绘制出页面的大概布局，给用户好一点的视觉体验，等页面加载完成之后，再将骨架屏替换掉就行。

• 绘制静态骨架屏：最简单的方案就是直接绘制一张骨架屏的图片，在资源加载完成之后替换掉这张图片。我们可以采用base64格式的图片直接插入到HTML文档里，可节约一次http请求。
• 代码绘制骨架屏：代码绘制灵活性比较高；
• 插件绘制：如果需要给多个页面添加骨架屏，需要绘制多个骨架屏，比较麻烦。我们可以只用page-skeleton-webpack-plugin插件，该插件可以根据具体的页面生成对应的骨架屏。

三、代码分割

代码分割指的是将项目构建打包后，根据指定规则分割成多个输出文件，这些文件可以被按需加载，可以用来优化代码加载时的资源大小及优先级。正确的使用代码分割可以提升资源加载效率。

四、使用资源预加载

什么是资源预加载？

页面资源预加载是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户将来会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄加载指定的文档，并把他们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。

简单的讲：就是当前页面加载完或者其他空闲时间，可以加载后续页面会使用的资源。

• rel="preload"
  可以使用rel属性，元素的rel属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明那些资源是在页面加载完成后即刻需要的。

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

字体、图片、音视频都可以进行预加载。

• rel="subresource"
  优先级高于preload。

<link rel="subresource" href="style.css">

• rel="prerender"
  prerender可以指定加载一个页面的所有资源。

<link rel="prerender" href="/index.html">

prerender更像是我们默认打开了一个隐藏的Tab一样，会下载所有的资源，创建DOM、渲染页面、执行JS等。如果用户进入指定的链接，隐藏的这个页面会立马进入用户的视线。

webpack代码分割
学习于前端性能优化