Css,html Performance Optimization

CSS Performance Optimizations

CSS is an important role in the layout and rendering, and beautiful pages can certainly attract users. This article is my own in the development process to summarize the CSS and performance of the relationship, there may be something wrong, I hope to be able to point out.

?

1, all the style as far as possible in the CSS file, HTML tags do not write the style property, because the browser after all the style is loaded, will not start rendering the entire page, written in the label properties will be longer browser rendering time

2. Delete the default style code

Because it affects the browser's execution time. such as: Align= "left", the default is to align

3, reduce the use of relative positioning

This can affect the browser's Repain and reflow. such as: Position:absolute

4. CSS Abbreviations

CSS abbreviations allow you to define a range of style attributes with very little code, which can greatly reduce the amount of code to achieve performance improvement purposes. such as: #ff00ff替换成 #f0f

5. Merging CSS Properties

Attribute merging reduces the amount of code and the rendering time of the browser to achieve performance improvement purposes. such as: font-size:36px; font-family:arial; line-height:48px; Font-weight:bold; Replace with Font:bold 36px/48px Arial;

6. CSS Selector

The browser is "right to left" to analyze the class, and its matching rules are matched from right to left, so the rightmost selector is the key selector. For example: #parent > a {} and #parent a {}, the browser first finds all the "a" nodes on the page and then makes further judgments: if its parent node has the ID "parent", the match succeeds. The latter browser facilitates all the "a" nodes, then steps back to its parent node, until the root node of the DOM structure (document), if there is a node whose ID is "parent", the match succeeds, otherwise continue to find the next "a" node.

Minimize the number of rules, the more rules, the slower the match

Reduce the property selector

7. Avoid using CSS expressions

The CSS expression can only be performed by IE, but it is computationally frequent, not only when the page is rendered and resized (resize), but also when the page scrolls (scroll), even when the mouse slides on the page.

8, the use of inheritance mechanism, reduce CSS

If many child nodes need to set the CSS property value, it is possible to set the CSS property of its parent node uniformly, so that all child nodes do not need to make additional settings, which accelerates the analysis efficiency of CSS.

9, the style is placed in the HTML page header loading

The browser will not start rendering the entire page until all the styles have been loaded, and the browser will not render any content on the page until the page has been rendered blank.

10. Avoid using filters

The AlphaImageLoader filter specific to IE is intended to address the existence of IE6 and previous versions that do not support translucent PNG images. However, the browser will "freeze" the browser when downloading the image in the filter and stop rendering the page. Filter also increases memory consumption. The most intolerable is that the filter style is parsed by the browser once per page element (using the filter style), rather than as a normal background image rendering mode: All elements that have used the background image are rendered once by the browser. The best solution for this situation is to use PNG8.

11, using data:image/png;base64 to replace the URL load image

The "data" type of URL format is presented in RFC2397 for some "small" data that can be embedded directly in a Web page rather than being loaded from an external file.

12, reduce the repetition of the style, multi-person development will appear when multiple people define the same style, can be detected by the browser

13, merging, compressing your CSS files, reducing HTTP requests, can be built with tools or automation.

14. Use CSS sprite to process your pictures

HTML Performance Optimizations

Page optimization is the HTML code in the Web page to make the necessary adjustments, can effectively streamline the page redundant code, speed up the page display speed, reduce the page occupy the search engine server storage space, improve user experience and search engine friendly, of course, can also better highlight the theme of the page, improve the relevance of the page. Here is what I have summed up to write the HTML code to be aware of, for reference only.

1, HTML tags have always. Reduce the browser's judgment time

2. Move the script tag to the end of the HTML file because JS will block the display of the subsequent pages.

3, reduce the use of the IFRAME, because the IFRAME will add an HTTP request to prevent page loading, even if the content is empty, loading will take time

4, ID and class, on the basis of being able to see clearly, simplified naming, in the connection word containing the keyword "-", do not use ' _ '

5, keep the uniform case, the uniform case is advantageous to the browser cache, although the browser is not case-sensitive, but the standard is lowercase

6, clear the space, although the space helps us to see the code, but each space equivalent to a character, the more space, the larger the page size, such as Google, Baidu and other search engine home page removed all the blanks can be removed, enter and other characters, which can speed up the transmission of web pages. can use the DW software to bulk delete the space between the tags inside the HTML, sublime text in Ctrl + A, and then long press Shift+tab all left-aligned, clear the beginning of the line of space

7, reduce unnecessary nesting, as far as possible flat, because when the browser compiler encountered a tag to start looking for its end tag, until it matches to display its content, so when nested a lot of open page will be particularly slow.

8, reduce the comment, because too many comments not only occupy space, if there are a large number of keywords will affect search engine searches

9, use Css+div instead of table layout, remove formatting control tags such as: strong,b,i, using CSS control

10, the code to be structured, semantic

11. CSS and JavaScript are separated into separate files as far as possible

12. Remove useless labels and empty labels

13, minimize the use of discarded tags, such as B, I and so on, although the high-version browser is backward-compatible

Css,html Performance Optimization