What are the three layers of a browser page? What are they? What does it do?

Composition: structure layer, presentation layer, behavior layer;

They are: HTML, CSS, Javascript;

Function: HTML to achieve the page structure, CSS to achieve the page performance and style, Javascript to achieve client functions and business.

Doctype? How to distinguish strict mode from promiscuous mode? What do they mean?

What does Doctype do?

Declare file Type Definitions (DTD)

  • Doctype: the declaration is at the beginning of the document, before the tag begins. Used to tell the browser’s parser what document type specification to use to parse the document.

Strict mode vs. promiscuous mode? Meaning of distinction?

  • Definition:

    • Strict mode (standard mode) : browsers parse according to the ==W3C standard ==;
    • Promiscuous mode: backwards compatible parsing method where the browser == parses the code in its own way.

  • How to distinguish?

    Use the DTD

    • Strict format DTD – Strict schema;
    • Transition DTDS with urls — strict schema, transition DTDS without urls — promiscuous schema;
    • DTD doesn’t exist/misformatted — promiscuous mode; Doctype does not exist or is incorrectly formatted, causing the document to be rendered in promiscuous mode.
    • HTML5 is neither strict nor promiscuous

  • Meaning of distinction?

    Strict mode typesetting and JS runtime modes run to the highest standards supported by browsers. If only strict mode existed, many older sites would not work.

What elements does H5 remove?

  1. Pure presentation elements:
<basefont> <font> <u> <tt> <strike> <center> <big>
Copy the code
  1. The framework sets:
<frame> <frameset> <noframe>
Copy the code

Browser kernel?

  • IE: Trident kernel
  • Firefox: Gecko kernel
  • Safari: WebKit kernel
  • Opera/Chrome: Blink kernel

Cookie, session, localStorage, sessionStorage

The difference between cookie and session:

  1. Cookie data is stored in the client’s browser and session data is stored in the server.
  2. Cookies are not very secure. Others can analyze cookies stored locally and cheat cookies. For security reasons, use sessions;
  3. Sessions are stored on the server for a certain amount of time, and as the number of accesses increases, it takes a lot of performance out of your server. Cookies should be used to reduce server performance;
  4. A single cookie can hold no more than 4K of data, and many browsers limit the number of cookies a site can hold to 20.

Cookie, localStorage, sessionStorage

  1. Life cycle:

    1. Cookie: the invalid time can be set. Otherwise, the browser will be invalid after closing by default.
    2. LocalStorage: permanently saved unless manually cleared;
    3. SessionStorage: valid only in the current web session, cleared after closing the page or browser

  2. Storing data:

    1. Cookie: about 4K;
    2. LocalStorage, sessionStorage: stores 5M of information.

  3. The HTTP request:

    1. Cookie: It is carried in the HTTP request header each time. If too much data is saved using cookies, performance problems may occur.
    2. LocalStorage and sessionStorage: stored only in the client (browser) and do not communicate with the server.

  4. Ease of use:

    1. Cookie: programmers need to package their own, the native cookie interface is not friendly;
    2. LocalStorage, sessionStorage: native interface can be used, can be encapsulated again;

  5. Application Scenarios:

    From the security point of view, because each HTTP request will carry cookie information, which wastes bandwidth, so cookie should be used as little as possible, in addition to cookie also need to specify the scope, can not be called across the domain, a lot of restrictions, but user identification user login, cookie or better than storage, Localstorage can be used to pass parameters in the page. Sessionstorage can be used to store temporary data in case the user loses some parameters after refreshing the page.

LocalStorage, sessionStorage

  1. LocalStorage: localStorage for persistence. Data never expires and is not lost when the browser is closed.
  2. SessionStorage: only pages in the same session can be accessed and the data is destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, only session level storage
⚠️ localStorage: Can only store strings, not other data formats such as JSONCopy the code

HTML semantics?

  • Semantic: The right tags contain the right content, are well structured and easy to read.

  • Semantic tags:

    <header> <nav> <article> <session> <aside> <footer>
Copy the code

  • Semantic meaning:

  1. Easy for users to read, style loss can make the page present a clear structure;
  2. SEO benefits, search engines based on tags to determine the context and the weight of each keyword;
  3. It is convenient for other devices to parse, such as blind readers rendering web pages according to semantics;
  4. It is conducive to development and maintenance, more readable semantics, better maintenance of code, and more harmonious relationship with CSS3.

What is the difference between link and @import?

  • All external imported CSS files are in the following format:

    <link rel="stylesheet" href="xx.css" type="text/css" />
Copy the code
    @import url('xx.css')
Copy the code

  • The difference between:

  1. Link is an XHTML tag that, in addition to loading CSS, can define other transactions such as RSS;

    @import belongs to CSS and can only be used to load CSS.

  2. When a link references CSS, the CSS is loaded at the same time the page loads.

    @import needs to wait until the page is fully loaded before loading the CSS.

  3. Link is an XHTML tag with no compatibility issues.

    @import is a CSS2.1 feature that is not supported by older browsers.

  4. Link supports using JavaScript to control the DOM to change styles;

    @import is not supported.

What does the ‘data’ attribute do?

Data – is added in H5 to provide user-defined attributes for front-end developers. These attribute sets can be obtained by the dataset attribute of the object. Browsers that do not support this attribute can be obtained by the getAttribute method.

Note that: data- attributes that are separated by a hyphen are obtained in a hump style. All major browsers support the data-* attribute. That is, a custom data attribute is a private custom data store for a page or App when there are no suitable attributes or elements.

Browser kernel understanding?

It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine.

  • Rendering engine: Takes the content of a web page (HTML, XML, images, etc.), collates information (such as adding CSS, etc.), calculates how the page should appear, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.
  • Javascript engine: parse and execute javascript to achieve the dynamic effect of web pages. At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

What is the difference between Get and Post in form submission?

  1. Get gets data from the server, and POST sends data to the server.

  2. Get is to add the parameter data queue to the URL indicated by the ACTION attribute of the submitted form. The value corresponds to each field in the form one by one, which can be seen in the URL.

    Post is the HTTP POST mechanism. Each field in the form and its contents are placed in the HTTP header and sent together to the URL address indicated by the Action attribute. Users cannot see this process, so it is secure.

  3. For get, the server uses Request.QueryString to get the value of a variable.

    For POST, the server uses Request.From to retrieve submitted data.

  4. The amount of data transmitted by get is small and cannot be larger than 2KB.

    Post transfers a large amount of data and is generally considered unrestricted by default. In theory, however, the maximum size is 80KB in IIS4 and 100KB in IIS5.

  5. Get has low security and POST has high security.

What is the difference between HTML5 application caching and browser caching?

  • HTML5 introduces application caching, which means web applications can be cached and accessed without an Internet connection.
  • Application caching brings three advantages to applications:
  1. Offline browsing: Users can use applications when they are offline
  2. Speed: Cached resources load faster
  3. Reduce server load: The browser will only download updated or changed resources from the server.

  • Application caching is one of the key features of HTML5. It provides offline functionality that allows applications to retrieve local web content, such as HTML, CSS, images, and JavaScript. This feature can improve site performance and is implemented with the help of the manifest file as follows:

    <! doctypehtml>
<html manifest="example.appcache">.</html>
Copy the code

  • In contrast to traditional browser caching, it does not force the content of the web site visited by the user to be cached.

HTML5 media tags?

  1. audio<audio>
  2. video<video>
  3. Other labels:
  • <embed>Tags define embedded content, such as plug-ins.
  • <source>Useful for defining multiple data sources.
  • <track>Tags specify external text tracks for media such as video elements. Used to specify subtitle files or other files containing text that are visible while the medium is playing.

Why does HTML5 only need to write<! DOCTYPE HTML>

HTML5 is not based on SGML(Standard General Markup Language), so you don’t need to reference DTDS, but you do need DOCTypes to regulate browser behavior.

What are meta tags used for?

Some metadata for machine interpretation. Page search engine optimization, defining page language and so on.

1) Http-equiv property

  • Charset (encoding format)
<! Define the character set of the web document
<meta charset="utf-8" />
Copy the code
  • Expires
  • Refresh (automatic refresh jump within a specified time)
  • Pragma (prevents browsers from accessing page content from the local computer cache no-cache)
  • Windows-target (sets the page to be displayed as a separate page in the window, preventing it from being called as a frame page)
  • Set-cookie (custom cookie)
<! -- Expires Specifies the expiration date of a web page. Once the page expires, it must be downloaded from the server. -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<! Wait a certain amount of time to refresh or jump to another URL. The following 1 represents 1 second -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<! - Prevents the browser from reading the web page from the local cache, meaning that once the browser leaves the web page, it cannot access the page without connecting to the network. -->
<meta http-equiv="pragma" content="no-cache"/>
<! -- Is also a way to set cookies, and can specify expiration time -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<! -- Use the browser version -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<! - for WebApp full-screen mode, hide status bar/sets the status bar color, the value of the content for the default | black | black - translucent -- -- >
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Copy the code
  • Content-type (character set)

2) name + content

  • Keywords (Keywords)
  • Description (Main content)
  • Robots (None is not retrieved)
  • Author, Generator (used authoring software)
  • copyright

3) Common viewport Settings on mobile terminals

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>
<! -- device-height: initial-scale: width (value/device-width) Initial scaling scale (ranging from >0 to 10) minimum-scale: indicates the minimum scaling allowed to the user. Maximum-scale: indicates the maximum scaling allowed to the user. User-scalable: Indicates whether the user can manually scale (no,yes) -->
Copy the code

What’s the difference between SRC and href?

  • Definition (1) href: refers to a hypertext reference to the location of the web resource

    (2) SRC: embed resources in the current document. When requesting SRC resources, the resources pointed to will be downloaded and applied to the document, such as JS scripts, IMG pictures and frame elements. == When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same applies to elements such as images and frames, similar to embedding the resource in the current tag. This is why js scripts are placed at the bottom and not at the top.

  • Href: used to establish a link between the current document and the reference resource. SRC: used to replace the current content

  • When the browser encounters href: it downloads resources in parallel and does not stop processing the current document ==. (This is also why it is recommended to load CSS using link mode instead of @import mode.) (2) When the browser parses to SRC: == it suspends the downloading and processing of other resources until the resource is loaded or executed. ==(This is why the script tag is placed at the bottom and not at the head)

H5 adds an input attribute

<! -- This type requires a well-formed email address -->
<input type=email >
<! Enter the correct URL address -->
<input type=url >
<! -- Request format number, default will have up and down two buttons -->
<input type=number >
<! -- Time series, currently only supported by Opera and Chrome -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<! -- Default placeholder -->
<input type=text placeholder="your message" >
<! -- Default focus attribute -->
<input type=text autofacus="true" >
Copy the code

WEB Standards & W3C understanding

  • WEB standards: A WEB page consists of three main parts: HTML (structure) + CSS (presentation) +JavaScript (behavior)
  • W3C’s understanding: (1) tags closed, tags lowercase, tags do not randomly nested (2) use external chain CSS and JS scripts to achieve the separation of structure performance behavior. (3) Faster file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices. (4) Easy maintenance, convenient revision. (5) Improve website usability.

The understanding of the WebGL

WebGL (Web Graphics Library) is a 3D Graphics standard that allows JavaScript to be combined with OpenGL ES 2.0. Advantages: By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas without any browser plug-in support.

SVG

XML based, scalable vector graphics == developed by W3C.

  • Features: (1) Arbitrary zoom: users can zoom in and out of the image display, without destroying the clarity and details of the image. (2) Text independence: The text in SVG image is independent of the image, and the text remains editable and searchable. There is no font limit, and the user’s system will see exactly the same screen as when they created it, even if a font is not installed. (3) Smaller files: In general, SVG files are much smaller than those in GIF and JPEG formats, and therefore download quickly. (4) Super display effect: SVG images always have clear edges on the screen, and its sharpness is suitable for any screen resolution and print resolution. (5) Super Color control: SVG images provide a palette of 16 million colors with support for ICC Color Description File standards, RGB, Line X fill, gradients and masks. (6) Interactive X and intelligence: One of the main problems SVG faces is how to compete with the vector graphics format Flash, which has occupied an important market share. The other problem is the support level of manufacturers in the local running environment of SVG.
  • Multiple browsers support: Internet Explorer9, Firefox, Chrome, Opera, and Safari all support SVG.

The value + function of hyperlink target

The values role
_blank inA new windowOpen the link in
_self == Default value ==, inSame frame/windowIn the open
_top inThe entire window, which clears all frames
_parent inThe parent frameIn the open
_framename Opens in the specified frame

The role of the Label

The label label defines the relationship between form controls. When the user selects this label, the browser automatically shifts focus to the form control associated with the label.

<label for='Name'>Number:</label>
<input type=" text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>
Copy the code

Note: The value of the for attribute of label must be the same as the corresponding value of the input label ID attribute

Canvas

H5 is a new label for drawing graphics.


: is just a graphics container. You must use scripts (e.g., JS) to draw graphics.

WebSocket implementation and application?

1. What is WebSocket?

WebSocket is a protocol in HTML5 that supports persistent continuities. HTTP does not support persistent connections. Neither Http1.0 nor HTTP1.1 supports persistent links. Keep-alive in HTTP1.1 consolidates multiple HTTP requests into one

2. What protocol is WebSocket? Specific advantages?

The HTTP lifecycle is defined by a Request, i.e., a Request for a Response. In Http1.0, this HTTP Request ends. Improved in Http1.1, there is a connection: keep-alive, that is, multiple requests can be sent and multiple responses received within an Http connection. However, it must be remembered that in Http, a Request can only have one Response, and this Response is passive and cannot be initiated actively.

WebSocket is based on THE Http protocol, or borrows Http protocol to do part of the handshake, in the handshake phase is the same as Http. Let’s look at the implementation of a Websocket handshake protocol, basically two attributes, upgrade, connection.

The basic requirements are as follows:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
Copy the code

The following two attributes are added:

Upgrade:webSocket
Connection:Upgrade
Copy the code

Tells the server to send a Websocket

Sec-WebSocket-Key:x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat``Sec-WebSocket-Version: ``13
Copy the code