IP

IP is classified into five classes: A, B, C, D, and E. It contains 32 binary bits, divided into groups of eight bits to form A decimal number. The first eight binary digits of class A IP address represent the network number, followed by the host. The first 16 binary digits of Class B IP address represent the network number, followed by the host. The first 24 binary digits of Class C IP address represent the network number. So,

A; 1.0.0.0-127.255.255.255 B; 128.0.0.0-191.255.255.255 C; 192.0.0.0-223.255.255.255 D; “- 239.255.255.255 E; 240.0.0.0-254.255.255.255

Class A,B, and C addresses have private IP addresses that cannot be used on the Internet, but only on A LAN. They are 10.0.0.0-10.255.255.255 172.13.0.0-172.31.255.255 192.168.0.0-192.168.255.255

HTTP

multiplexing

HTTP and HTTPS

  • HTTP: the most extensive network protocol, BS model, browser efficiency
  • HTTPS: secure version, encryption over SSL, encrypted transmission, identity authentication, and keys
  1. HTTPS joins the SSL layer with HTTP, encrypts transmission, and authenticates identities
  2. You need to apply for a charging certificate from CA
  3. Secure but time-consuming, caching is not very good
  4. Note It is compatible with HTTP and HTTPS
  5. The port number varies with the connection mode. HTTP is 80 and HTTPS is 443

Html

This is a common property for making scrolling code in javascript

Page visible region wide: document. Body. ClientWidth; High page visible area: the document. The body. ClientHeight;

window.innerHeight; Page visible region wide: document. Body. OffsetWidth (including line width); High page visible area: the document. The body. OffsetHeight (including line width); Page of text in full width: document. Body. ScrollWidth; High page of text in full: document. Body. ScrollHeight; The page is rolled high: document.body.scrolltop; Left: document.body.scrollLeft; Window. ScreenTop; ScreenLeft: window.screenleft; High screen resolution: window.screen.height; Width of screen resolution: window.screen.width;

Screen available workspace height: window. Screen. AvailHeight;

Browser Knowledge

Browser kernel

Trident: Internet Explorer, UC browser (Webkit kernel +Trident kernel), etc. Gecko: cross-platform kernel, Firefox Webkit: Safari Blink: Chrome kernel, Opera

Move the mouse over the button and click

hover-focus-active

How browsers work

  • Process-per-site-instance
  • Process-per-site
  • Process-per-tab
  • Single-process

Browser multi-process

Browsers are multi-process. Tabs of different types start a new process, and tabs of the same type merge into one process

Why is JS single threaded

The single thread of JS is related to its purpose. As a browser script voice, JavaScript’s main purpose is to interact with the user and manipulate the DOM, which determines that it can only be single thread, otherwise it will bring very complex synchronization problems

What does a complete HTTP transaction look like

  • Domain name resolution
  • Initiate a TCP three-way handshake
  • An HTTP request sent after a TCP connection is established
  • The server responds to the HTTP request, and the browser gets the HTML code
  • The browser parses the HTML code and requests resources within the HTML code
  • The browser renders the page to the user

Enter the URL to the page rendering, including the DNS lookup

1. The DNS

  • Find the cache
    • Chrome searches its DNS cache to see if it has an IP address corresponding to the domain name
    • Chrome will search the OPERATING system’s own DNS cache (the browser did not find the cache or the cache has expired)
    • Read local HOST file (not found in OS cache)
  • A system call made by a browser to a DNS (a domain name resolution request made to a local master DNS server, usually provided by a broadband carrier)
    • The broadband carrier server checks whether the local cache has expired
    • An iterative DNS resolution request initiated by the carrier server instead of the browser (what is the IP address of Baidu.com? Search for the DNS IP address of the root domain. Search for the TOP-LEVEL domain IP address of the COM domain. Search for the IP address of the baidu.com domain.

2. A TCP connection

  • SYN: Synchronous Synchronize Sequence number Is the handshake signal used for establishing a TCP/IP connection. Note: SYN attacks, a type of DDoS attacks, take advantage of TCP defects to send a large number of semi-connection requests, consuming CPU and memory resources. SYN attacks can affect hosts as well as routers and firewalls
  • Seq: The Sequence number is 4 bytes
  • Ack: Acknowledge number: 4 bytes in size
  • -Leonard: It’s out of acknowledgement.
  • PSH: push transmission
  • FIN: Finish The procedure is complete
  • RST: reset reset
  • URG: Urgent

3. Send HTTP request URL: Uniform resource Locator (URL) is an abstract and unique method to identify the location of resources. Composition :< protocol >://< host >:< port >/< path > Port and path can be omitted (HTTP default port number is 80) common status code

  • 1XX: Indicating message – indicating that the request has been received and processing continues.
  • 2xx: Success: The request is successfully received, understood, or accepted.
  • 3xx: Redirect – Further action must be taken to complete the request.
  • 4XX: Client error – The request has a syntax error or the request cannot be implemented.
  • 5xx: Server side error — the server failed to fulfill a valid request.

4. The server processes the request and returns an HTTP response packet

5. The browser parses the rendered page

Now that we know how the GUI rendering thread executes, we can optimize the rendering according to its rendering principles:

  • Import CSS files as early as possible, such as in the header.
  • Simplify and optimize CSS selectors to minimize nesting layers.
  • Load resources referenced in CSS files as early as possible, such as custom font files, using the element attribute ‘rel= “preload” as= “font” in the link tag, otherwise rendering will block.
  • Loading js files after DOM and CSS rendering, such as tail-loading, or asynchronously loading js files using the element attributes “defer” and “async”, can be incompatible across browsers.

Reduce and avoid reflux repainting

  • Instead of changing styles item by item, it’s better to change the style once, or define the style as class and update it once
  • Avoid looping around the DOM and keep it offline before modifying it
    • 1. Create a documentFragment, apply all DOM operations to it, and finally add it to window.document
    • 2. Display the DOM node display: None (which triggers a reflow) first, then modify it and display it again
    • 3. Clone a DOM node in memory, modify it, and replace it with the online node
  • Avoid reading properties such as offset multiple times and cache them into variables if you cannot avoid it
  • Locate complex elements absolutely or fixedly out of the document flow, otherwise backflow would be costly
  • Changing the font size can also trigger backflow, so minimize this
  • Table layout, a small change will cause the entire table layout, so use less

Line class element

The commonly used

A, button, input, label, select, textarea, script, span, img b Used to draw the reader's attention to the content of the element (italics) br To generate a newline (carriage return) symbol in the text The optional title attribute provides a full description. Cite (refers to a reference to a work, and must contain the title of the work. This reference may be an abbreviation of the metadata associated with the reference according to the appropriate context convention.) em (marks the content to be supported for emphasis. The content it contains is identified as more important)Copy the code

Not commonly used

Sub (defines a text area that, for typographical reasons, should be displayed lower and smaller than the main text.) Sup (defines a text area that, for typographical reasons, should be displayed higher and smaller than the main text.) The map (\<map> attribute is used with the \<area> attribute to define an image map (a clickable link region).) KBD (the HTML keyboard input element (\< KBD >) is used to represent user input and will produce an inline element that is displayed in the browser's default Monospace font.) Strong (Indicates that the text is very important and is usually shown in bold.) Code (to render a piece of computer code) SAMP (to identify the output of a computer program, usually using the browser's default Monotype font) VAR (to indicate the name of a variable, or a value supplied by the user.) Bdo Object (means to introduce an external resource, which could be an image, an embedded browsing context, or a resource used by a plug-in.) Q (the reference tag (\<q>) represents a closed and short inline reference text. This tag is used to refer to short text, so do not introduce line breaks; For long text references, use \<blockquote\> instead.Copy the code

The tag indicates the emphasis of its content. The < I > tag indicates text that is distinguished from normal prose

Block-level elements

The commonly used

div, form, header, footer, h1-h6, hr, ul, ol, p, section, canvas, aside, dd,dl,
audio, video, table, thead,tbody,tfoot
Copy the code

Not commonly used

Noscript (If the script type on the page is not supported or the script is currently turned off in the browser, then the HTML \<noscript> element defines the replacement content when the script is not executed.) A separate structure in a document, page, application, or website. It is meant to be independently assignable or reusable. For example, in publishing, it may be a forum post, a magazine or news article, a blog, user-submitted comments, an interactive component, Or other independent content items.) Blockquote (indicates that the text in it is a quote. Output (tags indicate the result of a calculation or user action) FieldSet (Group control elements in a form, Include label) figure (representing a separate piece of content, often used with caption \<figcaption> and as a separate reference unit. When it belongs to the main flow, its position is independent of the body. This tag is usually used to refer to images, illustrations, tables, code snippets, etc. in the main text, which will not affect the main text when it is transferred to an appendix or other page. Figure Caption (with? Describe other data in the parent \<figure> element.Copy the code
  <figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
        alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
  </figure>
Copy the code

Difference between SRC and href

The requested resource type is different

Href is short for hypertext reference. It is used to establish a link between the current element and the document. The href is commonly used as link, and the a tag SRC downloads and references the resource to the document

The result of action is different

Href establishes the link between the current document and the reference resource, while SRC replaces the current element

Browsers parse differently

Href refers to the resource, the browser will recognize it as a CSS document, download the resource in parallel, and do not stop processing the current document. When the browser parses the resource to SRC, it will stop processing the other resources, and directly download, edit and execute the resource. The same applies to images and frames. Similar to applying the indicated resource to the current content. This is why it is recommended to put JS scripts at the bottom rather than in the header.

Progressive Enhancement and Graceful degradation

  • Break it down by target client

QuerySelector and getElement selector API

The querySelectorAll() method takes a CSS selector as an argument and returns a NodeList — a class array object containing matching nodes. This method does not return HTML collections, so the returned nodes do not correspond to the real-time document structure, thus avoiding the performance problems caused by HTML collections.

DOM

Use apis that return only element nodes to traverse the DOM, because these apis are more efficient than their own implementations

The property name Substituted attribute
children childNodes
childElementCount childNodes.length
firstElementChild firstChild
lastElementChild lastChild
nextElementSibling nextSibling
previousElementSibling previousSibling
  • For frequent dom operations, you can set the display attribute of the DOM to None. After the operation is complete, change the display attribute to the original one
  • Careful use of: hover (if there is a large number of: hover, it will slow down and increase CPU speed)

Implementation of waterfall flow

  // Set the image width to be the same
  // Count the number of lists based on the browser width and the width of each column. The list defaults to 0
  // When images are loaded, all images are placed below the minimum number of columns at one time
  // The height of the parent container is the maximum size of the list array

  function fall() {
      const minGap = 20
      const itemWidth = 100
      const scrollBarWidth = getScrollbarWidth()
      const pageWidth = window.innerWidth - scrollBarWidth
      const column = Math.floor(pageWidth / (itemWidth + minGap))
      const gap = (pageWidth - itemWidth * column) / column / 2 // True spacing

      const items = document.querySelectorAll('.item')


      console.log('scrokkBarWidth', items);

      const heightArr = []

      function getScrollbarWidth() {
          const oDiv = document.createElement('div')

          oDiv.style.cssText = `width:50px; height:50px; overflow:scroll; background:red; `

          document.body.appendChild(oDiv);

          const scrollBarWidth = oDiv.offsetWidth - oDiv.clientWidth;

          oDiv.remove();

          return scrollBarWidth;
      }

      for (let i = 0, len = items.length; i < len; i++) {
          const height = items[i].offsetHeight;

          if (i < column) {
              items[i].style.cssText = `top:${gap}px; left:${(itemWidth + gap) * i +gap}px`

              heightArr.push(height);
          } else {
              let minHeight = heightArr[0];

              let minIndex = 0;
              for (let j = 0, jLen = heightArr.length; j < jLen; j++) {
                  if (minHeight > heightArr[j]) {
                      minHeight = heightArr[j]
                      minIndex = j;
                  }
              }

              items[i].style = `top:${minHeight+gap *2}px; left:${(itemWidth+gap) * minIndex + gap}px`heightArr[minIndex] = minHeight + gap + height; }}}// call once the page is loaded.
  window.onload = fall;
  // The page size changes and is called again.
  window.onresize = fall;
Copy the code