Front-end knowledge framework

html

1. Semantic HTML

  • With the introduction of H5, there are many new semantic tags, such as header, footer, nav, article, etc., that clearly explain the meaning of the current content to the browser or developer.

    • Easy for developers to read the code, clear code structure
    • It is conducive to Seo’s understanding of data when spiders crawl data

2. Meta tags

  • Meta tags are defined by the name and Content attributes to describe the meta information of an HTML web document, such as author, date and time, page description, keywords, page refresh, etc. In addition to some HTTP standards that specify a name as a common name, developers can also customize the name

3. Front-end data storage

Interviewer: What kinds of data storage are available on the front end? (Basic questions)

The main storage methods include Cookie, LocalStorage, SessionStorage, IndexedDB, and WebSQL. Their advantages and disadvantages are as follows:

  • Cookies: The primary method of local storage prior to the HTML5 standard

    • The advantage is that the compatibility is good, and the cookie in the request header is convenient to interact with the server
    • The disadvantage is that the size is only 4K, the request header carries cookies waste traffic, each domain is limited to 20 cookies, JS cannot operate directly, need to self-encapsulation

  • LocalStorage: a standard data storage mode based on key-value pairs

    • Advantages are easy to operate, permanent storage (unless manually deleted), size of 5M
    • The disadvantage is compatibility with IE8+

  • SessionStorage: similar to localStorage, except ** SessionStorage will be cleaned up when the page is closed

    • The advantage is that session-level storage and fetch, does not occupy local space, convenient operation
    • The disadvantage is that it cannot be shared in all same-origin Windows. It is a sessional storage mode compatible with IE8+

  • IndexedDB: A NoSQL database that is officially incorporated into the HTML5 standard. It is stored in key-value pairs for quick reads

    • Advantages are larger storage capacity, very suitable for Web scenarios, while supporting JS operations, very convenient
    • The disadvantage is compatibility with IE8+

  • WebSQL: Similar to SQLite, is a real relational database, with SQL operations

    • Advantage is the relational database, suitable for large offline Web applications
    • The disadvantage is that JS needs to passtransactionOperating SQL is not supported by Firefox

4. Script async differs from defer

When the browser parses THE HTML, it will stop parsing the script tag. It will download and execute the JS file first, and then continue parsing. Therefore, if the tag comes before the HTML, it will affect the HTML parsing and bring bad experience to the user.

  • Defer: When the DOM is loaded, the DOMContentLoaded event will be executed. If the tag of defer is not loaded or executed, it will be postponed and triggered until the tag of defer is loaded and executed. This is equivalent to placing the Script tags at the bottom of the HTML document, and defer executes in the order in which the script tags appear

  • Async: Async is executed immediately after loading, so the order of JS execution is likely to be different from the order of tag occurrence (all scripts created by JS are loaded with Async by default).

  • Ps:

    • Both allow script tags to load asynchronously without blocking DOM parsing
    • And does not work with inline JS scripts ()
    • Document.write cannot be used in scripts
    • Both will block the onLoad event (onLoad means that all dependent resource loads have finished executing)
    • Defer blocks the DOMContentLoaded event and async does not block (DOMContentLoaded: execute this event when the DOM resource has been downloaded and parsed, and CSS images and other resources may not have finished loading)
    • Defer appears at the same time as Async, which has a higher priority, unless the browser is incompatible with Async, then defer prevails.

5. Block-level elements and inline elements

Block-level elements

Each block-level element usually has one or more rows to itself, and you can set its height, width, and alignment attributes separately.

Common block-level elements are: < H1 >~<h6>,< P >,<div>,<ul>,< OL >,<li>, etc

  • Characteristics of block-level elements

    • Block-level elements have an exclusive row
    • Height, line height, margins, and margins can all be set separately
    • The default width is 100% of the container
    • Can hold inline elements and other block-level elements

Inline elements

Inline elements: Do not occupy a separate area, but rely solely on their font size or image size to support the structure. Generally, you cannot set width, height, and alignment.

Common inline elements are: <a>,<strong>,<b>,<em>,<del>,<span>, etc

  • Characteristics of inline elements:

    • On a row with adjacent inline elements
    • Height and width are invalid, but horizontal padding and margin can be set, and vertical padding is invalid
    • The default width is its own width
    • Inline elements can only contain plain text or other inline elements (except the A tag)

Inline block-level elements

There are several special tags in the inline element,< img/>,<input/>, and < TD />, whose width and height and alignment attributes can be set

  • Characteristics of inline block-level elements:

    • On a line with adjacent inline elements (inline blocks), but with a space between them
    • The default width is the width of the content itself
    • Height, line height, padding and margins can all be set

transformation

  • Block inline: display-inline;
  • Inline block: display: block;
  • Block, the inline element converts to the inline block: display: inline-block

css

1. CSS selector priority

onClick

2. The flex layout

Nguyen half-stretching

3. Classic CSS problems

Two column layout and three column layout

CSS- Horizontal center, vertical center, and horizontal vertical center

4. bfc

bfc

5. Browser Repaint and Reflow

Backflow will certainly cause repainting, and repainting will not necessarily cause backflow.

When a change in the style of an element on a page does not affect its position in the document flow (e.g., color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it. This process is called Repaint.

The process by which the browser rerenders part or all of the document when the size, structure, or properties of some or all elements in the Render Tree change is called Reflow. Operations that cause backflow:

  • Page first render
  • The browser window size changed. Procedure
  • The size or position of the element changes. The content of the element changes (the number of words or the size of images, etc.).
  • Element font size changes
  • Add or remove visible DOM elements
  • Activate CSS pseudo-classes (such as hover)
  • Query some properties or call some methods

js

1. Time loops, macro tasks, micro tasks

react

Talk briefly about the react event mechanism

  • React does not bind the Click time to the DOM when the user adds functions for onClick.

  • Instead, it listens for all supported events at document, and when the event happens and bubbles up to document, React encapsulates the event content into a middle layer called SyntheticEvent.

  • So when an event is triggered, the function is specified to execute using the uniform dispatch function dispatchEvent.

vue

The browser