Introduction: Vue performance optimization is often asked in interviews. After the practice summary, the interview process is completely no problem, here to share the experience to everyone

Performance optimization is divided into four modules: code level optimization, packaging level optimization, service level optimization, image resources optimization. The numbers are 8, 3, 5, and 5.

I. Optimization at the code level

A total of 8, remember the beginning of the word, so convenient memory: road letter slow foot monitor, follow the living capacity

1. Lazy route loading

const Home = () => import(/* webpackChunkName: "Home" */'.. /components/layout/home.vue')Copy the code

2. Functional components

Functional components, also known as stateless components, have no lifecycle (meaning hook functions cannot be used) and no stateless response (methods in Methods cannot respond).

Add functional to the Template template

<template functional> <el-table :data="props. Items "// Vue versions before 2.3.0 need to receive values through props, Height ="400" border @selection-change="props. HandleSelectChange ">< slot></slot> </el-table></template><script>export default { props:["items","handleSelectChange"]}</script>Copy the code

Advantages: No life cycle, fast rendering.

3. Cache inactive component instances (keep-alive)

4. Script lazy loading

<script src="" defer></script>
<script src="" async></script>
Copy the code

HTML4’s defer is “execute after rendering”, while HTML5’s Async is “execute after downloading”. Multiple defer scripts will be loaded in the order they appear on the page, and multiple Async scripts cannot guarantee the loading order (async cannot be used if there is an inheritance relationship between scripts, such as Vue and vuex).

5. Listening event destruction

When a Vue component is destroyed (when switching routes), its connections to other instances are automatically cleaned up and all instructions and event listeners are unbound. If using native methods such as addEventListener, event bus, etc., there is no automatic destruction, we need to manually remove the listening of these events during component destruction (beforeDestroy or Destroyed lifecycle) to avoid memory leaks.

6. Add keys periodically

Add a unique ID to each vnode to efficiently update the Vnode.

7. Use v-show instead of V-if

V-if will change the DOM count. V-show will use display: None to control the display and will not change the DOM count

8. Layer easily rearranged elements with “static” elements (using z-index)

A page is made up of many layers. After building the render tree for a page, the following process is used to present it to us:

(1) The browser takes the DOM tree and splits it into separate rendering layers based on style

(2) THE CPU draws each layer into the drawing

(3) Upload bitmap as texture to GPU (graphics card) for drawing

(4) GPU will cache all rendering layers (if the next uploaded rendering layer does not change, GPU does not need to redraw it) and conform to multiple rendering layers to finally form our image

The CPU is responsible for layout and the GPU is responsible for drawing.

Layering the GPU to do more rendering is often referred to as hardware acceleration

Two, packaging level optimization

1. Introduce as needed to reduce packaging volume

2. No. Map file is generated

Vue. Config. Js configuration

productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
Copy the code

3. Pack and remove console.log

Reason: After all, this is a function call, and functions called by console.log are not collected by the garbage collection mechanism and may cause a memory leak.

Use the Babel – plugin – transform – remove – the console

Third, service level optimization

1. Reduce the number of HTTP requests

For example, use Sprite

background: url('./images/css_sprites.png') -116px -10px; // Display the image by adjusting positionCopy the code

Sprite figure automatically generated web site: www.toptal.com/developers/…

2. Enable gzip transmission compression

3. The DNS resolution

The X-dns-prefetch -Control header controls the DNS Prefetch function of the browser. DNS prefetch is a feature that enables the browser to perform domain name resolution on its own initiative. This includes all links to documents, whether they are images, CSS, oR JavaScript urls that other users can click on

4. Use CDN acceleration

Use BootCDN’s free acceleration service at www.bootcdn.cn/

Example: Introducing Echarts

Use CDN import in index.html

< script SRC = "https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js" > < / script >Copy the code

The vue. Config. Js configuration

configureWebpack: Echar.init () externals {//externals is the key used for import, value is used to access the object globally, and // is window.echarts. { 'echarts': 'echarts' } }Copy the code

5. Use SSR rendering

4. Image resource optimization

1. Compress the image

Online compressed image site: tinypng.com

2. Not zooming images in HTML

Define the size of the image, take the size of the image, do not put 400 by 400 in the 200 by 200 area

3. Add the Alt attribute to the IMG tag

When images fail to load, text is displayed with Alt attribute to speed up the response of the page

4. Lazy loading of images

Method 1: Lazy loading of images using Element-UI

Method 2: When the element scrolls to the visible area, assign the SRC attribute to the image to load the image

5. Use font ICONS instead of pictures

Conclusion: mainly to share to interview friends, this article only mentioned some points of performance optimization, to give you a way of thinking

Creation is not easy, praise support!!