What’s new in HTML5?

Answer:

(1) HTML4 provides three declaration modes: strict mode, transition mode and frameset mode; Html5, since it’s not a subset of SGML, is just fine;

(2) Better semantic content labels. The header/footer/article/nav/section, etc.

(3) Audio and video API(Audio, video);

(4) Form controls: Html5 has several new form input types that provide better input control and validation.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

(5) 5 APIS – localStorage for local cache and long-term data storage, and sessionStorage for temporary storage, which will be automatically deleted after the browser is closed.

  • The local cache, localStorage and sessionStorage.
  • The canvas (canvas), canvas, the figure, figcaption.
  • Ge0location. The Ge0Location API allows users to provide their location to Web applications, requesting permission before reporting their location for privacy reasons.
  • Drag and release. The HTML drag and drop interface enables applications to enable drag and drop within the browser.
  • Web Workers, webworker, websocket, geolocation. When executing a script on an HTML page, the state of the page is unresponsive until the script is complete. Web workers are JavaScript running in the background, independent of other scripts, without affecting page performance, and you can continue to do whatever you like; Click, select content, etc., while the Web worker is running in the background.

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

Answer:

** Strict mode: ** also known as standard mode, which means that the browser parses code according to W3C standards.

** Promiscuous mode: ** also known as weird mode or compatibility mode, this means that the browser parses code in its own way.

** How to tell the difference: ** Whether browsers parse in strict or promiscuous mode is directly related to the DTD in your web page.

1. If a document contains a strict DOCTYPE, it is typically rendered in strict mode. 2. Doctypes that contain transitional DTDS and URIs are also rendered in strict mode, but having a transitional DTD without a URI (uniform Resource Identifier, which declares the last address) results in pages rendered in promiscuous mode. (Transitional DTDS with URIs — strict schemas; 3. Non-existent or incorrectly formed docTypes cause documents to be rendered in promiscuous mode. 4. HTML5 does not have a DTD, so there is no distinction between strict mode and promiscuous mode. HTML5 has a relatively loose syntax and is implemented with as much backward compatibility as possible. (HTML5 is neither strict nor promiscuous)

** Meaning: ** The meaning of strict mode and promiscuous mode is closely related to its origin. If only strict mode exists, then many old websites will be affected, if only promiscuous mode exists, then it will be back to the chaos of the browser wars, each browser has its own parsing mode.

How to implement communication between multiple tabs in the browser?

The first — call localStorage

Add (modify, delete) content in a TAB using localstorage.setitem (key,value); Listen for storage events in another TAB. You can obtain the value stored in localStorge to communicate between different tabs.

TAB Page 1:

<input id="name"> <input type="button" id=" BTN "value=" submit "> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); }); }); </script>Copy the code

TAB Page 2:

<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>  
Copy the code

Second — call cookie+setInterval()

The information to be transmitted is stored in the cookie, and the cookie information can be read at certain intervals to obtain the information to be transmitted at any time.

Page 1

<input id="name"> <input type="button" id=" BTN "value=" submit "> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); document.cookie="name="+name; }); }); </script>Copy the code

Page 2

<script type="text/javascript"> $(function(){ function getCookie(key) { return JSON.parse("{\"" + document.cookie.replace(/; \s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; } setInterval(function(){ console.log("name=" + getCookie("name")); }, 10000); }); </script>Copy the code

What are the inline elements? What are block-level elements? What are the void elements? What is the difference between a row element and a block element?

Answer:

The line elements are: A B SPAN IMG input select strong

Block level elements are: div ul OL Li DL dt DD H1 H2 H3 H4… p

Empty element: ‘


The difference between:

  • The width and height of elements in a row cannot be set
  • Block-level elements can be set to a width and height that is exclusive to a row

What is the difference between SRC and href?

Answer:

SRC is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.

  • SRC, short for source, refers to the location of an external resource, which will be embedded in the document at the current tag location. SRC resources are downloaded and applied to documents when requested, such as JAVASCRIPT scripts, IMG images, and frame elements. When the browser parses the element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as images and frames, similar to embedding the pointed resource in the current tag. Is that why you put js scripts at the bottom and not at the head
  • hrefisHypertext Reference“, which refers to the location of the web resource, and establishes a link between the current element (anchor) or the current document (link), which the browser will recognize as”cssFile, the resource will be downloaded in parallel andDon’tStops processing of the current document. That’s why it’s recommendedlinkMethod to loadcssInstead of using@importway

What is the difference between cookies, sessionStorage and localStorage?

LocalStorage localStorage and cookie difference

1) Cookie transmits sessionStorage and localStorage back and forth between the browser and server, and will not send data to the server. It is only stored locally

SessionStorage: Only valid before the current browser window is closed. LocalStorage is always valid and stored for a long time

3) Cookie data and the concept of path, can limit the cookie only belongs to a path under different storage sizes, cookie data can not exceed 4K, although sessionStorage and localStorage also have storage size limits, but much larger than cookies, It can be 5M or larger

4) Scope does not

SessionStorage is not shared between different browser Windows

LocalStorage is shared in all origin Windows

Cookies are also shared across all the same origin Windows

WebStorage supports event notification to notify listeners of data updates. The API interface of Web Storage is easier to use

Cookie, Session, and localStorage

1) The content of cookie mainly includes name, value, expiration time, path and domain. The path and domain together constitute the scope of cookie. If the time is not set, it indicates that the lifetime of the cookie is during the browser session, and the cookie will disappear after the browser window is closed. The cookie with the lifetime of the browser session is called session cookie

2) Session cookies are generally stored in memory rather than hard disk. Of course, this behavior is not regulated by the specification. If you set the expiration time, the browser saves cookies to hard disk, closes the browser and opens the browser again and these cookies remain valid until the expiration time is exceeded. For cookies stored in memory, different browsers have different session mechanisms.

3) When the program needs to create a session for a client request, the server first checks whether the client request contains a session identifier (called the session ID). If it does, it indicates that a session has been created for the client before. If the client request does not contain the session ID, create a session for the client and generate a session ID associated with this session. The value of the session ID should be a string that is neither duplicated nor easily found to be faked. The session ID will be returned to the client for storage in this response. The session ID can be stored in a cookie so that the browser automatically sends the id to the server during the interaction.

The difference between cookies and sessions

1) Cookie data is stored on the client’s browser, and session data is stored on the server

2) Cookies are not very secure. Others can analyze cookies stored locally and cheat cookies. For security, session should be used

3) The session will be stored on the server for a certain period of time. When the number of accesses increases, the performance of your server will be occupied. In order to reduce the performance of the server, you should use cookies

4) The number * data saved by a single cookie cannot exceed 4K. Many browsers limit the maximum number of cookies saved by a site to 20

5) It is recommended to store important information such as login information as session, and other information can be stored in cookies if necessary. 6) The session is stored on the server, and the client does not know the confidence of the session. The cookie is stored on the client and the server can know the information in it

7) Session stores objects and cookie stores strings

8) Session cannot distinguish paths. During the same user’s visit to a website, all sessions can be accessed anywhere. However, if the path parameter is set in cookies, cookies under different paths in the same website cannot be accessed to each other

Difference between Web Storage and cookies

1) The concept of Web Storage is similar to cookie, the difference is that it is designed for larger Storage capacity, cookie size is limited, and each time a request for a new page when cookie will be sent in the past, so virtually waste of bandwidth, in addition to cookie also need to specify the scope, not cross-domain call

2) with setItem web storage, the getItem, removeItem, methods of the clear, don’t like cookies need encapsulation setCookie front-end developer himself, getCookie

3) But cookie is also indispensable, the role of cookie is to interact with the server, as part of the HTTP specification exists, and Web Storage is only in order to “store” data in the local

SessionStorage, localStorage and cookie are all data stored in the browser side, among which the concept of sessionStorage is very special, introducing a “browser window” concept, sessionStorage is in the same classmate, always exist data, In other words, as long as the browser window is not closed, even if the page is refreshed or enter the same page, the data will still exist, after closing the window, the sessionStorage will be destroyed, at the same time, “independent” opened different Windows, even the same page, the sessionStorage object is also different

4) The benefits of Web Storage to reduce network traffic: once the data saved in the local, you can avoid to the server to request data, so reduce unnecessary data requests, reduce the data between the browser and the server unnecessary back and forth transfer of fast display data: Good performance, read data from the local than the network from the server much faster, local data can be obtained in time, coupled with the web page itself can also have a cache, so the entire page and data are in the local, can immediately display temporary storage: SessionStorage is very convenient in many cases where the data is only used during the user’s browsing of a set of pages and then discarded after the window is closed

Differences between browser local storage and server side storage

1) Data can be stored locally in the browser or on the server side

2) The browser can save some data, when needed directly from the local access, sessionStorage, localStorage and cookies are stored by the browser in the local data

3) The server can also save all the data of all users, but the browser needs to request data from the server when needed

4) The server side can save the user’s persistent data, such as database and cloud storage will save a large amount of user data on the server side, the server side can also save the user’s temporary session data, the server side session mechanism, such as JSP session object, data stored on the server

5) The server only needs to transmit the session ID between the browser and the server. The server finds the corresponding user’s session object according to the session ID. The session data is only valid for a period of time, which is the session validity period set by the server

6) server saves all the user’s data, so the overhead on the server, while the browser to save the different users need to each of the data are stored in the users of the browser, the browser normally just to store the data, rather than the service can store large data or some small data server storage data security, browser is only suitable for storing data in general

SessionStorage, localStorage and cookie difference

1) The similarities are that they are both saved in the browser and of the same origin

2) Cookie data is always carried in same-origin HTTP requests (even if it is not needed), i.e. cookies are passed back and forth between the browser and the server, while sessionStorage and localStorage do not automatically send data to the server and only keep it locally. Cookie data also has the concept of path, which can restrict cookies to a specific path

3) The storage size is also different, cookie data cannot exceed 4K, and because each HTTP request carries cookies, cookies are only suitable for saving very small data, such as session identification. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more

4) Different data validity period, sessionStorage: only valid before the current browser window closes; LocalStorage: always valid, saved even when the window or browser is closed and therefore used as persistent data; Cookie: Only valid before the set cookie expiration time, even if the window is closed or the browser is closed

5) Different scope, sessionStorage is not shared in different browser Windows, even the same page; Localstorage is shared in all origin Windows; Cookies are also shared across all the same origin Windows

6) Web Storage supports event notification mechanism, which can send the notification of data update to the listener

7) The API of Web Storage is more convenient to use

SessionStorage and page JS data objects

1) The lifetime of the general JS object in the page is only valid in the current page, so the data does not exist in the case of reloading the page, such as refreshing the page or going to another page

2) sessionStorage as long as the same-origin window, refresh the page or enter different pages of the same origin, data will always exist, that is to say, as long as the browser is not closed, data will still exist

How does HTML5 offline storage work?

How it works: HTML5 offline storage is based on the caching mechanism (not the storage technology) of a newly created.AppCache file, which stores resources offline through parsed lists that are stored like cookies. Later, when the network is offline, the browser displays the data stored offline.

How to use: 1. Add a manifest attribute to the page header as follows. 2. Write offline storage resources in the cache.manifest file; CACHE MANIFEST #v0.11 CACHE: js/app.js CSS /style. CSS NETWORK: resourse/logo.png FALLBACK: / /offline. HTML 3. In offline state, operate window.applicationCache to implement requirements.

How to deal with 1px rendering 2px on mobile?

For compatibility issues, an element has a 1px border or 1px outline by default. Set the base attributes of each element border and outline to 0.

How does the browser render the page?

1. Parse the document to build a DOM tree

Browser parsing can be broken down into three parts:

  • HTML/XHTML/SVG: Parsing these three files generates a DOM Tree.
  • CSS: Parse stylesheets to generate CSS Rule trees
  • JavaScript: Parses scripts and interacts with users by manipulating the DOM Tree and CSS Rule Tree through the DOM API and CSSOM API.

The execution order of the above three types of files will vary depending on their position in the document and their tag attributes, which will be discussed later.

2. Build the render tree

After the document is parsed, the browser engine attaches the CSS Rule Tree to the DOM Tree and creates the Rendering Tree based on the DOM Tree and CSS Rule Tree. Note here:

  • The difference between Render Tree and DOM Tree is that things like Head or display: node are not placed in the Render Tree;
  • Matching CSS Rule trees to DOM trees requires parsing CSS selectors. To improve the performance of this process, DOM trees should be kept as small as possible, and CSS selectors should use ids and classes as much as possible to avoid excessive layering.

3. Layout and rendering tree

Parse position, overflow, Z-index, etc., and calculate the position and size of each render tree node. This process is called reflow. Finally, the Native GUI API of the operating system is called to complete the drawing (Repain). Note:

  • Render tree nodes, called frames in Gecko and Renderer in WebKit;
  • Reflow and Repaint are two different concepts, and the differences will be discussed later.

Pros and cons of iframe?

Advantages of iframe:

1. Iframe can show the embedded web page intact.

2. If multiple pages reference iframe, then you only need to modify the content of iframe, you can implement the change of each page content, convenient and quick.

3. If the header and version of the web page are the same in order to unify the style, it can be written as a page, nested with iframe, which can increase the reuse of the code.

4. If you encounter slow loading of third-party content such as ICONS and advertisements, these problems can be solved by iframe.

Disadvantages of iframe:

1. It produces many pages and is not easy to manage.

2. Iframe frame structure can sometimes make people feel confused. If there are too many frames, there may be scroll bars up and down, left and right, which will distract the attention of visitors and cause poor user experience.

3. The code is complex and cannot be indexed by some search engines, which is critical. The current search engine crawler cannot deal with the content in IFrame well, so the use of IFrame is not conducive to search engine optimization.

4. Many mobile devices (PDA phones) can not fully display the frame, poor compatibility of devices.

5. Iframe frame pages increase HTTP requests from the server and are not desirable for large websites.

So much analysis, now basically use Ajax to replace iframe, so IFrame has gradually withdrawn from the front-end development

What is the difference between Canvas and SVG graphics?

SVG

  • SVG is a language for describing 2D graphics using XML.
  • SVG is based on XML, which means that every element in the SVG DOM is available. You can attach JavaScript event handlers to an element.
  • In SVG, every graph that is drawn is treated as an object. If the attributes of an SVG object change, the browser can reproduce the graphics automatically.

Features: Resolution independent support event handlers are best suited for applications with large rendering areas (such as Google Maps). High complexity can slow down rendering (any application that overuses the DOM is not fast) and not suitable for gaming applications

Canvas

  • Canvas uses JavaScript to draw 2D graphics.
  • Canvas is rendered pixel by pixel.
  • In canvas, once the graph has been drawn, it doesn’t continue to get attention from the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graph.

Features: Resolution dependent not supported event processor Weak text rendering ability able to save result images in.png or.jpg format

Best suited for graphics-intensive games, where many objects are frequently redrawn