Front-end Interview questions (Html5+http+web)

HTML (5) 1. A brief introduction to the new features of HTML5

First of all, HTML5 to better practice the semantics of the Web, add the header, footer, Nav, aside, article, section, and other semantic tags.

On the table, in order to enhance the form, add color, email, date, range and other types to input,

Provides Sessionstorage, localstorage, and offline storage for storage, which facilitates the storage and acquisition of data in the client,

Audio and video elements are specified in the multimedia vedio;

There are also geo-positioning, canvas canvas, drag-and-drop, multithreaded programming web workers and WebSocket protocols

2. What are block-level elements and inline elements?

Block-level elements have Div, section, header, footer, aside, nav, article, etc. representing the layout class,

List class ul Li, ol and the Like, form, p, table,

Title H1~h6

Inline elements: A, span, button, input, select, textarea, I, EM, strong

What are the storage scenarios for 3.HTML5?

HTML5 provides Sessionstorage, localstorage, and offline storage as a new storage solution where both sessionstorage and localstorage are stored in key-value pairs, both through SetItem, GetItem, RemoveItem to achieve additions and deletions to check and change,

Sessionstorage is a session store, which means that sessionstorage is automatically emptied when the browser is closed.

And Localstorage not, it does not have the time limit.

Offline storage is the application cache, which is often used to ensure that Web applications can be used offline, by declaring the files that need to be cached by the attribute manifest in the HTML tag, the value of which is a file containing the file name of the files that need to be cached. The cache file declared by this manifest file can be cached by the client after initial loading, and can be updated by updating the manifest file to achieve the purpose of updating the cache file.

What are the common settings for 4.viewport?

Viewport often used in responsive development and mobile web development, viewport as the name implies is used to set the viewport, mainly to specify the width of the viewport, the initial zoom value of the viewport, the minimum zoom value of the viewport, the maximum zoom value of the viewport, whether the user is allowed to zoom, and so on. A common viewport setting is as follows:

<name= "Viewport"  content= "initial-scale=1,maximum-scale=1, User-scalable=no,width=device-width "/>

At the same time, the purpose of setting width and Initial-scale is to solve the situation of iphone, ipad and IE, because the two values will be larger when they exist simultaneously.

5. Enter the URL from the browser address bar to display the page (for example, HTTP)

1. Enter the URL in the browser address bar

2. Browser view cache, if request resource in cache and fresh, jump to transcoding step

3. Browser parsing URL Get protocol, host, port, path

4. The browser assembles an HTTP (GET) Request message

5. The browser obtains the host IP address, the process is as follows:

6. Open a socket with the destination IP address, the port establishes the TCP link, three times the handshake is as follows

7.TCP send HTTP request after link establishment

8. The server checks if the HTTP request header contains cache validation information if the validation cache is fresh and returns a corresponding status code of 304

9. The server sends the response message back to the browser via a TCP connection

10. The browser receives the HTTP response and then chooses to close the TCP connection or preserve reuse as appropriate.

11. Browser Check the response status: Whether it is 1xx,3xx, 4XX, 5XX, these cases are different from 2XX

12. If the resource is cacheable, cache

13. Decode the response (e.g. gzip compression)

14. Decide what to do with the resource type (assuming the resource is an HTML document)

15. Parse HTML document, Component DOM tree, download resources, construct Cssom tree, execute JS script, these operations are not in strict order, the following are explained separately

2. Building the DOM tree:
   1. Tokenizing: Parsing character streams to tags according to HTML specification
   2. Lexing: Lexical analysis transforms tokens into objects and defines properties and rules
   3. Dom Construction: Composing objects into a DOM tree based on HTML markup relationships
4. The parsing process encountered pictures, style sheets, JS files, start the download
6. Build the Cssom tree:
   1. Tokenizing: Character stream conversion to marker flow
   2. Node: Creating nodes based on tags
   3. CSSOM: node Creation CSSOM tree
8. Build a render tree from the DOM tree and Cssom tree:
   1. All visible nodes are traversed from the root node of the DOM tree, and Invisible nodes include: 1 script , meta so that they are not visible in the label itself. 2) nodes that are hidden by CSS, such asdisplay: none
   2. For each visible node, find the appropriate Cssom rule and apply
   3. Publish content and calculation styles for visual nodes
10. JS parsing is as follows:
    1. The browser creates the document object and parses the HTML, adding the parsed elements and text nodes to the documents, at which point the document.readystate is loading
    2. When an HTML parser encounters a script that does not have async and defer, they are added to the document, and then the inline or external script is executed. These scripts are executed synchronously, and the parser pauses when the script is downloaded and executed. This allows the text to be inserted into the input stream using document.write (). Synchronization scripts often simply define functions and register event handlers, and they can traverse and manipulate script and the contents of their previous documents
    3. When the parser encounters a script with the async attribute set, it starts downloading the scripts and continues to parse the document. The script executes as soon as it is downloaded, but the parser does not stop waiting for it to be downloaded. Asynchronous scripts prohibit the use of document.write (), which can access their script and previous document elements
    4. When the document finishes parsing, Document.readstate becomes interactive
    5. All defer scripts are executed in the order in which they appear, deferred scripts can access the full document tree, and document.write () is not allowed
    6. The browser triggers the Domcontentloaded event on the Document object
    7. When the document is fully parsed, the browser may still be waiting for the content to load, and so on, when the content is loaded and all asynchronous scripts are loaded and executed, document.readstate changes to Complete,window trigger the Load event
12. Display pages (pages are displayed progressively during HTML parsing)

6. How to optimize the website performance

• Content aspects

  1. Reduce HTTP requests: Merge files, css sprites, inline Image
  2. Reduce DNS queries: The browser cannot download any files from this host until the DNS query is complete. Method: DNS caching, distributing resources to the appropriate number of hostnames, balancing parallel downloads and DNS queries
  3. Avoid redirection: Redundant intermediate access
  4. To make Ajax cacheable
  5. Non-mandatory component delay loading
  6. Pre-loading of required components in the future
  7. Reduce the number of DOM elements
  8. Put resources under different domains: the number of browsers downloading resources from one domain is limited, and increasing the domain can increase concurrent downloads
  9. Reduce the number of IFRAME
  10. No, 404.

• Server aspects

  1. Using CDN
  2. Add expires or Cache-control response headers
  3. Using gzip compression for components
  4. Configuring the ETag
  5. Flush Buffer Early
  6. Ajax uses get for requests
  7. Avoid an img tag for empty src

• Cookie aspect

  1. Reduce cookie Size
  2. The domain name that introduces the resource does not contain cookies

• CSS aspects

  1. Place a style sheet at the top of the page
  2. Do not use CSS expressions
  3. Use not using @import
  4. Filter that does not use IE

• JavaScript aspect

  1. Put the script at the bottom of the page
  2. Introducing JavaScript and CSS from the outside
  3. compressing JavaScript and CSS
  4. Delete unwanted scripts
  5. Reduce DOM Access
  6. Properly design event listeners

• Picture aspect

  1. Optimize Picture: Choose color depth and compression according to actual color
  2. Optimizing CSS Sprites
  3. Do not stretch the picture in HTML
  4. Guaranteed Favicon.ico is small and cacheable

• Mobile aspects

  1. Guaranteed component less than 25k
  2. Pack components into a Multipart Document

7. What is progressive enhancement

Progressive enhancement refers to the emphasis on accessibility, semantic HTML tags, external style sheets, and scripts in web design. Ensure that everyone has access to the basic content and functionality of the page while providing a better user experience for advanced browsers and high-bandwidth users. The core principles are as follows:

• All browsers must have access to basic content
• All browsers must be able to use basic features
• All content is included in the semantic tag
• Provides enhanced layout through external CSS
• Provides enhanced functionality through non-intrusive, external javascript
• End-User Web browser preferences is respected

8.HTTP status codes and their meanings

• 1XX: Information Status code
  • Continue: The client should continue to send the request. This temporary response is used to inform the client that some of its requests have been received by the server and are still not rejected. The client should continue to send the remainder of the request, or ignore the response if the request has been completed. The server must send a final response to the client on request Wan Yu
  • 101 Switching protocols: The server has been understanding the client's request and will notify the client through the upgrade message header to use a different protocol to complete the request. After the last empty line of the response is sent, the server switches to those protocols defined in the upgrade message header.
• 2XX: Success Status Code
  • OK: The request is successful and the desired response header or data body will be returned with this response
  • 201 Created:
  • 202 Accepted:
  • 203 non-authoritative Information:
  • 204 No Content:
  • 205 Reset Content:
  • 206 Partial Content:
• 3XX: redirect
  • Multiple Choices:
  • 301 Moved Permanently:
  • 302 Found:
  • 303 See other:
  • 304 Not Modified:
  • 305 Use Proxy:
  • 306 (Unused):
  • 307 Temporary Redirect:
• 4XX: Client Error
  • Request:
  • 401 Unauthorized:
  • 402 Payment Required:
  • 403 Forbidden:
  • 404 Not Found:
  • 405 Method not allowed:
  • 406 Not acceptable:
  • 407 Proxy Authentication Required:
  • 408 Request Timeout:
  • 409 Conflict:
  • 410 Gone:
  • 411 Length Required:
  • 412 Precondition Failed:
  • 413 Request Entity Too Large:
  • 414 Request-uri Too Long:
  • 415 Unsupported Media Type:
  • 416 Requested Range not satisfiable:
  • 417 Expectation Failed:
• 5XX: Server Error
  • $ Internal Server Error:
  • 501 Not implemented:
  • 502 Bad Gateway:
  • 503 Service Unavailable:
  • 504 Gateway Timeout:
  • 505 HTTP Version not supported:

Front-end Interview questions (Html5+http+web)