1. The difference between defer and async in the script tag

For scripts loaded with normal

  • asyncIf async is present, normal scripts will be requested in parallel without blocking DOM rendering and executed as soon as the load is complete.
  • defer: The script with the defer attribute is also requested in parallel, but the execution phase is triggered after the document has been parsedDOMContentLoadedBefore the event).

2. Common META tags

The META tag is an auxiliary tag in the HEAD area of HTML and is often used to define the description of a page

  • keywords: Used to tell search engines the keywords of your web page
  • description: Used to tell search engines the main content of your site
  • viewport: This property is often used to design mobile web pages
  • robots: tells the crawler what to index and what not to index.
  • renderer: Used to specify how pages should be rendered by default in dual-core browsers, such as 360
  • charset="utf-8"Used to specify the page character set

3. Semantic tags in HTML5

  • headerThe element specifies the header for a document or section.
  • navDefine navigation links.
  • mainSpecify the main content of the document.
  • articleThe element specifies independent, self-contained content.
  • sectionThe element defines sections in the document.
  • asideSomething outside of the main content of the element page (such as a sidebar).
  • footerThe element specifies the footer for a document or section.

Advantages of semantic tag: 1. Clear code structure, easy to read, develop and maintain 2. Good for SEO, search engine crawler will give different weight according to different tags 3. Facilitate other devices (such as screen readers) to render web pages based on semantics

4. Difference between Svg and Canvas

SVG:

  • Is based on XML to describe 2D graphics
  • The fact that SVG is based on XML means that every element in the SVG DOM is available
  • Resolution independent, no distortion in amplification

Canvas:

  • Canvas is pixel-based
  • Events in Canvas are complicated, because there is no DOM in Canvas, the click position can only be determined by the position from the upper left corner (collision detection method is used in 3D scene).
  • Depending on resolution, each resolution change requires a re-rendering

5. Inline elements, block elements, empty elements

  • Inline elements: A, B, SPAN, img, INPUT, SELECT, strong
  • Block elements: div, ul, OL, Li, H1 ~ H6, P
  • Empty elements:<br>,

    ,,,,,

6. <! DOCTYPE html>The role of

Specifies the document definition type that HTML documents follow, telling the browser which version of HTML to parse the HTML file with

7. web worker

Refer to the link

7.1 Web worker

On the basis of JavaScript single thread execution, another child thread is opened for program processing without affecting the execution of the main thread. When the child thread finishes execution, it returns to the main thread. In this process, the execution process of the main thread is not affected.

7.2 Creating a Thread

When creating a thread, you need to pass a single parameter to the instantiated Worker, pointing to the URL or Blob object of a javascript file resource. After calling this constructor, a thread is created.

var worker = new Worker("worker.js");
var workder = new Worker(blob);
Copy the code

7.3 Thread Communication

Postmessage and onMessage are provided between the child thread and the main thread to send and receive data

HTML5 offline cache

Offline cache is one of the new features of Html5. It is simply understood that the data will be cached after the first load. On the premise of not clearing the cache, the next load can also be loaded without the network

9. The front-end SEO

9.1 SEO definition

SEO(Search Engine Optimization) stands for Search Engine Optimization. SEO comes along with search engines. SEO is the act of optimizing the ranking position (priority) and number of search results in a search engine

9.2 Why do SEO?

Increase the weight of the website in the search engine, enhance the friendliness of the search engine, has achieved the effect of increasing traffic, improve the user experience (potential)

9.3 Principles of search Engines

In the background of the search engine website, there will be a huge database, which stores a huge amount of key information. These site information is collected from the Internet using crawlers. When a keyword corresponds to multiple websites, so there will be a priority problem, corresponding when the most consistent with the keyword url will be in the front.

10. How to do SEO

10.1 Optimization of website structure layout

  • Try not to go beyond three levels of directory structure, beyond which the spider is unwilling to climb down.
  • Control the number of links to the home page, too many home pages will reduce the weight of the home page
  • Navigation optimization: try to use text navigation, image code with Alt and title tags
  • With important content first, a crawler reads the page from top to bottom
  • Control page size to reduce HTTP requests and speed up site loading

10.2 Optimization of Web code

  • Highlight important content, reasonable title, desctiption, and keywords
  • Semantically write HTMl tags, such as H1-H6 for header classes, and use UL or OL for list form codes
  • In – page tag links, to add the ‘title’ attribute description, let visitors and crawlers know. External links should have an el=”nofollow” attribute to tell the crawler to stop crawling.
  • Use labels to indicate the body content. Do not abuse the H tag
  • Img tag with Alt attribute. When the network is slow and the image does not load, it can let the user know what the image is doing when it is not displayed
  • Do not export important content in JS, because crawlers do not read content in JS
  • Use the IFrame framework as little as possible, because crawlers generally don’t read the contents inside
  • Search engines will filter out content with display none