Some technical points/highlights/difficulties of my personal projects are shared here

Project experience, also need to pay attention to the daily development:

Debug every small step (small step), no matter how small, after writing the code, test all the “source” conditions, and record all the “output” conditions for the next step as the “source” to debug. Do not accumulate to very large steps to debug, when the error will be very painful ┭┮﹏┭┮

Login state development

Cookie, Session, Token, JWT and the corresponding login state mechanism

Canvas

HTML series — Canvas

Adaptive layout

CSS series – Adaptive layout

Lazy loading optimization

  1. Listen for scrollbar sliding events

We need to listen for the scrollbar slide event to get the distance from the current scrollbar position to the top

window.addEventListener('scroll', handle); // Set the listener
function handle() {
    console.log(document.documentElement.scrollTop||document.body.scrollTop);
}
Copy the code

  1. Listen for bottoming events
  2. The network requested new data

In a list of boxes stacked on top of each other, lazy load optimization can speed up the first time you enter the page

  • When you first enter the page, only 20 images are loaded
  • By listening for the bottom event and asking the server database to get 20 images and then stitching them together

How to listen for bottoming events:

  • Method one: RightscrollTop + windowHeight 和 scrollHeightTo compare
lazyload();// Don't forget to display the image for the first time
window.addEventListener('scroll', lazyload); // Listen to the slider slide
function lazyload() {
    var scrollTop = document.documentElement.scrollTop // The distance from the top of the current screen to the top of the scroll bar
    var clientHeight = document.documentElement.clientHeight // The height of the screen viewable area
    var scrollHeight = document.documentElement.scrollHeight // The total height of the scroll bar
    if(scrollTop + windowHeight + 50 == scrollHeight){ 
        /* To start loading images, reserve 50px */}}Copy the code
  • Method two: use the DOM elementgetBoundingClientRectThe API gets where it isDistance to the top of the scroll bar
Img [I].getBoundingClientRect().top < img[I].getBoundingClientRect().top <document.documentElement.clientHeight
Copy the code
  • The point to optimize — throttling
window.addEventListener('scroll', throttle(lazyload,200)); // Trigger only once in 200ms

// throttling function
function throttle(fn, interval) {
    let flag = true; // Throttle switch
    return function(. args) {
        let context = this;
        if(! flag)return; // interval if the switch is off for milliseconds, skip it
        flag = false; // The switch is on and the action can be performed
        setTimeout(() = > {
            fn.apply(context, args); // Perform the action
            flag = true; // Turn on the switch
        }, interval); // interval Turns on the switch after milliseconds
    };
};

Copy the code

More information about image loading can be found in the Browser series – Optimizing Web Image loading

Synchronizes classification bar and scroll bar based on anchor point idea

1. Click the classification bar on the left and scroll bar on the right to synchronize

Call the API directly to control the scrollbar position

/ / web side
window.scrollTo(0.document.body.scrollHeight)
// Small program side
wx.pageScrollTo({
  scrollTop: 0.duration: 300
})
Copy the code

2. Slide the right scroll bar to synchronize the left category bar

  1. Need to monitor the slider position in real time
  2. Determine the position: what range you are in
  3. Then light up the left category
/ / web side
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;console.log('Scroll bar position:' + scrollTop);
}
window.onscroll  = showTop

// Small program side
bindscroll: function(e){
    console.log(e.scrollTop)
}
Copy the code

Points to optimize: Frequently changing values in data

The solution: Throttle back

See article JavaScript series – Anti – shake, throttling

Custom components and optimizations

Custom dialog dialog box components, popup pop-up layer components. When you need to do a project, you need to use both of these, and you can bring in other people’s open source components. But when I realized how it worked, I didn’t think it was necessary to introduce other components (and it took a lot of space, and I felt like I needed a lot of other stuff), and it wasn’t that hard to implement, just a translucent mask layer with a white box on top of it. So I did it myself.

When you’re done, there’s a problem. If you write buttons inside the box, the “click bubble” problem will occur, which is embarrassing [laughing and crying]. The search for a solution to the problem began.

One option is to switch from Bindtap to catchtap

Refer to the article

  • Canvas Performance Optimization
  • JavaScript Animation basics: Canvas draws simple animations
  • Canvas off-screen rendering optimized