Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the front-end development method of NetEase Finance and Economics web". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 、 Make Fewer HTTP Requests

As we all know, http requests are expensive, and reducing the number of requests can improve the loading speed of web pages. Common methods, such as merging css,js, Image maps and css sprites, etc. The practice of the author's team is to develop separately according to the function, and then group and merge the js,css through the internal system, which is a request for the browser, but it can still be restored to multiple during development, which is easy to manage and repeat references. It is worth mentioning that NetEase's internal front-end code release system is worth learning and using for reference. It is very convenient for fiddler debugging and performance optimization. It is not convenient to reveal more here. If you are interested in talking alone, ha. Css sprites refers to simply merging the background image on the page into one, and then getting the background through background-position. Here, the author does not advocate using pictures to deal with things like pictures, just for this project.

These parts are implemented through css. As programmers, we should grasp and apply the new technology in time, especially the so-called big companies. We should not give up because some browsers are not compatible. Fortunately, our leaders also agree. Haha ~

2. Use a Content Delivery Network (CDN content delivery Network)

To put it simply, by adding a new layer of network architecture to the existing Internet, publishing the content of the website to the cache server closest to the user, and through DNS load balancing (optional according to time or access speed to determine which server resources to access, the author just arrived, did not in-depth study of the underlying part of the company) technology, to judge the user source to visit the cache server to get the required content. This can effectively reduce the time of data transmission on the network and improve the speed. I believe many companies have done this, so I won't say much about it here.

3 、 Add an Expires Header

4 、 Gzip Components

Of course, these parts of the back-end help us complete, 3 mainly through the server-side script to set up Cache-Control and Expires; the idea of Gzip is to compress the file on the server first, and then transfer it. This compression ratio is so high that it can basically be compressed to the original 1max 4. I used to be a phper, so I know a thing or two about this piece. For front-end engineers, it is still necessary for us to understand the content of this piece.

5 、 Put Stylesheets at the Top

We know that css,Cascading Style Sheets (cascading style sheets). Cascading means that the back css can cover the front css, and the high-level css can cover the low-level css. Browsers such as ie,firefox will not render anything until the css is fully transferred. The problem with putting stylesheets at the bottom of the page in many browsers, such as IE, is that it prohibits the sequential display of web content. Browsers block display so as not to redraw page elements, so users can only see blank pages. Firefox does not block display, but this means that some page elements may need to be redrawn after the stylesheet is downloaded, which leads to flickering problems. So we should get the css loaded as soon as possible. In fact, many websites also do this, of course, there is a need for split-screen display of the site, in order to let users see the first screen page displayed as soon as possible, can also be placed separately, of course, here according to the specific project needs to be discussed. In fact, the author of the project is also divided into three css files, such as delayed display ads, we in order to improve the css loading speed, but also independently placed at the bottom of the page.

6 、 Put Scripts at the Bottom

Reason: first, prevent the execution of the script script from blocking the download of the page. In the process of the page loading, when the browser reads the js execution statement, it will certainly explain it all and then read the following. The logic of the browser is that js may execute location.href or other functions that may completely interrupt the process of the page at any time, that is, it will have to wait until it is finished before loading. Therefore, putting it on the page * can effectively reduce the loading time of the visual elements on the page. Second, the second problem caused by the script is that it blocks the number of parallel downloads. The HTTP/1.1 specification recommends that browsers have no more than 2 parallel downloads per host (IE can only be 2, other browsers such as ff are set to 2 by default, but the new ie8 can be up to 6). So if you distribute image files to multiple machines, you can achieve more than 2 parallel downloads. However, when the script file is downloaded, the browser does not start other parallel downloads.

7 、 Avoid CSS Expressions

Minimize or not use css expressions, but most of them can be implemented in js.

8 、 Make JavaScript and CSS External

Writing css and js on the page content reduces 2 requests, but also increases the size of the page. Our website has cached static files, so there are no extra http requests.

9 、 Reduce DNS Lookups

A DNS parsing process takes 20-120 milliseconds, and the browser will not download anything under the domain name until the dns query is completed. So reducing the dns query time can speed up the loading speed of the page. Yahoo recommends that the number of domain names contained in a page should be limited to 2-4 as many as possible. This requires a good plan for the page as a whole. At present, we are not doing well at this point, especially for websites that rely solely on Guangzhou revenue, many advertising delivery systems have dragged us down, and front-end engineers are helpless.

10 、 Minify JavaScript

The effect of compressing js and css is obvious, reducing the number of page bytes. Our front-end department, also has a special back-end, in order to provide tools for front-end development, rapid development. Although Js is compressed and reduces readability, the tool can restore it during debugging, that is, it can call the local one. It should be praised here, ha ~ ~

11 、 Avoid Redirects

Redirection takes time. Of course, this is just an example, there are many reasons for redirection, such as lack of / etc., those who are interested can study it.

12 、 Remove Duplicate Scripts

13 、 Configure ETags

14 、 Make Ajax Cacheable

I won't go into detail one by one.

And then there is the problem of seo.

1. Label semantics. Provide search engine friendly tips so that each html tag has its own meaning and function, so that the crawler understands what you are writing about. Like here.

Our NetEase Finance and Economics words are not actually displayed on the page, but we actually wrote the code and then used the style to hide it. Another example is:

Slide switching, perhaps the numbers here have no practical role, and do not need to be displayed on the page, many times we ignore not to write, but also to make the text does not appear in the page (such as setting the text-indent value to negative). In fact, it is not, I think we need to write it, so that others (or machines) can easily understand our true intentions. It has to be mentioned here that some aspects of the project are deliberately opposed to the semantics of tags, such as here:

You've never seen a tag like _ ntesquote_. In fact, there is a large number of tags on this page, so that js can get the tag uniformly, send a request at one time, obtain asynchronous data, and reduce the backend load.

2. Weight control. Search engine will divide the page focus according to the page weight we set, for example, h2~h7 bar, its weight decreases in turn, generally H2 is an important element in the page, here can be set to the logo of the site or its description text, but should not be too much, too much, the search engine does not know which page is important.

This is the end of the content of "what is the front-end development method of NetEase Finance and Economics web". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.