前端性能优化

最常见的:
路田懒加载:有效拆分App体积大小，访问时异步加载

const router = createRouter({
routes:[
//借助webpack的import()实现异步组件
{  path: /foo', component: () => import('./Foo.vue')  }
   ]
})

keep-alive 缓存页面:避免重复创建组件实例，且能保留缓存组件状态

<keep-alive>
        <component :is="component"></component>
</keep-alive>

使用 v-show 复用DOM: 避免重复创建组件

<template>
   <div class="cell">
  <!-- 这种情况用v-show复用D0M，比v-if效果好-->
  <div v-show="value" class="on">
        <Count :num="18088"/>    display:none
  </div>
  <section v-show="!value" class="off">
    <Count :num="10000"/>
  </section>
 </div>
</template>

长列表性能优化: 如果是大数据长列表，可采用虚拟滚动，只染少部分区域的内容，第三库vue-virtualscroller、vue-virtual-scroll-grid

图片懒加载

// vue-lazyload
<img v-lazy="/static/img/1.png">

第三方插件按需引入（elementUI）

服务端涫染/静志网站生成:SSR/SSG

异步加载
说起异步加载，我们需要先了解一下什么是同步加载?

// 默认就是同步加载
<script src="http://abc.com/script.js"></script>

同步模式又称阻塞模式，全阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染同步加载。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。所以一般我们都会把script标签放置在body结束标签之前，减少阻塞。
所以异步加载，其实就是一种非阻塞加载模式的方式，就是浏览器在下载执行is的同时，还会继续进行后续页面的处理。
几种常见的异步加载脚本方式:

async和defer
在JavaScript脚本增加async或者defer属性

//面试经常问:script标签的defer和async的区别?

// defer要等到html解折完成之后执行脚本
<script src="main.js" defer></script)

//async异步加载脚本后便会执行脚本
<script src="main.js" async></script>

动态添加script标签

//js代码中动态添加script标签，并将其播入更面
const script =document.createElement("script");
script.src ="a.js";
document.head.appendchild(script);

按需打包与按需加载
随着Webpack等构建工具的能力越来越强，开发者在构建阶段可以随心所欲地打造项目流程，与此同时按需加载和按需打包的技术曝光度也越来越高，甚至决定着工程化构建的结果，直接影响应用的性能优化。
两者的概念:
1、按需打包表示的是针对第三方依赖库及业务模块。只打包真正在运行时可能会用到的代码。
2、按需加载表示的是代码模块在交互的时候需要动态导入。

 

网页从打开输入url回车到整个网页加载出来，整个流程是怎样的