最常见的:
路田懒加载:有效拆分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回车到整个网页加载出来,整个流程是怎样的