Excellent front end needs to have the experience

a good front-end engineer should not only consider web technology and language, but also understand all the different components, systems and concepts.

Top-level front-end engineers need the experience and best practices ( This is the market's most needed front end ):

1. Understand DNS resolution, make full use of CDN, use multiple domain names to complete resource requests to shorten load time;

1, enter the www.qq.com domain name in the browser, the operating system will first check their local hosts file whether there is this URL mapping relationship, if there is, first call this IP address mapping, complete the domain name resolution.

2, if the hosts do not have this domain name mapping, then find the local DNS resolver cache, whether there is this URL mapping relationship, if there is, direct return, complete the domain name resolution.

3, if the hosts and the local DNS resolver cache does not have the corresponding URL mapping relationship, first will find the TCP/IP parameters set in the preferred DNS server, where we call it a local DNS server, when the server receives the query, if the domain name to query, included in the Local Configuration zone resources, The parsing result is returned to the client and the domain name resolution is completed, which is authoritative.

4, if the domain name to be queried is not resolved by the local DNS server zone, However, the server has cached this URL mapping relationship, call this IP address mapping, complete the domain name resolution, this resolution is not authoritative.  

6, if the use of a forwarding mode, this DNS server will forward the request to the first level of DNS server, from the previous level of the server to resolve, the previous level of the server if it can not resolve, or find root DNS or transfer requests to the upper ancestor, in this cycle. Whether the local DNS server uses either forwarding or root hints, the result is returned to the local DNS server, which is then returned to the client.

Source: http://369369.blog.51cto.com/319630/812889/The full name of the CDN is the Content Delivery network, which is the contents distribution networks. The goal is to add a new layer of network architecture to the existing Internet, publish the content of the site to the "Edge" of the network closest to the user, so that users can get the content they need and improve the responsiveness of users to the site. A CDN is different from mirroring because it is smarter than mirroring, or it can be used as a metaphor: cdn= more intelligent mirror + cache + traffic diversion. Therefore, CDN can obviously improve the efficiency of information flow in Internet network. From the technical comprehensive solution due to network bandwidth is small, user access is large, dot distribution is not equal problem, improve the response speed of users to visit the site.
to better understand the CDN, let's look at the workflow of the Cdn. When a user accesses a website that has been added to a CDN service, it first determines the best CDN node that is closest to the user by using DNS redirection technology and points the user's request to that node. When a user's request arrives at the specified node, the CDN server (the cache on the node) is responsible for providing the user with the requested content. The specific process is: the user in their own browser to enter the domain name of the site to visit, the browser to the local DNS request for the domain name resolution, local DNS requests to the site's primary DNS, the primary DNS based on a series of policies to determine the most appropriate CDN node, and the results of the resolution (IP address) sent to the user, The user requests the content of the corresponding site to a given CDN node. CDN Implementation needs to rely on a variety of network technology support, including load balancing technology, dynamic content distribution and replication technology, caching technology is the main number, let's take a brief look at these several technologies. Source: http://blog.csdn.net/ligaofeng/article/details/17139481Domestic Baidu, Sina, 360 and so on are availableFront EndCND Resource library; BaiduOfficial website: http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs

1. Set HTTP Headers (Expires, Cache-control, if-modified-since);
2. Follow all the rules given by Steve Souders (High performance Websites)

Rule one: Reduce the HTTP request . The order of the book is ranked in terms of its importance, and reducing the HTTP request as the first rule is a great indication of its importance. According to the golden rule, reducing the number of components to reduce HTTP requests is the most effective way to optimize performance, with several techniques worth mentioning:

1. background-position to locate.

2. data:url. It is worth to say that the picture into the inline, reduce the picture request, Webpack picture less than 8KB will be converted to Base64 Data:url.

3. merge scripts and CSS.

rule two: Use a CDN. This rule does not need to say much, the distribution of content closer to the end user, reducing the request time.

Rule Three: Add the Expires header. use the cache to set long-lasting expires headers for longer-lived content components.

rule four: Compress components. compressing a document or component with content encoding such as gzip can usually reduce the amount of data 70% around.

Rule five: Place the style sheet at the top. the page is gradually presented in the open project, the user will feel the page is faster, also let the user in the waiting process has a good feedback. If you put the CSS on the bottom, there is a possibility of white screen phenomenon.

Rule Six: Place the script at the bottom. when a page downloads a script, it prevents other content from being downloaded and rendered, preventing the browser from redrawing. So placing the script at the bottom of the page does not prevent page content from being rendered, and some visual components of the page can be downloaded as early as possible without being blocked.

rule seven: Avoid using CSS expressions. CSS expressions are evaluated frequently, resulting in poor performance.

Rule Eight: Use external JavaScript and CSS. in pure terms, inline is faster because it satisfies rule one to reduce HTTP requests, but on this issue, it is important to consider the performance optimizations that the cache brings, and the external files are likely to be cached, which improves performance.

Rule nine: Reduce DNS lookups. use DNS caching, such as persistent connections.

Rule ten: Streamline JavaScript. Remove unnecessary word spaces, our common. Min.js is so.

Rule 11: Avoid redirection. The response status code for 3XX represents a redirect response. Where the URL at the end of the missing slash caused by redirection requires special attention, do not because of this mistake damage performance.

Rule 12: Remove duplicate scripts.

Rule 13: Configure the ETag. speaking of which, I have to say. Conditional requests if-modified-since and If-none-match are used for cache re-authentication. The problem with the etag is that when the server constructs the ETag, even though the two files are exactly the same, there will be different etag if they are in different servers, increasing the number of HTTP requests to download, which is very damaging to the performance of the server cluster in the background.

rule 14: Make Ajax cacheable. Although Ajax is asynchronous, it does not allow for too long to wait for a response. The optimization guidelines are described in the performance guidelines above, where the use of caching remains our focus.

Source: http://www.phpxs.com/post/4326

1. Know how to solve all the problems displayed by Pagespeed, YSlow, Chrome dev Tools Audit, chrome dev tools Timeline;
2. Know what tasks should be placed on the server side, what tasks should be placed on the client;
3. Know how to use caching, DNS prefetching and resource preload techniques;
4. Proficient in JavaScript, know when to write their own frame or code, the pros and cons to distinguish;
5. Proficient in using modern MVC JavaScript frameworks (such as AngularJS emberjs React, etc.), graphics libraries (D3, snapsvg, etc.), DOM Operations class libraries (JQuery, Zepto, etc.), lazy loading or module management libraries (e.g. Require JS, CommonJS, etc.), task invocation tools (such as Grunt Gulp, etc.), package management tools (Bower Componentjs), and test tools (protractor, Selenium, etc.);
6. Master the image format, the advantages of each format, the applicable scene; know the picture optimization techniques and loading strategies (sprite, lazy loading, cache refresh, and PNG interleaving);
7. Familiar with CSS standard, the latest conversion tool Active strategy specification (such as BEM, SMACSS, OOCSS, etc.);
8. JavaScript's computer Science (memory management, single-process features, garbage collection algorithms, timers, scopes, elevation, and design patterns).

In other words, if you are proficient in html+css+js, understand backend knowledge, only 60 points of qualified front-end; then to become a popular, high-paying 80 excellent front end, to the business needs and, architecture design has a real use, and 100 points of the top end, you must be able to take into account the technology and design, Closer to the "front-end development-oriented full stack engineer" .

http://zhuanlan.zhihu.com/FrontendMagazine/20598089?

From for notes (Wiz)

Good front end experience required