1, what are the HTML elements layout classification

  • Inline elements (display:inline) : Cannot set width and height, element size is determined by content size, does not automatically wrap, is arranged from left to right, cannot nest block level elements inside
  • Block-level elements (display:block) : the width defaults to the width of the parent element, and the height defaults to the content height
  • Inline block level elements (display:inline-block) : Can set the width and height, arranged from left to right

2. The difference between the B tag and the strong tag in HTML

  • B: Bold for the sake of bold
  • Strong: bold to indicate emphasis (blind people using reading devices will stress strong, B will not)

3. Ways to reduce dom quantity

  • Use pseudo-elements instead of DOM element solutions, such as cleanup floats, style implementations, and so on.
  • Do not abuse DOM tags, and the structure is reasonable.
  • Load on demand to reduce unnecessary rendering.

4. How to optimize DOM given a large amount of dom at once

  • Caching DOM objects, such as cyclic insertion of a large number of DOM objects, the parent DOM is fetched outside the loop and inserted inside the loop.
  • Using document. CreateDocumentFragement create or create a document node is not in the dom node in the tree, to a large number of dom one-time update into the node, then the batch replacement or inserted into the dom.
  • Replace the successive appendChild with innerHtml to avoid multiple attempts to affect the DOM. AppendChild adds elements that already exist on the page that are destroyed after execution.

5. How to disable the default event of label A and how to realize the jump after disabling it

  • Disable the a label default event

    • The href attribute of the a tag is set tohref="javascript:;"||href="javascript:void(0);"Block jumps by executing empty JS code
    • Used on the A TAB click evente.preventDefault()withwindow.event.returnValue=false, which is compatible with IE to prevent the default behavior of DOM elements

  • Realize the jump

    • Click the event to jump to using location.href = URL.

What is SEO

Search engine background has a very large database, database storage massive keywords, each keyword corresponding to multiple sites. The data collected by the spider on the Internet every day, crawl from one link to another link, to extract keywords of the current web page, will be key words with the corresponding website after stored in the database, and when we use a search engine, search engine will certainly with the search words compared with keywords that exist in the database, The higher the matching degree of keywords corresponding to the website is displayed in the front of the priority. Seo (Seach Engine Optimization) is based on this, to optimize the current website, improve the website corresponding keywords in the search engine ranking, to obtain more exposure.

7. How to optimize seo at the front end

Front-end SEO optimization is nothing more than to make the crawler more appropriate to the keywords extracted from the current website and improve the ranking of website keywords in the search engine through the processing of web pages.

  • Reasonably control the number of website homepage links, links enough spiders can climb the inside page, improve the number of website included, but not too much, too many meaningless links will not only affect user experience but also reduce the weight of the website homepage
  • Control the structure of the site within three layers, so that the spider jumped three times to reach any page inside the site, which means that the lower the level is easier to be included by the spider, if there are too many layers of spiders may not be willing to climb
  • Navigation as far as possible to use text, if it is a picture must also add Alt and title attributes, tell the search engine navigation location
  • Take advantage of the layout and put the important HTML in front of the spider to make it easier to crawl first
  • Control page size to increase page loading speed, if page loading is slow, the spider will leave

  • The text header uses the H1 tag, which has its own weight and is considered most important by the spider
  • Use the strong em tag instead of the B tag, because strong and EM are bold for the purpose of highlighting and are highly valued by search engines
  • Do not use JS output for important content, spider will not read JS output, you can use server-side rendering method to directly present the content of Traditional Chinese medicine in the current HTML.
  • Spider only capture get request page, not capture POST request page, reasonable control page request mode
  • External links need to be addedel = nofollowAttribute, tell the spider not to climb to take, because climb to take the chain may not come back.
  • Do not use the iframe framework; spiders generally do not read its contents

8. What are meta tags and their common attributes

The meta tag is located in the HEAD area of the HTML. It describes various information about the current page, such as the description of the page, keywords, changes, etc. It is invisible to the user and serves browsers, search engines and other web services.

  • Charset: Defines the document character encoding
  • Content: Defines meta information about the name attribute or http-equiv attribute
  • Name: Associates the Content property with a name
  • Http-equiv: Associates the Content property with the HTTP header
// The current page character encoding utF-8<meta charset="utf-8"/>// The current page keyword, seo optimization will use<meta name="keywords" content="Easy for SEO optimization"/>// Describe what the current page does<meta name="description" content="Current Page Description"/>// Declare the page character encoding<meta name="content-Type" content="text/html"/>
Copy the code

9. Script async differs from defer

When the browser parses THE HTML, it will stop parsing the script tag. It will download and execute the JS file first, and then continue parsing. Therefore, if the tag comes before the HTML, it will affect the HTML parsing and bring bad experience to the user.

  • Defer: When the DOM is loaded, the DOMContentLoaded event will be executed. If the tag of defer is not loaded or executed, it will be postponed and triggered until the tag of defer is loaded and executed. This is equivalent to placing the Script tags at the bottom of the HTML document, and defer executes in the order in which the script tags appear
  • Async: Async is executed immediately after loading, so the order of JS execution is likely to be different from the order of tag occurrence (all scripts created by JS are loaded with Async by default).
  • Ps:
    • Both allow script tags to load asynchronously without blocking DOM parsing
    • And does not work with inline JS scripts (<script>var a = 1</script>)
    • Document.write cannot be used in scripts
    • Both will block the onLoad event (onLoad means that all dependent resource loads have finished executing)
    • Defer blocks the DOMContentLoaded event and async does not block (DOMContentLoaded: execute this event when the DOM resource has been downloaded and parsed, and CSS images and other resources may not have finished loading)
    • Defer appears at the same time as Async, which has a higher priority, unless the browser is incompatible with Async, then defer prevails.

11. Preload, prefetch, dns-prefetch

  • Preload: This method does not block the DOMContentLoaded and onload events, but it preloads resources whether you use it or not. To use this resource, you need to specify it manually. Generally, we use preload to preload resources in the header and use it in the window.onload event. Crossorigin should be set when preloading fonts, use anonymous cross-domain mode, otherwise the font file will be loaded twice (preload+window.onload is the best solution when you want to load a script resource without affecting the current page performance)

  • DNS – prefetch: Dns-prefetch This will resolve the DNS of the site when the browser is idle, so we don’t need to do DNS resolution when we go to the site.

  • Preconnect: As the name implies, dnS-prefetch is a pre-dns resolution, while preconnect is a pre-dns connection to a website, including DNS resolution, TLS negotiation, TCP handshake, The difference between dnS-prefetch optimization and dnS-prefetch optimization is that in general, we can use preconnect for certain links that we know the user will use, and dnS-prefetch for other uncertain links. Otherwise, we can use dnS-prefetch for all links.

12. What are the semantics of Html and the advantages of semantics

With the introduction of H5, there are many new semantic tags, such as header, footer, nav, article, etc., that clearly explain the meaning of the current content to the browser or developer.

  • Easy for developers to read the code, clear code structure
  • It is conducive to Seo’s understanding of data when spiders crawl data

2346