CSS article

1. 1px physical pixel implementation

In the mobile end Web development, the UI design draft sets the border as 1 pixel. If border:1px appears in the front end development process, the test will find that 1px is relatively thick on some models, which is the classic 1px pixel problem on the mobile end.

DevicePixelRatio DPR = device pixel/CSS pixel (in a certain direction) you can use window.devicePixelRatio to obtain the DPR value of the device. Generally speaking, in a desktop browser, the device Pixel ratio (DPR) is equal to 1, and a CSS pixel is a physical pixel. On the mobile end, most models are not 1, and the DPR of iPhone is generally 2 and 3, so one CSS pixel is no longer corresponding to one physical pixel, but 2 and 3 physical pixels. The usual CSS width: 1px corresponds to 2px in a physical pixel. DPR may be different depending on the phone model.

Take iphone5 for example, the CSS pixel of iphone5 is 320px568px, and the DPR is 2, so the device pixel is 640px1136px

Solution 1

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <! -- Initial-scale =1.0 --> <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {Width: 0.5 rem; Height: 0.5 rem; border-bottom: 1px solid# 000;} </style> <! -- Pixel ratio = physical pixel/CSS pixel --> </head> <body> <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function() {// What is the pixel ratio? Var DPR = window.devicepixelRatio; console.log(dpr); Var scale = 1 / DPR; / var/viewing area width width = document. The documentElement. ClientWidth; Var metaNode = document.querySelector('meta[name="viewport"]');
        metaNode.setAttribute('content'."width=device-width, initial-scale='+scale+'"); HtmlNode = document.querySelector(var htmlNode = document.querySelector('html');
        htmlNode.style.fontSize = width * dpr + 'px';

    }
</script>
</html>
Copy the code

Solution 2

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <! -- Initial-scale =1.0 --> <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"< span style = "color: RGB (51, 51, 51); font-size: 14px! Important;type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            position: relative;
        }

        #box:before {
            content:' ';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: # 000;

        }
        @media screen and (-webkit-min-device-pixel-ratio:2) {
            #box:before {The transform: scaleY (0.5); } } @media screen and (-webkit-min-device-pixel-ratio:3) {#box:before {The transform: scaleY (0.333333); } } </style> </head> <body> <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {

    }
</script>
</html>
Copy the code

2. Method of horizontal centralization of elements

Methods a

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
Copy the code

Method 2

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left:-25px;
            margin-top:-25px;
        }
    </style>
Copy the code

Method 3 (CSS3)

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50% , -50%);
        }
    </style>
Copy the code

Method 4 (New Version of Flex)

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
Copy the code

Method 5 (older Version of Flex)

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
Copy the code

3. How to implement REM adaptation on mobile terminal

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge""> <title>rem adaptation </title> <styletype="text/css">
        #wrap {Width: 0.5 rem; Height: 0.5 rem; background:grey; } /* Set the width of the screen area */ </style> </head> <body> <div id="wrap">
        <div class="box"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {/ / get the width of the screen area var width = document. The documentElement. ClientWidth; HtmlNode = document.querySelector('html'); Htmlnode.style. fontSize = width +'px';

    }
</script>
</html>
Copy the code

4. CSS implements a two-column layout with a fixed width on the left and 7 methods of adaptive on the right

www.cnblogs.com/wangzhenyu6…

Js article

1. What is cross-domain? Cross domain solution?

Cross-domain means that the browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction imposed by the browser.

The same-origin policy

- - Yes Browser security policy - - Protocol name, domain name, and port number must be the same - Example:Copy the code

http://www.123.com/index.html called http://www.123.com/server.php (not cross domain) called http://www.123.com/index.html http://www.456.com/server.php (the main domain name is different: 123/456, Cross domain) http://abc.123.com/index.html call http://def.123.com/server.php (subdomain: ABC/def. Cross domain) http://www.123.com:8080/index.html call http://www.123.com:8081/server.php (different port: 8080/8081, Cross domain) http://www.123.com/index.html call https://www.123.com/server.php (different protocol: HTTP/HTTPS, cross-domain) please note: Localhost and 127.0.0.1, while both point to the local machine, are cross-domain. When the browser executes a javascript script, it checks which page the script belongs to. If it is not a same-origin page, it will not be executedCopy the code

Cross domain

- Violating the same origin policy results in cross-domainCopy the code

The solution

- JSONp CORS WebSocket Node middleware proxy (cross domain twice) NGIX reverse proxy...Copy the code

1. The json approach

So the principle of JSONP is to take advantage of the fact that script is imported without limiting the source, pass in the name of the processing function as an argument, and then return the execution statement.

Add: 1) JSONP vs. AJAX

JSONP, like AJAX, is a way for a client to send a request to the server and get data from the server. But AJAX is a same-origin policy, JSONP is a non-same-origin policy (cross-domain request)Copy the code

2) the json advantages and disadvantages

SONP has the advantage of simple compatibility and can be used to solve the problem of cross-domain data access in mainstream browsers. The disadvantage is that only support for get methods is limited and insecure and may be subject to XSS attacks.Copy the code

Var script = document.createElement('script'); // Set the callback functionfunctionGetData (data) {console.log(data); } // Set the SRC property of script and set the request address script.src ='http://localhost:3000? callback = getData'; / / the document for the script to take effect. The body. The appendChild (script). </script>Copy the code

2. Simple request from CORS

CORS requires both browser and backend support. Internet Explorer 8 and 9 need to be implemented through XDomainRequest. The browser will automatically carry out CORS communication, the key to achieve CORS communication is the back end. As long as the backend implements CORS, cross-domain is achieved. To enable CORS, set access-Control-allow-Origin on the server. This attribute indicates which domain names can access resources. If a wildcard is set, all websites can access resources. Although setting up CORS has nothing to do with the front end, solving cross-domain problems in this way can result in two cases of simple and complex requests being sent.

As long as the following two conditions are met, it is a simple request

Condition 1: Use one of the following methods:

GET
HEAD
POST

Condition 2: The value of the content-Type is limited to one of the following:

text/plain
multipart/form-data
application/x-www-form-urlencoded

None of the XMLHttpRequestUpload objects in the request have any event listeners registered; The XMLHttpRequestUpload object can be accessed using the xmlHttprequest.upload attribute.

4.websocket

Websocket is a persistent protocol of HTML5, which realizes the full duplex communication between browser and server, and is also a cross-domain solution. WebSocket and HTTP are both application layer protocols based on TCP. However, WebSocket is a two-way communication protocol. After the connection is established, both the WebSocket server and client can actively send or receive data to each other. At the same time, the WebSocket needs to use HTTP protocol to establish a connection. After the connection is established, the two-way communication between the client and server is independent of HTTP. The native WebSocket API is not very convenient to use. We use socket. IO, which encapsulates the WebSocket interface well, provides a simpler, flexible interface, and provides backward compatibility for browsers that do not support WebSocket.

Let’s start with an example: the local file socket. HTML sends and receives data to localhost:3000

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('I love you'); // Send data to the server} socket.onMessage =function(e) { console.log(e.data); } </script>Copy the code

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws'); Remember to install wslet wss = new WebSocket.Server({port:3000});
wss.on('connection'.function(ws) {
  ws.on('message'.function (data) {
    console.log(data);
    ws.send('I don't love you')}); })Copy the code

Summary: CORS supports all types of HTTP requests and is the fundamental solution for cross-domain HTTP requests. JSONP only supports GET requests. The advantage of JSONP is that it supports older browsers and can request data from sites that do not support CORS. Both the Node middleware proxy and the Nginx reverse proxy have no restrictions on the server through the same origin policy. In daily work, the cross-domain solutions used more are CORS and NGINX reverse proxies

For more information: juejin.cn/post/684490…

2. What are closures?

A closed container, similar to a set or map container, for storing data
A closure is an object that stores data in the format key:value

Forming conditions:

Nested function
An inner function refers to a local variable of an outer function

Advantages of closures:

Extends the life cycle of external function local variables

Disadvantages of closures:

Prone to memory leaks

Note:

Use closures wisely
Remove closures as soon as they are used.

Segmentfault.com/a/119000000…

What is Axios? How to use it? Describe the process of using it to implement the login function?

(A). What is Axios?

Axios is based onpromiseAn HTTP client for the browser and NodeJS, mainly used to send requests to the background, and more control in the request.
supportpromise
Provides a number of concurrent methods
Provide interceptors
Provide support for CSRF(Cross-domain request forgery)

Axios Fetch Ajax (jquery

Both are syntaxes that support Promise, while the latter defaults to callback
Fetch is essentially separate from XHR is a new syntax (has its own feature that does not pass cookies by default and cannot listen to the progress of requests like XHR does)

(three). How to use?

<script>
    axios.get(' ').then(function(){
        
    }).catch(function(){
        
    })
    
    axios.post(' ').then(function(){
        
    }).catch(function(){
        
    })
</script>
Copy the code

(4). Describe the process of using it to achieve the login function?

3. The const, var, let the difference

www.cnblogs.com/zzsdream/p/…

4. New operator principle analysis

www.cnblogs.com/lvmylife/p/…

5. Promise’s callback mechanism

Juejin. Cn/post / 684490…

6. Preventing bubbling, talk about the preventing bubbling of events in VUE and its principle

Caibaojian.com/javascript-…

Event modifier

Calling event.preventDefault() or event.stopPropagation() in the event handler is a very common requirement. While we can easily do this with Methods, it’s better to have pure data logic instead of dealing with DOM event details.

To solve this problem, vue.js provides event modifiers for V-Ons. By point (.) Represents the instruction suffix to invoke the modifier.

.stop
.prevent
.capture
.self
.once

<! -- prevent click events from bubbling --> <a V-on :click.stop="doThis"></a> <! <form V-on :submit. Prevent ="onSubmit"></form> <! <a V-on :click.stop.prevent="doThat"></a> <! <form V-on :submit. Prevent ></form> <! <div V-on :click.capture= <div V-on :click.capture="doThis">... </div> <! <div V-on :click.self= -- <div v-on:click.self="doThat">... </div>Copy the code

When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using @click.prevent. Self will block all hits, whereas @click.self. Prevent will only block hits on elements.

4. Basic data types

Js in six types of data, including five basic data types (Number, String, Boolean, Undefined, Null), and a kind of complex data types (Object).

5. Determine whether two objects are equal

First determine whether the length of the object attributes is equal, and then determine whether the value of each attribute is equal juejin.cn/post/684490…

6. How much do you know about two javascript variables interchanging values?

Blog.csdn.net/nyflxp/arti…

7. Array deduplication 12 ways?

Segmentfault.com/a/119000001…

vue/React/Angular

1. React vs. Vue?

Similarities:

Both have componentized development and Virtual DOM(Improve the running efficiency of the program)
Both support props for data communication between parent and child components
Both support data-driven attempts. Instead of manipulating the DOM directly, update the status data interface automatically
Both support server-side rendering
All support Natived solutions, React Native, Vue Weex,(Both support native cross-platform application)

Difference:

Data binding: VUE implements two-way data binding, react data flow is one-way
React uses JSX to write all HTML and CSS into Javascript. Vue uses webpack + Vue-Loader as a single file component. That is, HTML, CSS, and JS are written in the same file
The state object is immutable in React applications. You need to use the setState method to update the state. In VUE, the state object is not required
Unlike Virtual DOM, where Vue keeps track of each component’s dependencies and doesn’t need to re-render the entire component tree, React rerenders all components whenever the state of the application changes. React requires shouComponentUpdata to control its lifecycle
React is strictly for the VIEW layer of MVC, whereas Vue is the MVVM pattern

2. Mechanism for Redux to manage state

Basic understanding of Redux

Redux is a standalone JS library for state management, not the React plugin library
It works with React, Angular,vue, etc., but mostly works with React
Function: Centrally manages states shared by multiple components in the React application and data obtained from the background

How Redux works

1. The structure of Redux has three modules:

store (Internal management of state)
reducers (Generate new state from old state)
action creator (specifically generating action objects)

2. Store manages the state state internally. The Communication between the React component and reducers is based on store. Store acts as a bridge, providing two methods, one for readinggetState(), an updatedispatch().

Redux uses extensions

React-redux simplifies redux encoding
Asynchronous programming of REdux is implemented using redux-thunk
Use Redux DevTools for debugging in Chrome

Vue article

1. Talk about the communication mode between Vue components

Types of communication

The parent component communicates with the child component
The child component communicates with the parent component
Intergenerational component communication
Communication between sibling components

Implement communication mode

(一). props

Through the generalThe labelProperty to communicate from parent to child
Communicate from child to parent via *** function *** attribute
Disadvantages: It is difficult to communicate with sibling components

Generational components must be passed layer by layer
Sibling components rely on parent components

(2). Vue custom events

Vue has a built-in implementation that can replace functions of a function type

< mycomp@eventName =”callback”
$emit(‘eventName’,data) $emit(‘eventName’,data)

When a parent component writes a child component label, bind it with custom listeners, assign it callback functions, and distribute events in the child component, which VUE provides$emit('Specify time name', data), which is then passed from the child to the parentCopy the code

Disadvantages: Only suitable for child to parent communication

(iii) Message subscription and publication

You need to introduce an implementation library for message subscription and publishing, such as Pubsub-js

Subscribe (‘ MSG ‘,(MSG,data)=>{})
Pubsub.publish (‘ MSG ‘,data)

Advantages: This approach can be used to communicate between any relational components

(四). vuex

Vuex is a vUE plug-in that centrally manages state data shared by multiple vUE components
Advantages: No restrictions on inter-component relationships, and more centralized and convenient than pubSub library management

(5). The slot

What is it: a label with data that is passed from parent to child

1). The child component
2). The parent component

Note: The tag template for communication is parsed in the parent component and then passed to the child component

2. About the vue

Vue is a progressive JS framework developed and maintained by the ELE. me UED team
Vue is a framework for MVVM

3. How to use VUE to build projects

Build the project using vuE-CLI scaffolding tools
You can also directly import vue.js for project construction

4.Vue lifecycle functions

The VUE lifecycle is divided into four phases:

Component creation (Creating)
Template Rendering (Mounting)
Updating of data
Component Uninstallation (CWND)

Complete process of VUE life cycle:

5.Vuex status management mechanism

Basic understanding of Vuex

1). What is it: Vuex is a state management Vue plug-in developed specifically for vue.js applications
2). Functions: Centralized management of vUE’s multiple shared states and background data acquisition is mainly to solve the problem of state sharing among components. It is emphasized that centralized management is convenient for maintenance and decoupling, so not all projects are suitable for vuEX.

How Vuex works

6. Name the four vUE commands and their usage

The V-if conditional render instruction, representing the presence of destruction
The v-bind binding directive, used to bind attributes (shorthand 🙂
V-on Listening for things instruction – @
The V-for loop instruction

7. What are the navigation hooks? What parameters do they have?

Navigation hooks are essentially vue-Routers.
Mainly divided intoglobal 和 local
Global hook function

1).beforeeach: Route switching starts calling
2).aftereach: called when the route is switched away

Local to single route

1). beforeEnter

The hook function of a component

1). beforeRouterEnter
2). beforeRouterUpdate
3). beforeRouterLeave

parameter

1).to: the target object to be entered
2). From: The current navigation leaves the object
3).next: is a function call resolve

8. What is a V-Model? How do tags bind events in Vue?

Vue uses V-Model to bind form data in both directions
V-bind binds a value attribute
Bind the current element to an event using V-ON

<div id="demo">
    <input v-model="inputValue" />
    <p>{{inputValue}}</p>
    
    <input v-bind:value="inputValue2" v-on:input="inputValue2 = $event.target.value" />
</div>
<script>
    var vm = new Vue({
        el:"#demo",
        data:{
            inputValue:' ',
            inputValue2:' '
        }
    })
</script>
Copy the code

9. Lazy route loading

Route lazy loading is also called lazy loading, which means loading when you need it

How to use it: With the asynchronous components in Vue, and the code separation in Webpack, just return a permise function yourself, and resolve just contains the xxx.vue file you want to use.

// Lazily load import Vue from in the router file index.js'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

function resolveView(view){
    return ()=> import(/*webpack chunk name*/`@/components/${view}.vue`)
}

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component: resolveView('HelloWorld')
        },
        {
            path:'/detail',
            name:'Detail',
            component: resolveView('Detail')]}})Copy the code

10.Vue-loader explains

(I). What is vue-loader?

vue-loaderIs a loader that converts.vue components into Javascript modules

(2). Why do we want to translate this VUE component

Some data can be dynamically rendered
All three tags have been optimized, es6 style can be used directly in script and Sass can be used by default, and the choice of scope is also provided
In addition to the development phase, hot loading is also provided

11. Used slot codes? A named slot or an anonymous slot?

Meaning:

Slots in vUE are a very useful thing,slotBasically, it’s a placeholder
There are three types of slots in VUE: default slots (anonymous slots), named slots, and scoped slots

1). Anonymous slot: is no name, as long as the default fill in here
2). A named slot: refers to having a name
3). Scope slot: indicates that only the current slot is scoped

For example:

Vue <template> <div> <h2> About slot </h2> <slot name="header"> < / slot > / * named slots * / < slot > < / slot > / * anonymous slot * / < slot name ="footer" say="hello"></slot>     /*say='hello'*/ </div> </template> <script>export default {
        name:'about'
    }
</script>

Copy the code

Vue <template> <div> <About> <h2> This is the content of the helloWorld component </h2> <div slot="footer" slot-scope="aaa"> {{aaa}} This is the bottom </div> <div></div> <div slot="header" slot-scope="aaa"This is the header </div> </div> </template> <script> import About from'@/componts/About';
export defalut {
    name:'HelloWorld', components: {About}} </script>Copy the code

Print result:

12. Explain your understanding of the Vue virtual DOM

(A). What is the virtual DOM

Basically, add dom elements in the form of JS objects
It’s essentially optimizing the diff algorithm
Use the old and new DOM comparisons to get your different DOM and update it to your real DOM in one go
The virtual DOM itself has its drawbacks and is better suited for batch dom modification
Try not to modify the DOM across layers
Set the key to make the most of the node

13. How to understand the MVVM pattern of Vue

(1) the difference between.mVVM and MVC

MVC is the Model View Controller
MVVM stands for Model View viewModel
Vue focuses on the framework of views and ViewModels

(2). MVC process

The user input data (view) => to the controller (Controller)=> The controller determines that it can pass the number to model => Model passes the data to the View
Sometimes the user passes data (view) to the controller, and the controller decides that the data does not need to be requested from the database, so it can return the data directly to the View
A view does not require business processing, just data requests, or a view can be made directly like a Model request

(iii). MVVM process

14. The function of keep-alive in Vue

(A) What is keep-alive

Basically, it keeps inactive components alive.
It providesinclude 和 excludeTwo properties allow the component to cache conditionally

(2). Principle of implementation

In fact, the required cache vNode is put into the cache when created, and fetched according to the name when render

How to use it

Add it to the meta of the routekeepAliveattribute
Used with router-view

// router/index.js
export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:resolveView('HelloWorld'),
            meta:{
                keepAlive:true}}}])Copy the code

// App.vue
<template>
    <div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </div>
</template>
Copy the code

$route.meta.keepAliveCache for different pages

Problems encountered in the project

1. Swiper has no problem getting data from the background. CSS code is fine, but images are not moving.

(A) The main reason: Swipter was initialized in advance, and the data was not fully available at this time.

(II) Solutions:

Start with VUE:

Vue provides a method called nextTick() to solve the dom sequential execution problemCopy the code

Start with swiper (Observer property,observeParents property) :

var myswiper = new Swiper('.swiper-container',{
    autoplay:true,
    loop:true,
    observer:true// Automatically initialize observeParents when swiper and child elements change:true// automatically initialize swiper when it changes with the parent element})Copy the code

2. Vuejs project performance optimization (packaged DIST file is too large)

www.jianshu.com/p/41075f1f5…

3. Problems encountered in vUE project

www.bbsmax.com/A/kmzLPblGz…

The node article

1. Why learn Node for the front-end?

Now the front-end code is not written as a project like native, and the project is built on top of Node, because we have projects like Vue and React code that actually don’t run in the browser, we have to passwebpackSuch a tool compiles the transformation into code that runs in the browser, whilewebpackIs through thenodeTo realize, so learning node is mainly to understand the front-end engineering things, otherwise I don’t know what NPM is, what is the bottom of wepack, so when it comes to engineering is deeper, I can’t understand it
So node front-end this learning, but the main purpose of learning is not to write back-end, mainly in order to understand the front-end engineering

2. How do I upgrade Node? Why use NVM?

(a). Why do we sometimes need to upgrade the Version of Node

Under what circumstances is it necessaryThe node v8.0Upgrade to theThe node v11.0 ?

The new syntax may not be supported in older versions
(Newer versions of Node pack much more efficiently than older versions.)Vue-cli requires Node version >8.1.0, actually because of the underlying Webpack, when our project is very complex, the packaging speed will be very slow,webpackNow upgraded to 4.0, WebPack relies on the new Node API to improve its packaging efficiency

How do I upgrade node? (neednvmSupport)

What is NVM?

It allows you to install different versions of Node on your computer, and you can switch between them

NPM install NVM // Install NVM NVM ls // Check the installation version. NVM install v11.0.3 // Install the new version. NVM use v.11.0.3 // Use a versionCopy the code

Modular difference, AMD, CDM, COMMONJS ESMONDULE

AMD meaning

AMD relies on prefixes, such as angular.js

The difference between

1. There is no difference between AMD and CDM

2. COMMONJS can be understood as a concrete implementation of CMD with stronger coupling. The introduction of modules is a mechanism of runtime introduction and dynamic introduction, which can be referenced in if and else.

if (true) {
    const path =  require('path');
} else {
    const path = require('fs');
}
Copy the code

This kind of modular introduction should come first and not be placed in any logic. It’s a static introduction. What you want to introduce is decided at the beginning.

Benefits of static import: You can do pre-analysis of the code, webpack will have a dependency topp, only your code is an import syntax introduction, can static to help you analyze a dependency structure of the project, to help you quickly package, if you are not the import syntax, it is impossible to use Webpack

// Error cannot be written like thisif (true) {
    import a from 'a';
} else {
    import b from 'b';
}
Copy the code

HTTP post

1. What happens when a page is loaded and displayed from the time the URL is entered?

The DNS address (IP address) of the URL queried by the browser. 3. The DNS server returns the IP address to the browser. 6. After receiving the returned data, the browser parses the data as follows: A: parses HTML -- parses syntax B: builds a DOM tree C: parses CSS files D: Parses data The LAYOUT DOM node browser also encounters some referenced images during this process and continues to make requests to the server, but does not block. Instead, it continues to execute the code. Of course, there may be JavaScript tags and execute, at this point if you need to make a request, the browser will block, until the request, parsing, execution is finished will continue to execute the code; E: Draw the DOM node (the end character parsed to HTML) -- complete F: backflow. Simply put, this step is performed when the DOM node is affected by JS or CSS and the page is redrawn.Copy the code

www.cnblogs.com/dinghuihua/…

2. Common HTTP status codes

The following are common HTTP status codes: 200 - request successful 301 - resource (web page, etc.) permanently transferred to another URL 404 - Requested resource (web page, etc.) did not exist 500 - internal server errorCopy the code

www.runoob.com/http/http-s…

3. The client sends an HTTP request message to the server in the following format

Request line, request header, blank line, and request data

4. The HTTP response also consists of four parts

Status line, message header, blank line, and response body

Front end test questions, summed up two every day, the interview hemp slip