Originally, I wanted to review some knowledge through a Vue project, but due to the continuous expansion of the review knowledge, I took more and more notes. During this period, I read many articles of big wigs. In the spirit of open source I learned, I gave some notes to some people who might need them. The article knowledge point may be a little trivial, but I have divided the size of the title, the subsequent slowly supplement, thank you again for the article

reset.css

  • Function: Different browsers display the same TAB differently, so we need to reset the CSS to achieve the same effect in different browsers
  • Use: Create a CSS file, search for reset CSS and copy the content to it, referencing the file in main.js

Lazy loading and preloading

preload

role

Resource preloading is a performance optimization technique that loads some of the main content of a web page before it is fully loaded to provide a better user experience and reduce waiting time for whitespace. Otherwise, if the content of a page is too large, the page will remain blank loaded for a long time until all the content is loaded.

implementation

  1. Using HTML tags
  2. Using an Image object
  3. With the XMLHttpRequest object, there are cross-domain issues, but the preloading process is finely controlled

Lazy loading

role

  1. It can improve the user experience. If a page has a lot of content, it will take a long time to load and inevitably reduce the user experience
  2. Reduce the load of invalid resources, which significantly reduces the strain and traffic on the server, as well as the browser load.
  3. Prevent the concurrent loading of too many resources will block js loading, affecting the normal use of the website.

The principle of

Start by setting the image SRC property on the page to an empty string (or javascript:;) And the real path of the picture is set in the data-original property. When the page is scrolling, listen for the Scroll event. In the callback of the Scroll event, determine whether our lazy loaded picture can enter the visible area. Lazy loading can be achieved if the SRC property of the image is set to the value of data-Orignal in the visible area

implementation

  1. Wheel mounting

  2. Import import in main.js

  3. Use Use of third-party components

    Import def_lazy_img from "./assets/img/loading.gif" vue. use(VueLazyload, {loading: def_lazy_img, // default image})Copy the code

fastclick

Functions: The mobile phone has the function of double-clicking to enlarge the page, and there will be a sending delay of 300ms to remove the delay

Principle: remove the original browser default click implementation (double click) manually simulated implementation of the click event

Implementation:

  1. NPM install

  2. The import to introduce

  3. Used in main.js

    fastclick.attach(document.body)
Copy the code

    Binding body(vUE is a single page application)

Use of REM and EM

The difference between

  • Rem units translated to pixel values are determined by the font size of the HTML element. This font size is affected by the font size Settings in the browser, unless an explicit unit is overridden.

  • Em units are converted to pixel values, depending on the font size they use. This font size is inherited from the parent element unless overridden explicitly with a specific unit.

With Ajax

Thank you for your article on Ajax principles.

Ajax based

What is the Ajax

Ajax is a Web development technique that asynchronously requests data to improve page performance and user experience. That is, Ajax loads data through asynchronous requests and renders it on a web page without the need to refresh the page. As shown in the example below, the leader continues to do his own work and listens to Xiao Li’s work report after the secretary calls xiao Li, instead of telling the secretary to call Xiao Li and then stopping his work and waiting for Xiao Li to come. Will be applied to form submission, give input prompt in the text box, or click submit after the page does not refresh, quickly appear updated results

We regard the process that the leader wants to report to Xiao Li as an Ajax request process

Ajax request steps

var ajax = new XMLHttpRequest(); Open ('GET', url, true) // Specify the type of request url to process the request asynchronously. "application/x-www-form-urlencoded"); // The content encoding type of the message sent to the server ajax.send(null); / / send an ajax request ajax. The onreadystatechange = function () {if (obj. ReadyState = = 4 && (obj. Status = = 200 | | obj. Status = = 304)) {}}Copy the code

About HTTP request methods

GET and POST

  1. GET gets data from the server. POST pushes data to the server
  2. The parameters of the GET request are visible in the URL. The parameters of the POST request are added to the BODY and are not visible in the URL
  3. The urls for both requests have a length limit, which is determined and set by the browser and the Web server. Because the parameters of the GET request are added to the URL, the length limit of the GET request takes into account the length of the parameters
  4. GET requests are cached by the browser, POST is not
  5. The parameters of a GET request are fully exposed in the browser’s history, while the parameters of a POST request are not

PUT

Put some content to the server

DELETE

Delete some content on the server

HEAD

You only want to get the response header returned by the server, and do not affect the subject content

OPTIONS

It is typically used to send exploratory requests to the server, and if a message is returned indicating that a connection has been established, other requests can proceed

HTTP Network status codeRepresentative HTTP status code (juejin. Cn)

1XX: The server has received the message but does not return the message to the client

2XX: succeeded – Indicates that the request is successfully received

200: The client request is successful and the server has successfully processed the request

204: a body that indicates that the request received by the server has been successfully processed but does not contain and does not allow any entity to be returned in the response returned

206: Indicates a client scope request, so the weapon successfully executed this part of the GET request

3XX: Succeeded but has been redirected

301: The requested resource has been assigned to a new URL, a redirect

302: Similar to 301, but 302 represents a resource that is not permanently moved, but temporarily redirected

304: indicates that the page has not been modified since the last request and the original cache can be used, that is, negotiated cache

4XX: Client error

400: The client has a syntax error that the server cannot understand

403: The server rejected the request

404: The server could not find the requested page

5XX: Server error

500: An error occurred on the server side while executing the request

503: The server is temporarily overloaded or is down for maintenance and cannot process requests

505: The server does not support the REQUESTED THHP protocol version

The implementation principle of front-end routing

[Article] Front-end routing principle analysis and Implementation – Running sunflower – Bloggarden (CNblogs.com)

What is front-end routing

On the server side, routing describes the mapping relationship between URLS and processing functions. This mapping is one-way, that is, URL changes cause UI updates (without page refresh).

Hash pattern

Hash is the hash(#) and the part after it in the URL. Hash is more compatible, but the # is not pretty.

Hash uses the Hashchange event to listen for changes in urls, such as browsers moving forward or backward, tags changing urls, and window.location changing urls

  1. Class Initializes the route
  2. Implement hash storage and execution of routes
  • 2.1 Store hash and callback functions of the route
  • 2.2 After the hash change is triggered, the corresponding callback function is executed
  1. Listen for events when class is instantiated

The History mode

History provides pushState and replaceState methods to record the state of a route

History provides a popState event similar to the Hashchange event, but the popState event is a little different: A POPState event is triggered when a URL is changed forward or backward by the browser. A POPState event is not triggered when a URL is changed via pushState/replaceState or tags. Fortunately, we can intercept calls to pushState/replaceState and tags to detect URL changes, so listening for URL changes is possible, but not as convenient as hashchange.

PushState (state, title, url) and replaceState(state, title, url) both accept the same three arguments:

State: Data that needs to be saved. This data can be retrieved in event.state when the popState event is triggered

Title: title, basically useless, usually pass null

Url: Set the URL for the new history. The origin of the new URL and the current URL must be the same. Otherwise, errors may occur.