Speaking of HTML tags, front-end engineers will be very have a say, because in the usual development will be used, can be said to be a front-end entry necessary knowledge. But often care more about the rendering effect and interaction of the page, that is, the visible part of the page, such as navigation bar, menu bar, list, graphic and so on.

In fact, there are some pages are not presented but very important tags, most of these tags in the page head tag, although invisible on the page, but if in a specific scene, will produce unexpected effects. I’m going to talk about “neglected” HTML tags in terms of interaction optimization, performance optimization, and search optimization.

Interactive optimization

Meta Tags: Automatic jump/refresh

If we want to achieve a similar automatic play page, first of all, our first reaction will think of using JS timer to control the page jump to complete. However, there is an easier way to do this through the Refresh function of the Meta tag.

<meta http-equiv="refresh" content="10; url=view2.html">
Copy the code

The above code automatically jumps to the view2.html page in the same domain 10 seconds later. To implement the function of auto-play, we just need to set the address of the next page in the meta tag of each page.

If you want to implement the periodic refresh function, just remove the following URL can be:

<meta http-equiv="refresh" content="10">
Copy the code

Note that using meta tags to implement refresh/jump processes is not cancelable, so manual cancelation should be done by using js timers, but for simple timed refreshes or jumps, you can still practice the use of meta.

Title tag: message alert

Before the release of THE HTML5 standard, browsers did not open ICONS flashing, audio playback, pop-up system messages and other APIS, can only rely on other unconventional means, such as modifying the title tag to achieve similar effects.

The following code periodically changes the content of the title tag to realize the function of message notification, so that users can timely discover the messages returned by the server when browsing other pages.

let messageNum = 1; // Number of messages
let count = 0; / / counter
const msgInterval = setInterval(() = > {
  count = (count + 1) % 2;
  if(messageNum === 0) {
    // Change the title using DOM
    document.title += 'Current page';
    clearInterval(msgInterval);
    return;
  }
  const pre = count % 2 ? 'New news (${msgNum}) ` : ' ';
  document.title = `${pre}Current page ';
}, 1000);
Copy the code

Of course, the dynamic change of the title tag is not only used for message notification, but also for asynchronously performing tasks, such as download progress, upload progress, etc.

Performance optimization

Script tags: Adjust the loading order to improve rendering speed

Have you ever opened a page in your browser and found that the page kept spinning or waited for a long time for the page to respond? In addition to network speed, most of this phenomenon is due to unreasonable page structure design resulting in long loading time. Therefore, if you want to improve the speed of page rendering, you need to understand how the browser page rendering process, and solve the problem from the root.

Browsers use GUI rendering threads and JavaScript engine threads when loading pages. The GUI rendering thread is responsible for rendering HTML elements of the browser interface, and the JavaScript engine thread is mainly responsible for processing JavaScript scripts. Because JavaScript can also change the interface structure and style during execution, they are designed to be mutually exclusive. That is, when the JavaScript engine executes, the GUI thread is suspended, and when the JavaScript script is finished, the GUI thread is switched to continue rendering the page.

So we can see that the page rendering process includes the request script file and the time to execute the script file, but the first rendering of the page may not require the execution of the entire file, but these requests and file execution actions will prolong the user’s view of the page, thus reducing the user experience.

In order to quickly present the content to the user and reduce the user waiting time, three attributes of the script tag can be used to achieve this:

  • Async: requests a script file immediately but does not block the GUI rendering engine. Instead, it blocks the GUI rendering engine and executes the file content immediately after the file is loaded.
  • Defer. Request the script script immediately, but do not block the GUI rendering engine until the HTML is parsed before executing the file content.
  • HTML5 standard type, corresponding to “module”. Have the browser parse the file as a module according to ECMA Script 6, blocking as defer by default, or with async executing immediately after the request is complete.

As you can see, using the defer attribute and the case of Type =”module” ensures that the rendering engine executes first, reducing the time it takes to execute the file content and allowing the user to see the page more quickly, even if the page content may not be fully displayed. Also know that when the rendering engine parses the HTML and encounters aScript tag introduced into the file, it immediately does a rendering, which is why it puts aScript tag that references JavaScript code at the bottom of the body tag.

Link tags: Speed up rendering with pre-processing

When we optimize the performance of medium to large projects, we often do subtraction (gzip compression, caching, etc.) or division (packaging on demand, loading on demand), but if we can think of the rel attribute value of the Link tag to preload, it can also speed up the page rendering.

  • DNS – prefetch. When the REL value of the link tag is dnS-prefetch, the browser will perform DNS resolution for a domain name and cache it. In this way, when the browser requests resources with the same domain name, it saves the process of querying IP addresses from the domain name (DNS query), thus reducing the time loss. (Note: this property is experimental and supported in some browsers.)
  • Preconnect. Allowing the browser to perform some of the operations before an HTTP request is formally sent to the server, including DNS resolution, TLS negotiation, and TCP handshake, saves the user time by eliminating round-trip latency. (Note: this property is experimental and supported in some browsers.)
  • Prefetch/preload. Both values allow the browser to pre-load and cache a resource, but prefetch is likely to be ignored when the browser is busy, whereas preload is guaranteed to be pre-loaded.
  • Prerender. The browser not only loads the resource, but also parses the execution page for pre-rendering. (Note: this property is experimental and supported in some browsers.)

Search optimization

When you write front-end code, in addition to making it easier for the browser to execute, sometimes you also want to make it easier for other applications (such as search engines) to understand. Using meta tags and link tags properly will help search engines better understand and include our pages.

Meta tags: Extract key information

Using meta tags, you can set the description of a page, which helps search engines better display search results. For example, if you search “Taobao” on Baidu, you will find a description of the site, which is specially set for the search engine through the meta tag to facilitate users to preview the search results.

In order for search engines to better identify the page, in addition to description information can also use keywords, so that even if the page does not contain the search content, can also be searched (of course, search engines have their own weight and algorithm, if the abuse of keywords will be reduced weight, The Google engine, for example, penalizes pages with a large number of the same keywords, reducing their search weight).

When we search for the phrase ‘safe shop,’ taobao’s search results show up, even though the words’ safe shop ‘aren’t on the search results because of the keyword set up on taobao’s page. The corresponding code is as follows:

<meta content="Taobao, pay treasure, online shopping, C2C, online trading, trading market, online trading, trading market, online shopping, online selling, shopping website, group purchase, online trade, safe shopping, e-commerce, rest assured to buy, supply and sale information, online shop, price, auction, open a shop on the net, the network shopping, discounts, free open a shop, online shopping, channels, stores" name="keywords">
Copy the code

In practice, it is recommended to use keyword tools such as Google Trends and Webmaster tools.

Link tags: Reduce duplication

Sometimes, for user convenience or historical reasons, there are multiple urls for the same page, or there are some redirected pages, such as:

  • baidu.com/a.html
  • baidu.com/detail?id=”abcd”

So in these pages you can set it like this:

<link href="https://baidu.com/a.html" rel="canonical">
Copy the code

This allows search engines to avoid spending time crawling duplicate pages. Note, however, that it also has a restriction, that is to point to the site is not allowed to cross domain.

Of course, there are other ways to combine urls, such as using a site map or adding rel=”canonical” to the HTTP request response header.