HTML

What’s the difference between link and @import?

  • Link is an HTML tag, and @import is provided by CSS
  • The style introduced by link is loaded at the same time as the page is loaded, and the style introduced by @import is loaded after the page is loaded
  • Link has no compatibility issues, @import is not compatible with IE5 below
  • Link can dynamically introduce stylesheets to change styles by manipulating the DOM with JS, whereas @import cannot

Block element, inline element, inline block element

  • Block elements:

    • Common block elements: ul, li, div, P, DL, DT, DD, H1 ~ H6
    • Block elements support all styles
    • The box occupies a row, even if the width is set
    • If the width is not set, the default width is 100% of the parent element

  • Inline elements:

    • Common inline elements: SPAN, a, em, I, B, strong.
    • Only partial styles are supported. For example, width, height, margin and padding are not supported.
    • The boxes are side by side.
    • Wide and high by content.
    • If the code is wrapped, space will be created between the boxes. (Fix: Set font size to 0 for the parent of the inline element, and set font size for the inline element itself.)
    • If a child element is inline, you can set the horizontal alignment by setting the text-align attribute of the child element’s parent element.

  • Inline block elements:

    • All styles are supported.
    • The boxes are side by side.
    • Code wrap, box spacing.
    • If a child element is inline, you can set the horizontal alignment by setting the text-align attribute of the child element’s parent element.

    To some extent, it can be said that the inline block element combines the advantages of the block element and the inline element. Although the existing elements are not classified into this category, the display attribute can be used to realize the mutual conversion of the block element, the inline element and the inline block element.

H5 optimization

Front-end H5 Performance Optimization (in detail)

CSS

(Front-end interview) CSS

JS

(Front-end interview) JavaScript

ES6

(Front-end interview) ES6

vue

(Front-end interview) 100 questions won Vue

Write a topic

Handwritten image stabilization

Handwritten throttling

Bubble sort

webpack

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

Core concepts: Entry, output, loader, plugins, mode

Reference from: www.jianshu.com/p/a2c646416…

algorithm

other

Url input into the rendering process

SEO

Responsive page solutions

Node proxy forwarding

Cross-domain causes and solutions

What happens from entering the URL to rendering the browser

Processes and threads

ES6 is different from CommonJS

LocalStorage, sessionStorage, cookie

The localStorage life cycle is permanent, and the localStorage information will exist forever unless it is actively cleared. The size of stored data is generally 5MB, and it is only stored in the client (i.e. browser), and does not participate in the communication with the server.

SessionStorage is valid only for the current session and is cleared after closing the page or browser. The size of stored data is generally 5MB, and it is only stored in the client (i.e. browser), and does not participate in the communication with the server.

Cookies are a technique that can be stored locally in the browser for client – server sessions. In short, a cookie is a text file sent from the server to the client; The purpose is to identify the user.

Front-end performance optimization

In May of this year, Google proposed three core metrics for the user experience of the site, namely:

  • LCP
  • FID
  • CLS

LCP represents the speed of a page, although there are other speed metrics, but as mentioned above, LCP is more. One is that the metrics are updated in real time so that the data is more accurate, and the other is that they represent the rendering time of the largest element on the page, which is usually a quick load of the largest element on the page that makes the user feel good about the performance.

FID represents the interactive experience index of the page. After all, no user wants to trigger the feedback of the page after the interaction is very slow. The fast interactive response will make the user feel the page is very smooth.

CLS represents a measure of page stability, especially on mobile. Because the phone screen is small, a high CLS value will make the user feel bad about the page experience.

Obtain metrics by installing the Lighthouse plug-in.

Resource optimization

This measure can help us optimize FP, FCP and LCP indexes.

  • Compress files and use tree-shaking to remove useless code
  • The server configures Gzip to further compress the file volume
  • Resources are loaded on demand
  • You can use Chrome DevTools to analyze the CSS files that are not needed on the first screen to simplify the CSS
  • Inline key CSS code
  • Load resources and use CDNdns-prefetchPre-resolved DNS IP address
  • Use of resourcespreconnectTo perform IP resolution, TCP handshake, and TLS handshake in advance
  • Cache files and perform offline cache for the first screen data
  • Image optimization, including: using CSS instead of shoes, cropping screen image size, using Base64 or PNG format for small images, using WebP as far as possible to support WebP, gradually loading pictures

Network optimization

This measure can help us optimize FP, FCP and LCP indexes.

Most of this content can be configured for you by the back end or operations, and upgrading to the latest network protocol will usually make your site load faster.

For example, use HTTP2.0, TLS 1.3, or simply embrace QUIC

Optimizing time-consuming tasks

This measure can help us optimize TTI, FID, TBT index.

  • Using a Web Worker to dump time-consuming tasks onto child threads allows the main thread to process JS tasks without running out of time
  • React 16 uses this technique to schedule tasks and time slices. The simple idea is to prioritize different tasks and then slice up a long task to ensure that the task is executed only during the browser’s free time and not on the main thread

Do not insert content dynamically

This measure can help us optimize CLS index.

  • Using a skeleton screen to give the user an expected content frame, the experience of displaying content abruptly will not be good
  • Do not leave the image wide and long, but use a placeholder map to give the user an idea of the image’s location
  • Do not insert content in the middle of existing content, at least give a reserved space

This piece of content comes from the public account of Kay’s article

Why did Axios request twice

Reasons for two requests

Browsers use CORS communication to automatically add additional headers when they discover that a request is across domains. Simple requests only receive one request, and non-simple requests receive one request. Browsers classify CORS requests into two categories: Simple request and not-so-simple Request.

Simple and non-simple requests

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

(1) Request method is one of the following three methods:

  • HEAD
  • GET
  • POST

(2) HTTP headers do not exceed the following fields:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-type: is limited to three valuesapplication/x-www-form-urlencoded,multipart/form-data,text/plain

Any request that does not meet both conditions is a non-simple request.

Non-simple requests are requests that have special requirements on the server, such as the request method being PUT or DELETE, or the content-Type field being of Type Application/JSON.

CORS requests that are not simple requests are preceded by an HTTP query request, called a “preflight” request.

The browser asks the server if the domain name of the current web page is on the server’s license list, and what HTTP verb and header fields can be used. The browser issues a formal XMLHttpRequest request only if it receives a positive response; otherwise, an error is reported.

The solution

  • In main.js, set axios’ default request header axios.defaults.headers[‘ content-type ‘] = ‘application/x-www-form-urlencoded’

  • Use this.$qs.stringify(postData) to convert the data format of the passed arguments.

Basic configuration for WebPack

  • Entry: Indicates which module WebPack should use as a starting point for building its internal dependency graph.
  • Output Output: Where to output the bundles it creates and how to name these files./dist is the default.
  • Loader: Handles files that are not JavaScript (Webpack itself only understands JavaScript)
  • Plugins: Used to perform a wider range of tasks

Common browser kernels

  • Blink Google
  • Trident IE
  • Gcko firefox
  • Its apple

Get and POST

  • Get is for getting data, and POST is for submitting data.

    Note: HTTP requests are initially set up in eight ways. There is essentially no difference between the eight methods. It just makes the request more semantic.

    • OPTIONS returns the request method supported by the server
    • GET Obtains specified resources from the server
    • HEAD is the same as GET, except that the response body is not returned, only the response header is returned
    • POST submits data to the server in the body of the request
    • PUT is similar to POST but has idempotent properties and is generally used for updates
    • DELETE Deletes a resource specified by the server
    • TRACE returns the request received by the server. This is used during testing
    • CONNECT Reserved and not in use

  • GET is used to retrieve information, which is idempotent and cacheable, while POST is used to modify data on the server, which is non-idempotent and cacheable

ForEach, for in, for of

  • The foreach method cannot break out of the loop or return from the function body with a break statement

  • For-in loops are actually designed for looping enumerable objects

    
let obj = {a: '1'.b: '2'.c: '3'.d: '4'}
for (let o in obj) {
    console.log(o)    // Iterate over the object's property names a,b,c,d
    console.log(obj[o])  // this is the attribute's value 1,2,3,4
}
Copy the code

  • ForEach is more used to iterate over groups of numbers

  • For in is usually used to iterate over objects or JSON

  • Keys () and object.keys ().

  • For in loops for key, for of loops for value

reference

List a few features of CSS3

  • Some selectors have been added
  • Added three border attributes: border-radius, box-shadow, and border-image
  • box-shadow
  • background-clip
  • Text: word-wrap, text-overflow, text-shadow, text-decoration
  • Transition: CSS properties, time spent, effect curve (default ease), delay time (default 0)
  • transform
    • Transform: Translate (120px, 50%
    • Transform: scale(2, 0.5) : scale
    • Transform: rotate(0.5turn) : rotate
    • Transform: skew(30DEg, 20DEg) : skew
  • Animation animation
  • Gradient: Linear-gradient: linear gradient, radial gradient: radial gradient

List a few ES6 features

  • Arrow operator
  • Enhanced object literals
  • String template
  • let const
  • for of
  • promise
  • Destruct assignment of variables

What is callback hell? The solution?

An asynchronous request is nested within an asynchronous request, one dependent on the execution of the other, nested with callbacks

There are many ways around callback hell: Promise objects, Generator functions, async functions

vue-loader

Vue Loader is a Webpack Loader that allows you to write Vue components in a format called single-file Components (SFCs) :

Vue vs. React

In common

  • Data-driven view
  • componentization
  • All useVirtual DOM

The difference between

1. Different core ideas

  • Vue’s main features: a flexible and easy-to-use progressive framework for data interception/proxy, which is more sensitive and accurate to detect changes in data
  • React advocates functional programming (pure components), immutable data, and one-way data flow

2. Component writing differences

  • React recommends putting HTML and CSS all in JavaScript
  • Vue recommends the single-file component format of Template

3. Diff algorithm is different

4. The principle of response is different

  • Vue recursively listens for all attributes of data and modifies them directly
  • Vue automatically finds reference components to re-render when data changes
  • React is state machine-based, manually optimized, and data immutable
  • React When data changes, use the component as the root directory and rerender all data by default

Difference between Action and mutation in VUEX

const store = newVuex.Store({state: {count: 0},mutations: { increment (state) { state.count++ } },actions: { increment (context) { context.commit('increment')}}})Copy the code

1. Process sequence

  • “Corresponding View – > Modify State” is split into two parts. The view triggers the Action, and the Action triggers Mutation.

2. Role positioning

  • Based on the process order, the two play different roles.
  • Mutation: Focusing on modifying State is theoretically the only way to modify State.
  • Action: business code, asynchronous request.

3. Limit

  • Different roles have different limitations.
  • Mutation: Must be executed synchronously.
  • Action: Can be asynchronous, but cannot operate State directly.

Front-end Compatibility Issues

Partially quoted from juejin.cn/post/694786…