I saw a good article recently, reprint it and share it:
When I saw that Meituan used it <link href="//p0.meituan.net" rel="dns-prefetch">, I searched it and found this article, so I turned it down.
HTML5It has been popular for a while. I believe that as a webrelevant development engineer, I must have more or less understood and tried some HTML5features and programming. HTML5Remember the new tabs we introduced earlier . As the trend and vane of future front-end development technology, HTML5it must not be ignored.
In today's technology sharing article, we will introduce several HTML5important features that can help you improve webthe use experience and development efficiency of the entire application. I believe everyone will be interested!
Feature 1: Regular Expressions
I believe everyone will like this feature very much. Without server-side detection, using the native function of the browser can help you determine the format of the email URL, or the format of the phone, to prevent users from entering wrong information. By using HTML5the patternattributes, we can easily To easily integrate this function, the code is as follows:
<input type="email" pattern="[^ @]*@[^ @]*" value="">Run as follows:
If you Firefoxrun it in the browser and enter the wrong emailaddress, you will use the system's uiprompt error
Feature 2: Data List Elements
In HTML5the days when there is no, we will choose to use some JSor well-known jQuery UIfunctions to achieve automatic completion, and in HTML5China, we can use datalistelements directly, as follows:
<form action="/server" method="post">
<input list="jslib" name="jslib" >
<datalist id="jslib">
<option value="jQuery">
<option value="Dojo">
<option value="Prototype">
<option value="Augular">
</datalist>
<input type="submit" value="完成" />
</form>Run the code:
If you type the letter "j", you can see the autocompletion effect
Feature 3: Download Properties
HTML5The download attribute of , allows developers to force a page to be downloaded instead of loading that page. In this case, you don't need to implement some server-side functions to achieve the same effect, isn't it very sweet?
<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a>Feature 4: DNS preload processing
You need to know DNSthat the cost of parsing is very high, which often leads to slow loading of the website. Now the browser has developed a smarter way to deal with this problem. After it caches the domain name, it will be automatically obtained when the user clicks on other page addresses.
If you wish to prefetch DNS, you can control your browser to resolve the domain name, for example:
<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">Feature 5: Preload Processing of Linked Web Pages
You should know that links can help users navigate in the page, but the speed of page loading determines whether the user experience is good or bad. Using HTML5the following prefetchattributes can help you preload the page or specific resources in the page for the specified address, so that the user can When you click, you will find that the page loads faster.
<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />Or you can use prerenderattributes, which can help you load the entire page ahead of time, like this:
<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />By setting this property, after logging into the geek community, the geek search page has been loaded, so if you need to search, the page will be loaded immediately, I believe your users will definitely like to visit such a website!