概念

首屏时间

指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容。

白屏时间

白屏时间是指浏览器开始显示内容的时间。因此，我们通常认为解析完 <head> 的时刻或开始渲染 <body> 标签就是页面白屏结束的时间。

如何计算

首屏时间

window.onload = () => {
  console.log(Date.now() - performance.timing.navigationStart) //DOM树加载完成所消耗的时间
}
document.addEventListener('DOMContentLoaded', () => {
  console.log(Date.now() - performance.timing.navigationStart) //DOM树以及图片等外部资源全部加载完成所消耗的时间
})

DomContentLoaded在DOM树加载完之后立刻触发，DOM树加载完成之后，继续加载图片等外部文件，加载完成之后，onload事件触发。所以这两个都不适合用于计算首屏时间。

MutationObserver

TODO

白屏时间

使用performance，可以获取到当前页面中与性能相关的信息。

在 head 标签末尾添加 script 标签如下：

<head>
  <meta charset="UTF-8">
  <title>首屏</title>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script>
		console.log(new Date().getTime() - performance.timing.navigationStart)
	</script>
</head>

首屏优化

路由懒加载

把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加。

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

缓存

采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头；

前端合理使用LocalStorage

服务端渲染

使用SSR，也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器。

图片懒加载

按需加载代码

比如按需引入UI组件库：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

HTTP2

使用 HTTP2 ，相比于 HTTP1，解析速度更快；支持多路复用，多个请求可以共用一个 TCP 连接；提供了首部压缩功能；支持服务器推送，服务器可以在发送 HTML 页面时，主动推送其他资源，而不用等到浏览器解析到相应位置发请求再响应。

概念

首屏时间

白屏时间

如何计算

首屏时间

MutationObserver

白屏时间

首屏优化

路由懒加载

缓存

服务端渲染

图片懒加载

按需加载代码

HTTP2

CDN

开启GZip压缩

优化CSS代码