This is the fourth day of my participation in the August Text Challenge.More challenges in August

What is event agent

  • Event proxy, also known as event delegate, is a common technique used in JavaScript to bind events.

‘Event broker’ is the practice of delegating events that would otherwise be bound to a parent element, which then acts as an event listener.

The event broker principle is the bubbling event of DOM elements, and the benefit of using the event broker is to improve performance

  • It can save memory footprint and reduce event registration
  • You can add a child object without binding it again

What does the new operator do

  • Create an empty object: and the this variable imports the object and inherits the function’s prototype

var obj=new Object();

  • Sets the empty object of the stereotype chain to point to the stereotype object of the constructor

obj.__proto__= Func.prototype;

  • The constructor this pointer points to an empty object and executes the function body

var result =Func.call(obj);

  • Determine the return value and use the returned object. If not, create an object
 if (typeof(result) == "object")
  func=result;
 else
    func=obj;
Copy the code

Third, the front end needs to pay attention to what SEO

1. Fair useTitle, description, keywords
  • titleValue to emphasize the main point, do not repeat
  • descriptionOutline the page height and length
  • keywordsList important keywords
2. Semantic HTML code (important percentage)
  • Conforming to W3C specifications, semantic code makes web pages easier for search engines to understand
3. HTML code for important content comes first
  • The search engine crawls from top to bottom, ensuring that the search engine crawls first
4. Do not use JS output for important content
  • Crawlers don’t execute JS to get content
5. Use the iframe less
  • Search engines do not crawl the contents of an IFrame
6. Alt must be added to non-decorative pictures (see Question 4)
7. Speed up your website
  • Site speed is also an important index of search engine sorting
4, <img> title and Alt difference
  • Alt is used to describe the current object when the image cannot be displayed (helpful for SEO optimization)
  • Title is the title of the image and displays the description when the mouse moves over the pause

Step 5 enter the URL from the browser address bar to display the page

1. Convert the domain name to a public IP address.
  • The DNS service resolves the domain name to an Ip address. If the DOMAIN name cannot be found on the UPPER-level DNS server, the DNS sends a query request to the upper-level DNS server. Up to the root DNS server. If the corresponding public Ip address is found, an error message is displayed, indicating that domain name resolution fails.
2. Route to the corresponding server through the huge Internet based on the public IP address.
  • After obtaining the public IP address, you can use the router to locate the server.
3. Establish a reliable TCP data connection.
  • Before using the TCP protocol, set up a data link between the client and server. There are three steps, also known as the TCP three-way handshake.
4. The server processes and distributes the request in the URL and returns an HTML.
  • The client distributes and processes the information carried by the URL. Dispatch the corresponding URL format to different background processing Java classes, and then return the corresponding HTML file to the client after data processing
5. The browser or client renders the HTML.
  • Web pages are mostly dynamic HTML. It contains a lot of JS code. In order to load a page as quickly as possible, browsers generally use the principle of loading while parsing.
Six, semantic understanding
  • You can remove or discard styles and still have a clear deconstruction of the page.
  • Good for SEO, and search engines to establish good communication, help crawlers to capture more effective information.
  • It is convenient for other devices to parse.
  • It is easier for the team to develop and maintain, and semantic tags are more readable. All follow this standard, which can reduce differentiation.

What is the difference between Canvas and SVG

Canvas
  • It’s a new label for H5
  • Canvas, which uses JavaScript to draw images on web pages (and therefore cannot be captured by the engine)
  • Using the drawing tool. GetContext (” 2D “) draws the graph on the canvas
SVG
  • It is Scalable Vector Graphics, based on extensible markup language XML, and is older
  • It is used to define vector-based graphics for the grid
The difference between the two
  • SVG can be drawn directly in H5, but it is a vector graph
  • Canvas’s tool getContext draws graphics or incoming images depending on resolution. It can save and store images in.png and.jpg formats, which can be said to be bitmaps
  • Canvas does not support event handlers, SVG does

What are the advantages and disadvantages of CSS Sprite

  • CSS Sprites is a web image application processing method (Sprite), is to integrate some background images in the web page into a picture file, and then use CSS “background-image”, “background-repeat”, The combination of “background-position” is used for background positioning.
  • advantages
    1. Reduce HTTP requests for web pages and improve page loading speed
    2. Reduce image bytes: The number of bytes combined into one image is less than the total number of images
    3. Reduced naming hassles: you only need to name the image of a collection, not every small element to improve production efficiency
    4. Change the style is convenient: only need to modify the color or style of the picture on one or a few pictures, the style of the whole web page can be changed, maintenance is more convenient.
  • disadvantages
    1. Background setting requires the exact location of each background unit
    2. Maintenance of composite image is troublesome, if the page background changes a little, the whole composite image should be changed
    3. When combining images, you need to reserve enough space. If the image is not wide enough, the background may break easily

What is FOUC and how to avoid it

  • The FOUC (Flash of Unstyled Content) document style temporarily fails
  • The reason:
    1. Import the stylesheet using the import method
    2. The style sheet is placed at the bottom of the page
    3. Several stylesheets are placed in different places of the HTML structure
  • Workaround: Use the Link tag to place the stylesheet in the document head

The difference between link and @import

  • Both are external references to CSS, but there are some differences
    1. Link can also reference resource files such as images (@import can only reference style files)
    2. When link references CSS, it is loaded at the same time the page is loaded (@import is loaded only after the page is fully loaded)
    3. Link is an HTML tag, incompatibility problem (@import is proposed by CSS2.1, not supported by earlier browsers)
    4. Link supports JavaScript manipulation of the DOM to change styles (@import is not supported)

Xi. Understanding of BFC specifications

  • This is called a block-level formatting context
  • Conditions for the formation of BFC
    1. Float: Adds a float to an element (left, right)
    2. Position: Add a position to the element (Absolute, fixed)
    3. Display: Add display (inline-block, table-cells, table-captions) to the element
    4. Overflow: Add overflow (hidden, auto, Scroll) to elements