1. Js and time-consuming

Js files take the most time, because files of the same size need to be loaded, parsed and executed, and the loading time is the same. However, parsing JS and executing JS are much slower than other files, so the performance of JS code is critical. We compress the file size, and the last two need to be solved from the code. 2. Code weight reduction (don’t introduce useless code functions from external libraries such as moment)

It’s important for the user that the first element is rendered the first meaningful content is rendered and the first interaction is made

2. Js analysis based on v8 engine principle

The V8 engine will make an optimization of the code. At the JS level, we want to write code that the engine can optimize to avoid de-optimization. De-optimization means that after the optimization, the engine will return to the version that was not optimized before, which will reduce efficiency

Example of reverse optimization

I’m going to keep adding two numbers and then I’m going to add a string and all of a sudden I’m not optimizing this function anymore because it’s not optimizing it anymore

V8 Optimization mechanism

1. Script flow: when a JS file is larger than 30K, the browser will open a thread to synchronize the parsing file while downloading

2. Bytecode cache: We will cache the bytecode of JS files that are frequently used

Lazy parsing: When defining a function, only remember the declaration and not parse the actual execution of the function declaration

Function optimization

This was because we knew that the V8 engine would be lazy at parsing functions, but if we executed the function immediately, the engine would parsing the eger pasing immediately, which would reduce performance, and lazy-parsing and eger parsing together would reduce performance

export default() = > {const add = ((a,b) = >a+b) / /! The outermost parentheses indicate that we want eger parsing
  const num1 =1
  const num2 =2
  add(num1,num2)
}
Copy the code

Object to optimize

1. Hidden type optimization Our best attribute order remains unchanged

In CAR2, hc0 cannot be reused because the property of HC0 was color before but this time it is seats, so the hidden property HC2 will be created and color will also have HC3. We need to assign values in the same property order

2. The performance of the append attribute is poor

3. Array instead of array like objects

V8 engine will optimize the array but not the class array. For example, traversal class array performance is not as good as traversal number group, traversal class array arrObj can be the following, but the efficiency is low

// It is more efficient to convert to an array and then iterate over it
const arr = Array.prototype.slice.call(arrObj,0)
arr.forEach(item= >item)
Copy the code

4. Avoid reading more than the array length

Because arrays are objects, arr[Length] looks up the prototype chain, which takes six times longer

5. Avoid element type conversions

const arr = [1.2.3]// This array will be optimized to packed_smi_elements
arr.push(4.4) // The more specific the type is, the more optimized the smI is
Copy the code

3. HTML optimization

1. Reduce iframe this iframe blocks loading of the main page and creating the DOM is expensive. We can wait for the main page to load the iframe

2. Compress whitespace

3. Reduce deep nesting of nodes because dom number is deep traversal

4. Avoid table layout overhead over div

5. Delete comments

6. CSS, JS chain as far as possible

7. Delete element default attribute writing

8. Write HTML semantic tags

9. Do not write if the label is closed

10. Put js in the tail to avoid affecting dom loading

Solution: HtML-minifier tool WebPack is compressed when packaged

4. The CSS optimization

1. Reduce the blocking of CSS rendering, load the required CSS behind the need for lazy loading

2. The completion of animation using GPU is to extract a layer separately by the composite transform

3. Contain :layout tell the browser how the changes in my folder will not affect the other changes, reduce the cost of backflow

Insert a box inside the first li element and the layout will contain all the other elements, but the layout will not contain any of the other elements, even if the width of the li element is larger than the original li.

4. Font-display: Show the font ahead of time