【Foreword】
The biggest part that affects user access is the front-end pages. Websites are generally divided into two: front-end and back-end. We can understand that the background is used to realize the functions of the website, such as: realizing user registration, users can comment on articles and so on. And what about the front end? In fact, it should be a function of the performance.
And what is the purpose of our website? Isn't it just to get the target group to visit? So we can understand that the front end is the real contact with the user.
In addition to the need for performance optimization in the background, in fact, the front-end pages need to work hard on performance optimization. Only in this way can we bring a better user experience to our users. Not only that, if the front-end is well optimized, he can not only save costs for the enterprise, but he can also bring more users to users because of the enhanced user experience. Having said so much, how should we optimize the performance of our front-end pages?
【Introduction】
The front-end pages mainly include xhtml, css, and js. In fact, xhtml is the content mentioned in reality, the content of the page: text, pictures, flash, video, etc.
And what can front-end developers control? That is the code of xhtml, css, js and the corresponding decoration (background) pictures. Here's what I'll say based on my own experience:
Mainly divided into structural semantics, optimization of the number and size of css and js files, optimization of the number and size of background images, and optimization of the size of content images
【main content】
1. Advocate front-end development engineers to achieve structural semantics when writing xhtml.
The structure mainly includes two parts, head and body, but we often say that the semantics of the structure is mainly the tags in the body, but I will briefly talk about the head here. The head actually includes some useful for our seo. Some things, such as title, Description, Keywords, these things are helpful when the spider crawls, of course, there are others, I will not explain them one by one here, such as setting cache and some other information.
Then there are many tags in the body. I think as a qualified front-end developer, you should be familiar with them, such as the use of tags such as div, span, h, ul, ol, dl, p, etc. It should be very reasonable, and it is very important to pay attention to the fault of the h tag and the use of the h1 tag.
At the same time, do not appear inline styles and events such as style and onclick in our structure. I hope everyone can pay attention to the separation of structure from performance and behavior.
(PS: The benefits of tag semantics: 1. Beneficial to search engines; 2. Needless to say about the role of well-structured HTML in teamwork; 3. It is beneficial to blind screen readers. As for how to achieve tag semantics It depends on personal understanding. I also feel vague in this regard, and it is estimated that it has a certain relationship with personal habits. In short, Mr. Zou Huibin thinks that my labels are not semantic.)
2. Optimization of the number and size of css and js files
As for the optimization of css and js, it is generally recommended that css and js be externally linked. However, if your page has a lot of content and the designer makes the whole effect more expensive, I am afraid there will be a lot of CSS. In this case, you must plan your CSS well and use abbreviations as much as possible, so that you can Reducing the size of CSS files, then making corresponding planning for CSS can also reduce the number of CSS and HTTP requests, and the same is true for JS.
(PS: Reducing repetitive code, code reuse, is particularly important here)
3. Optimization of the number and size of background images
When we restore the designer's design draft to a static page, unless all the decorations on the page are color blocks, the content is all text, and there are no pictures, if this is not the case, then we need to optimize the pictures. Of course, there is nothing we can do about the content picture, because it belongs to the content part. Generally, it is due to editing. Of course, I still have a small suggestion. If we need to have content pictures on our website, I hope the editor can add After they are optimized, they will upload and tell me the method in a while. Next, I will talk about how to deal with our modified (background) images as front-end developers.
Since we have a large number of background images, this will affect the server and increase the number of http requests. Do we have a good solution? The answer is yes, if you are a qualified front-end developer, you should be clear that when our CSS defines the background, the background can be positioned by coordinates. In this case, we can combine these backgrounds , which can reduce the number of http requests. At the same time, when we integrate the background, we also need to consider the quality of the image and the size of the image. I have written a corresponding blog post before.
(PS: It is recommended to use PNG8 format images combined with css sprite. For the same image, PNG8 format will be relatively smaller than GIF)
Fourth, the optimization of the size of the content image
In fact, I have already mentioned the problem of content pictures, so I am here to tell you that a relatively simple method is to use a tool provided by Yahoo. He is smushit: http://www.smushit.com/
However, I think his tool is quite troublesome for the content pictures we need to publish, but he can optimize the purpose of optimizing the pictures. As I said at the beginning, the smaller the picture, the faster the download speed of our users. Server bandwidth can also play a role in saving.
The above are some of my simple views on the performance of front-end pages. Of course, the structure, performance, and behavior mentioned in web standards, xhtml, css, and js that we talk about in our work actually have many things that we need to learn, such as structural semantics. Transforming it is a subject of in-depth research, as is performance optimization, but only if we continue to dig and rise, we can make progress. Here is a simple suggestion for my front-end development products:
1. The pages we restore can pass the verification of http://validator.w3.org. Of course, css hopes to pass the verification of http://jigsaw.w3.org/css-validator/validator, but sometimes due to the need Compatible with multiple browsers, it will be affected by hacks, and CSS is not mandatory.
2. As a front-end, I think I should know slow. If you don't know, you can look at the articles I wrote before. You think your static pages should be able to pass the classic (V1) level detection of yslow2.0, and I think the detection result should get an A.
3. Your background images are guaranteed not to exceed 3, your css files should not exceed 2, and your js files should not exceed 3. And it complies with some regulations of web standards, css is placed in the head, and js files are placed before or after </body>.
4. Of course I want you to be able to do a nudity check on your page. In fact, it is to test whether your structural semantics is effective.
Nude inspection: just remove your css and js, check your html, and see if you can understand the content.
5. Check whether your h tag is faulty.
(PS: Just follow h1, h2, h3, h4.... don't miss h2 in the middle)
6. It is recommended to add text-align: center to the body.
7. Of course there are many more, such as what id, the name of the class, these things, I think it should be done in your team.
(PS: Here we have to take a good look at the weight and priority of the clsaa selector)
8. As a large website, the home page uses an inline style sheet, which can reduce the number of http requests and prevent streaking. Of course, other pages need to use external style sheets, so as to facilitate maintenance.
Because as a large website, his homepage traffic is very large, so they will do a lot of processing, such as:
Put style sheets at the top and scripts at the bottom of the page
Avoid CSS Expressions, use external JavaScript and CSS
Cut JavaScript and CSS, use <link> instead of @import
Avoid filters, eliminate duplicate scripts, reduce DOM access, develop smart event handlers
The best solution is to load your stylesheets in the document <head /> according to the HTML specification.
For homepages with high pageviews, there is a technique that balances the reduction in HTTP requests from built-in code with the benefits of caching through the use of external files. One of them is to have JavaScript and CSS built into the home page, but dynamically download external files after the page is downloaded, and when these files are used in subpages, they are already cached in the browser.
cookie:
Reduce cookie size
Use a cookie-free domain name for page content
picture:
Optimize images
Optimize CSS Spirite
Don't scale images in HTML
favicon.ico is small and cacheable
mobile application:
Keep a single content smaller than 25K
Pack components into compound text
【Conclusion】
This article talks about editing. In fact, according to the companies I have visited, many companies are not only editors, but even developers. They don't know enough about xhtml planning, so there are often some pages that have been launched online. problems, such as comments, or the labels are not closed, etc., so I suggest that each company can hold some meetings about communication. In this case, various positions can interact with each other. In fact, it can also be called training. Only in this way can we build produce a good product.
.