Moment For Technology

Review of interview (2)

Posted on Aug. 6, 2022, 12:04 p.m. by Edward Copeland
Category: The front end Tag: The interview

Performance optimization

Which aspects can web page performance optimization start from?

Improve access and response speed - Improve user experience!

The first is page-level optimization; The second category is code-level optimization.

  • Code optimization
    • DOM Rendering optimization
      • Event delegation
      • Use document fragmentation to reduce DOM interactions
      • Use innerHTML
      • CSS Hardware Acceleration (GPU acceleration)
      • Caching DOM nodes
      • The vUE/React data impact view mode is adopted
      • Separate read/write operation
      • The animation is applied to elements with position values absolute or fix (out of the document stream).
    • Caution with (increases the time spent finding scopes)
    • Avoid eval and Function (converting source code into executable code is resource-intensive)
    • Algorithm to optimize
    • Js and CSS reference locations
      • Bottom external scripts (to prevent blocking the loading of other resources)
      • Put CSS references in HEAD (faster rendering, less page white space)
  • The browser
    • Reducing HTTP requests
      • Use the cache
      • Request a merge of resources
      • Avoid redirects (add extra requests)
    • Shorten request time
      • Reduce DNS lookups
      • Reduce duplicate code
      • Request resource compression
    • Network security
  • Resource to load
    • Lazy loading (load on demand)
    • Resource compression (volume reduction)
    • CDN (Still cache in nature)

For and For (let I = 0; i ...) Which one has more performance? Why is that?

for for-of for-in

A for-in loop iterates over custom attributes in addition to a set of elements.

A for-of loop does not loop over the key of an object, only the value of an array, so for-of cannot loop over ordinary objects.

The key of for-OF and for-in is a String, which has a conversion process and is expensive. However, the I of the for-loop is a Number, which has a low cost.

However, the for-of syntax also has some advantages in terms of memory footprint.

modular

Know about js modularity? How is Node modularized? What is the modularity of ES6?

Modularity is the encapsulation of a single function into a module (file), which is isolated from each other, but can expose internal members through a specific interface, or can depend on other modules.

Nodejs is modularized through CommonJs. In the CommonJs modularity specification, each file is a module, with its own independent scope, variables, methods, etc., invisible to other modules. Within each module, the module variable represents the current module. This variable is an object whose exports property (module.exports) is the interface to the outside world. Loading a module loads the module.exports property of that module. The require method is used to load modules.

In ES6 syntax specification, ES6 modular specification is defined at the language level, which is a common modular development specification for browser and server. In ES6 modularization, each JS file is an independent module. Import module members use the import keyword, and expose module members use the export keyword.

Webpack workflow

  • Initialization parameter

    Read and merge parameters from configuration files and Shell statements to get the final parameters;

  • Begin to compile

    Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the object's run method to start compiling.

  • Determine the entrance

    Find all entry files according to the entry in the configuration;

  • Compile the module

    Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step.

  • Complete module compilation

    After using Loader to translate all modules in Step 4, the final content of each module after translation and the dependencies between them are obtained.

  • Output resources

    According to the dependency between the entry and modules, the Chunk is assembled one by one containing multiple modules, and then each Chunk is converted into a separate file and added to the output list. This step is the last chance to modify the output content.

  • Output complete

    After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system

Micro front-end

What is a microfront end and what problems does a microfront end solve?

  • What is a micro front end

The micro front end is to divide different functions into multiple sub-applications according to different dimensions, and load these sub-applications through the main application.

The core is to dismantle, dismantle and then again.

  • What problem to solve

    • Different teams develop the same application stack
    • Each team can develop and deploy independently
    • Old code also needs to be applied in the project

    Divide an application into several sub-applications and package the sub-applications into lib. When the path is switched, different sub-applications are loaded, so that each sub-application is independent and the technology stack is not restricted, thus solving the problem of front-end collaborative development.

  • And iframe distinction

    If iframe is used, the user refreshes the page when the sub-application in iframe switches routes, and the route status is lost. Therefore, many functions cannot be realized.

Browser mechanism

Does the browser block HTML parsing when executing JS? Why is that?

When building a DOM tree, the HTML parser transfers control to the JavaScript engine thread when it encounters a JS element. The thread blocks the HTML parser. When the JS is loaded and executed, the JavaScript engine thread gives control back to the HTML parser. Let it continue to build the DOM tree.

Now there are ten CSS files of the same size, it takes n seconds to load one, how many seconds to load 10? Js?

All links in Chrome are initially connected at the same time, but only six resources are loaded in parallel at a time, and the rest are lazily loaded. So it should be 2n seconds.

JS is all loaded in serial, so it takes 10N seconds.

Browser multithreading

  • GUI rendering thread

Responsible for rendering browser interfaces, parsing HTML, CSS, building DOM trees and RenderObject trees, layout and drawing, etc.

Note that the GUI rendering thread and the JS engine thread are mutually exclusive, the GUI thread is suspended (frozen) while the JS engine is executing, and GUI updates are stored in a queue until the JS engine is idle.

  • JS engine thread

Also known as the JS kernel, it handles Javascript scripts. (For example V8 engine)

The JS engine thread is responsible for parsing Javascript scripts and running code.

The JS engine waits for tasks to arrive in the task queue and then processes them. There is only one JS thread running on a Tab page (renderer process) at any one time.

  • Event trigger thread

Belongs to the browser, not the JS engine, and is used to control the event loop. (Understandably, the JS engine is too busy to handle itself, so the browser needs to open another thread to help.)

When the JS engine executes a code block such as setTimeOut (or other threads from the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), it adds the corresponding task to the event thread. When the corresponding event meets the trigger condition is triggered, the thread will add the event to the end of the queue to be processed, waiting for the JS engine to process.

  • Timing trigger thread

SetInterval and setTimeout thread.

The browser timing counter is not counted by the JavaScript engine (because JavaScript engine is single-threaded, if it is in the blocking thread state, it will affect the timing accuracy), so it is timed by a separate thread and triggers the timing (after the timing is finished, it is added to the event queue, waiting for the JS engine to be idle).

  • Asynchronous HTTP request threads

XMLHttpRequest opens a new thread request in the browser after the connection. When a state change is detected, if a callback function is set, the asynchronous thread generates a state change event and places the callback in the event queue. It's executed by the JavaScript engine.

How is browser caching implemented

  • The server first generates the ETag, which the server can use later to determine whether the page has been modified. In essence, the client asks the server to validate its cache by passing the token back to the server.
  • 304 is the HTTP status code, which is used by the server to indicate that the file has not been modified and does not return the content. When the browser receives a status code, it will use the file that the browser has cached.

Vue

Vue life cycle

Four stages

  • Initialization phase

The new Vue() to Created phase initializes properties, events, and reactive data on vue.js instances.

  • Template compilation phase

Created to the beforeMount stage, which compiles the template into a rendering function.

  • Mount the stage

BeforeMount to Mounted, vue. js renders the template to the specified DOM element. During the mount process, vue.js turns on Watcher to keep track of dependency changes.

  • Unloading phase

After calling $destory(), vue.js removes itself from the parent component, cancels all dependent tracing on the instance, and removes the event listener.

Why sort by ID before executing asynchronous queues?

FlushSchedulerQueue sorts all watchers in the flushSchedulerQueue by ID, then executes the watcher in sequence through the queue. The reason for sorting is to ensure that the Watcher executes in the correct order. FlushSchedulerQueue (flushSchedulerQueue) is executed asynchronously through nextTick. The goal is to make the flushSchedulerQueue execute only once in an event loop (clickHandler), avoiding multiple executions and rendering.

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.