博客

前端萌新自用，看我图一乐，真学习还得看原文

原文链接：

https://vue3js.cn/interview/vue/first_page_time.html#%E4%B8%80%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AF%E9%A6%96%E5%B1%8F%E5%8A%A0%E8%BD%BD

什么是首屏加载？

1.首屏加载指的是从响应用户输入的网站网址到首屏内容渲染完成的时间，首屏内容渲染完成不意味着所有内容渲染完成，而是当前视窗需要展示的内容渲染完成。

首屏加载完成可监听 DOMContentLoaded 事件来计算。

document.addEventListener('DOMContentLoaded',() => {
  console.log(1111);
})

为什么SPA应用加载速度慢？

可能原因：

1.网络延迟

2.资源体积过大

3.资源重复发出请求

4.加载脚本，导致渲染阻塞

解决方法：

1.减少入口文件体积

2.静态资源本地缓存

3.UI框架按需加载

4.减小图片大小，图片压缩

5.减少组件重复打包

6.使用gZip

7.使用SSR

1.减少入口文件体积

常用手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，当用到某一路由时才加载，使得入口文件体积减小，加载速度提高。

const Home = () => {import('views/home/Come')
const category = () => {import('views/category/Category')

const routes = [
    {
    path:'/',
    redirect:'/home'
    {
    path:'/home',
    component:Home
    },
    {
    path:'/category',
    component:Category
    }
]

const router = new VueRouter({
    routes
})

2.静态文件本地缓存

后端设置响应头：

cache-control   Exprise Etag Last-modified  等

采用Service Worker 离线缓存

service worker 是什么

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

前端：合理使用本地缓存：localStorage、sessionStorage

3.UI框架按需加载

比如用到element-UI

不要直接引入整个Ui库

import ElementUI from 'element-Ui'
VUe.use(ElementUI)

而要按需加载，比如只用到了card、button、input

import {
Input,
Button,
Card
}
Vue.use(Input)
Vue.use(Button)
Vue.use(Card)

4.图片压缩

图片虽然不在编码过程中，但是它对页面性能的影响非常大。

对于所有的图片，我们都可以进行适当的压缩。

对于页面上的icon，我们可以使用字体图标来代替，或者使用精灵图，将多个小图片放在一张图上加载，这样可以加快页面加载速度。

5.组件重复打包

一个组件被多个路由同时使用时，会造成重复下载

可以再webpack中的config文件中，修改CommonsChunkPlugin的配置

minChunks：3

这个属性会把使用三次以上的包抽离出来，放进公共的样式，避免重复加载组件。

6.开启GZip

7.SSR

SSR ,服务器端渲染，组件或页面通过服务器生成html字符串，在发送到浏览器。