CDN optimization

Distinguish the domain name of the CDN from the master domain name, since cookies will indiscriminately follow the domain name, while the CDN is mainly to request static resources, no authentication information is required. By distinguishing domain names, efficiency can be greatly improved

Server side rendering

Server rendering mainly solves the first screen loading experience and SEO problems. That is, the server returns the DOM tree directly, but there are many browser clients, but there are few servers, so try to minimize server-side rendering

Suggestions for CSS optimization based on the rendering process

  • CSS parsing is done from right to left
  • Avoid wildcards and select only the elements you need.
  • Focus on attributes that can be implemented through inheritance to avoid repeated matching and repeated definitions.
  • Use label selectors less. If possible, use a class selector instead
Error model#myList li{}MyList_li {}Copy the code
  • Rather than gilding the lily, ID and class selectors should not be held back by redundant label selectors
  • Reduce nesting. Descendant selectors have the highest overhead, so we should try to keep the depth of the selectors to a minimum (no more than three layers at most) and use classes to associate each tag element whenever possible

Load order optimization of CSS and JS

HTML, CSS, and JS all have features that block rendering.

CSS is the resource that blocks rendering. It needs to be downloaded to the client as soon as possible and as soon as possible to reduce the first rendering time as many teams are doing now as soon as possible (put CSS in the head tag) and as soon as possible (enable CDN to optimize static resource loading speed)Copy the code

The JS engine is independent of the rendering engine

Js will take control away from HTML and CSS

Three ways to load JS

  • Normal mode
<script src="index.js"></script> In this case JS blocks the browser and the browser must wait for index.js to load and execute before it can do anything else.Copy the code
  • Async mode
<script async src="index.js"></script> Async mode, JS does not block the browser from doing anything else. It loads asynchronously, and when it finishes loading, the JS script executes immediately.Copy the code
  • Defer mode
<script defer src="index.js"In ></script> defer mode, JS loads are asynchronous and execution is deferred. When the entire document has been parsed and the DOMContentLoaded event is about to be triggered, the JS files that have been tagged defer will start executing in sequence.Copy the code

From an application point of view, async is usually used when the dependencies between our script and DOM elements and other scripts are not strong; When the script depends on DOM elements and the execution results of other scripts, we choose defer.

Reflux and redraw

  • Backflow: When we make changes to the DOM that result in a change in the DOM’s geometry (such as changing the width or height of an element, or hiding an element), the browser recalculates the element’s geometry (which also affects the geometry and position of other elements), and then draws the calculated results. This process is called reflux (also known as rearrangement)
  • Redraw: When we make changes to the DOM that result in a style change without affecting its geometry (such as changing the color or background color), the browser doesn’t have to recalculate the element’s geometry and simply draw a new style for the element (skipping the backflow shown above). This process is called redrawing.

Redrawing does not necessarily lead to backflow, backflow does lead to redrawing

To the DOM to speed up

Reduce DOM manipulation: Pay less “tolls” and avoid overrendering

// Request 10000 times, change 10000 timesfor(var count=0; count<10000; count++){ document.getElementById('container').innerHTML+=' I am a small test '} // Get the container only oncelet container = document.getElementById('container')
for(letcount=0; count<10000; count++){ container.innerHTML +=' I am a small test '} // Only oncelet container = document.getElementById('container')
let content = ' '
for(letcount=0; count<10000; Count++){// start with content +=' I am a small test '} // When the content is processed, the DOM changes to container.innerhtml = contentCopy the code

You can use DOM fragments to manipulate containers in the same way you manipulate the DOM

How to avoid backflow and redraw

  • Cache fuses to avoid frequent changes
  • Avoid changing styles line by line and use class names to merge styles
  • Taking the DOM “offline”

Once we “take” an element off the page by setting display: None, we will not be able to trigger backflow and redraw — this “take” of the element is called DOM offline.

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'. (omitting many similar subsequent operations) This is what happens when you go offline:let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'. (omits many similar subsequent operations) container.style.display ='block'
Copy the code

The browser has a Flush tasker that cleverly integrates the redraw task with the backflow task, but fires immediately when it encounters an immediate backflow trigger

When you use properties like this: OffsetTop, offsetLeft, When offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, Pay attention!

What does the “like” property look like? The common feature of these values is that they need to be computed in real time. So the browser also backflows to get those values.

Optimizing the first screen experience — lazy-load approach

In a lazy loading implementation, there are two key values: the height of the current visible region and the height of the element from the top of the visible region.

< script > / / get all the pictures of tag const imgs = document. The getElementsByTagName ('img') / / get the height of the viewing area const viewHeight = window. The innerHeight | | document. The documentElement. ClientHeight / / num for statistical the currently displayed by which a picture, Avoid checking for exposure from the first image every timelet num = 0
    function lazyload() {for(leti=num; i<imgs.length; I++) {// subtract the height from the top of the element to the top of the viewable arealetDistance = Viewheight-imgs [I].getBoundingClientRect().top // If the height of the visible area is greater than or equal to the height from the top of the element to the top of the visible area, the element is exposedif(distance >= 0){distance >= 0){distance >= 0){distance >= 0;'data-src'Num = I +1}}} // listen for the Scroll event window.addeventListener ('scroll', lazyload, false);
</script>
Copy the code

Lazy loading is best optimized with throttling and anti-shaking

For personal finishing only