The front end of toutiao today

Blowing ah blowing ah my pride indulge, 2017, today the start of winter, although the autumn wind is still bleak, but the sun is warm, the mood also followed the warm up. The trees on either side of the road rustled and rustled in gold, and the dead leaves on the ground whirled round me, picked up by the wind.

Some words left behind to see the mood to decide whether to say, first above test:

Question 1 (CSS)

The answer is 20px.

Question 2 (HTML)

DNS Prefetch, or DNS Prefetch, is part of front-end optimization. Generally speaking, there are two aspects related to DNS in front-end optimization: one is to reduce the number of DNS requests, and the other is to perform DNS prefetch.

DNS is the basic protocol of the Internet, and its resolution speed seems to be easily overlooked by website optimizers. Most new browsers have been optimized for DNS resolution. A typical DNS resolution takes 20-120 milliseconds, so reducing the time and frequency of DNS resolution is a good optimization. DNS Prefetching reduces waiting time and improves user experience as domain name resolution and loading is a serial network operation.

By default, the browser Prefetch the domain name of the page that is not in the same domain as the current domain name (the domain name of the page being viewed) and cache the result. This is the implicit DNS Prefetch. If you want to pre-fetch domains that do not appear on the page, you use the displayed DNS Prefetch.

Most browsers support this property, and the versions are as follows:

• Safari: 5+
• Chrome: All
• Firefox: 3.5 +
• Opera: Unknown
• IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

Chrome and Firefox 3.5+ have DNS Prefetching technology and optimization Settings for DNS preresolution. So even if you don’t set this property, Chrome and Firefox 3.5+ will automatically preparse in the background.

DNS Prefetch should be placed at the front of the page as much as possible, and at the back is recommended. Specific use methods are as follows:

<meta http-equiv=”x-dns-prefetch-control” content=”on”>

<link rel=”dns-prefetch” href=”//www.itechzero.com”>

<link rel=”dns-prefetch” href=”//api.share.baidu.com”>

<link rel=”dns-prefetch” href=”//bdimg.share.baidu.com”>

It is important to note that while using DNS Prefetch can speed up page parsing, it should not be abused, as some developers have pointed out that disabling DNS Prefetch could save 10 billion DNS queries per month.

If you want to disable implicit DNS Prefetch, you can use the following tags:

<meta http-equiv=”x-dns-prefetch-control” content=”off”>

Question 3 (CSS)

Question 4 (RegExp)

This is the principle of the front-end template engine.

See the nine lines of code implementing the template engine-js

The Tpl = function (Tpl, data) {var fn = Tpl. Replace (/ < / g, '<'). The replace (/ > / g, '>') / / escape < > replace (/ (< % =) ([\ s \ s] *?) (% >)/g, '$1 _html_ + = ($2) \ n $3') / / < % = % > [\ s \ s] allow newline. Replace (/ ((< %)? ! =)([\s\S]*?) (%>)/g, '$1\n\t$2\n$3') // <% js code %> (? ! =) don't match to the < % = % >. The replace (/ (^ | > % % >) | ([\ s \ s] *?) (< % = | < % | $)/g, function ($, $1, $2, $3) {/ / HTML, outside the boundary character in HTML (\ | | | \ r \ n ") to escape the return '_html_ + = "' + $2. Replace (/ \ \ / g, '\\\\').replace(/"/g, '\\"').replace(/\r? \n/g, '\\n') + '"\n' }); return (fn = Function('data', 'with(data||{}){\nvar _html_=""\n' + fn + '\nreturn _html_\n}')), data ? fn(data) : fn };Copy the code

Question 5 (HTTP)

Cache-control specifies the caching mechanism followed by requests and responses. A good caching mechanism can reduce the occupation of network bandwidth, improve access speed, improve user experience, and reduce the burden on the server.

Cache-control has the following types:

(1) Request:

• No-cache Does not read files in the cache and requests a new request from the WEB server
• No-store requests and responses are not cached
• Max-age indicates that a request will not be made to the server if the page is accessed again within max-age seconds. This function is similar to Expires, except that Expires is compared based on a specific date value. The time of the cache is not accurate. The result may be an error, while max-age obviously does not have this problem. Max-age also takes precedence over Expires.
• Max-stale Allows cache objects whose expiration time must be smaller than the max-stale value to be read.
• Min-fresh accepts cache objects whose Max-age life is greater than the sum of their current time and min-fresh values
• Only if-cached tells the cache, I want the content to come from the cache, I don’t care if the cached response is fresh or not.
• No-transform tells the agent not to change the media type, such as JPG, to PNG.

(2) Response:

• Public data content is stored, even password protected web pages are also stored, very low security
• Private data content can only be stored in a private cache. It is valid only for a user and cannot be shared
• No-cache can be cached, but is returned to the client only after the WEB server verifies that it is valid
• No-store requests and responses are not cached
• Max-age Specifies the expiration time of the object contained in this response
• Must-revalidate If the cache expires, it is checked again with the original server for the latest data, not with an intermediate proxy
• Max-stale Allows cache objects whose expiration time must be smaller than the max-stale value to be read.
• Proxy-revalidate is similar to must-revalidate, except that proxy-revalidate excludes the user proxy cache. That is, its rules do not apply to the local cache of the user agent.
• – Maxage differs from max-age only in that s-maxage applies only to shared caches. Do not apply to single-user caches such as local caches for user agents. In addition,s-maxage has a higher priority than max-age.
• No-transform tells the agent not to change the media type, such as JPG, to PNG.

Question 6 (HTML)

• Without defer or async, the browser will load and execute the specified script immediately. “Immediately” means before rendering the document elements under the script tag, meaning without waiting for subsequent loading of the document elements, Read it and load it and execute it.

• With async, the loading and rendering of subsequent document elements will take place in parallel with the loading and execution of script.js (asynchronously).

• Defer. The loading of subsequent document elements will take place in parallel (asynchronously) with the loading of script.js, but the execution of script.js will take place after all elements have been parsed. DOMContentLoaded is completed before the event triggers.

As a practical matter, it is best practice to dump all scripts first before </body>, because with older browsers this is the only optimized option to ensure that all non-scripted elements are loaded and parsed as quickly as possible.

Next, let’s look at a picture:

The blue line represents network reads, and the red line represents execution time, both of which are for scripting; The green line represents HTML parsing.

The graph tells us the following points:

• Defer and Async are the same on the network read (download) side as they are both asynchronous (compared to HTML parsing).
• The difference between the two is when to execute the script after it has been downloaded, and clearly defer comes closest to what we want for the application script to load and execute.
• What this diagram doesn’t do with defer is that it executes the scripts in the order they are loaded, which is something to take advantage of.
• Async is an out-of-order master, for which scripts are loaded and executed right next to each other, so no matter what order you declare it, it will be executed as soon as it is loaded.
• If you think about it, Async is not very useful for application scripts because it doesn’t care about dependencies at all (even the lowest level of sequential execution), but it is very suitable for scripts that don’t depend on or be relied on by any script, the most obvious example being Google Analytics.

Question 7 (javascript)

Question 8 (javascript)

The answer is 4;

Question 9 (CSS3)

Source:

<style>
.coin{
			background: #666;
			width: 10%;
			padding-bottom: 10%;
			background: linear-gradient(to bottom right, hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .1));
			border-radius: 50%;
			border: 2px solid #999;
			animation: rotate-coin-y 1s linear infinite;
		}
		@keyframes rotate-coin-y{
			0%{
				transform: rotateY(0deg);
			}
			50%{
				transform: rotateY(180deg);
			}
			100%{
				transform: rotateY(360deg);
			}
		}
</style>
<div class="coin"></div>
Copy the code

Programming problem