面试题之前端性能优化

1.路由懒加载

SPA项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有资源，造成首页加载很慢，降低用户体验

路由懒加载的用法

component:home=>import("组件路由地址") 首页资源压缩约52%

原理：ES6的动态地加载模块---Import()

2.组件懒加载

除了路由的懒加载外，组件的懒加载在很多场景下也有重要的

很多页面我们都会写一个弹框的组件，但是一开始所有资源都加载出来，会造成资源浪费，性能下降。这样我们就需要思考让该弹框不是一进入页面就加载，而是需要用户手动触发才会展示出来

组件懒加载的写法：

在需要引入的页面

const dialogInfo=()=>import("组件地址") 首页资源减少11%

组件懒加载要合理使用，使用更多会造成浏览器http请求的增多

使用场景：该页面的js文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，利用浏览器并行下载资源，提升下载速度

2.该组件不是一进入页面就展示，需要一定条件下才触发

3.该组件的复用率高

3.合理使用Tree shaking

tree shaking的作用，消除无用的js代码，减少代码体积，以优化打包结果

现在的webpack5已经自带了这个功能，当打包环境为production时，默认开启tree-shaking这个功能

4.骨架屏优化白屏时长

使用骨架屏，可以缩短白屏时间，提升用户体验，国内大多数的主流网站都是用了骨架屏，特别时手机端的项目

SPA单页应用，无论是vue还是react，最初的HTML都是空白的，需要通过加载js将内容挂载到根节点上，这套机制的副作用，会造成长时间的白屏

常见的骨架屏插件就是基于这种原理，在项目打包时将骨架屏的内容直接放到html文件的根节点中

5.长列表虚拟滚动

首页中不乏有需要渲染长列表的场景，当渲染条数过多时，所需要的渲染时间会很长，滚动时还会造成页面的卡顿，整体体验非常不好

虚拟滚动，指的是只渲染可视区域的列表项，非可见区域的不渲染，在滚动时动态跟新可视区域，该方案在优化大量数据时效果明显

6.加载方式的优化

async，defer是script标签的专属属性，对于网页中的其他资源，可以通过link的preload，prefetch属性来预加载，

preload：可以让关键资源提前加载

7.图片的优化

图片的优化是非常重要的，尤其对于移动端来说，完全没必要去加载原图，浪费带宽

1.图片的动态剪裁功能

2.图片的懒加载

转载自前端性能优化——首页资源压缩63%、白屏时间缩短86% - 掘金