As a small front-end code farmer, after the page style can be realized, I start to consider: the same effect, what method and code should I use to achieve it more standardized? Two days ago, I found two courses on the screen course network - "Front-end Performance Optimization - Basic Knowledge Cognition" and "Front-end Performance Optimization - General Cache SDK", oh, isn't this what I want to know~
reflow和repaint
Reflow : Refers to the process by which the browser recalculates the position and geometry of elements in a document in order to re-render part or all of the document. Because reflow can cause the entire dom tree to be restructured, it is a big killer of performance
repaint (repainting) : In short, it is repainting~
Relationships : position changes trigger reflow, visual changes trigger redraw. Reflow must trigger redraw, and redraw does not necessarily trigger reflow. /* This sentence is very important */
The following actions can cause reflow:
- change window size
- font-size size change
- Add or remove style sheets
- Content changes (input text in input will cause)
- Activate CSS pseudo-classes (:hover)
- Manipulate the class attribute, adding or subtracting
- js operates dom
- Calculation of offset related properties
- Set the value of style
How to reduce page reflow:
- Change together If you want to change the style of an element, you can focus all the styles on a class and change it once, instead of changing it several times.
- Please use absolute with animation effect,
because the change of absolute element has little effect on the reflow of other elements, so the element of our animation effect should be made absolute. - Avoid using table layouts (remember that it's just layout, we should still use tables for data)
- Please never use CSS expressions, performance killers, especially IE
- Change elements at the end
Because reflow is top-down, the bottom is not as good as the top, and the less we modify the information at the end, the less global impact. - When the animation moves, it is necessary to control. For
example when we drag the element, I only operate it when its x or y coordinate changes by 5px. Although this reduces the smoothness, it improves the performance.
The following actions trigger a repaint:
- change font
- Add or remove style sheets
- Content changes
- Activate css pseudo-classes, such as: hover
- script manipulation dom
- Calculate offsetWidth and offsetHeight properties
- Set the value of the style attribute
Avoid the above operations as much as possible. If it cannot be avoided, combine as many operations as possible into one operation.
Images and CSS
A normal photo is also a lot bigger than a very powerful effects library. Replacing pictures with html, css, and svg effects not only requires very little space, but also works well on multiple devices and multiple resolutions. And css animation can get callback, picture animation can't get callback.
picture:
- jpg: Small in size, full name jpeg (use scenario: rich in color) png: Portable network graphics format, large in size (use scenario: clear, display rich in color)
- gif: Image interchange format, generally fully transparent or fully opaque, semi-transparency is not supported (use scenario: more general animation is required)
- svg: bloomable vector graphics, small size
- apng, webp format appeared late and has not been adopted by web standards
Image processing CSS-Sprites, Sprite image
Sprite image is to combine multiple images into one, and then use backgroung-position to locate and display it, which will reduce the number of http requests for images.
Here are some tools:
http://alloyteam.github.io/gopng — use directly
http://fis.baidu.com
http://gruntjs.com
The loading channel of the browser is limited. JS drawing DOM nodes will block the channel. Loading resources such as large images will occupy the channel for a long time, resulting in slow page loading. (That's why thumbnails are used)
Optimize the starting point
Front-end reuse: file reuse - module reuse Back-
end reuse: common interface reuse, ui module reuse, common tool api reuse
Select loading method (to improve user experience):
- synchronous loading
- Staged loading (given important information to the user first, and load unimportant information later)
Load on demand (do not load without triggering)
yahoo military regulations
https://www.cnblogs.com/xianyulaodi/p/5755079.html The following yahoo military regulations are from this blog. For details, please see the original link. These specifications, in our actual development, should be used according to the characteristics and needs of our own website.
Content section
1. Minimize the number of HTTP requests (reduce the number of HTTP requests submitted by the page)
2. Reduce DNS lookups
3. Avoid redirects (because redirects require reloading)
4. Make Ajax cacheable
5. Lazy load components (what is a What is necessary to start rendering the page? The rest of the content can wait a while)
6. Preload components (by preloading components, you can make full use of the browser's idle time to request components (images, styles, and scripts) that will be used in the future. The user When visiting the next page, most of the components are already in the cache, so the page will load faster from the user's point of view)
7. Reduce the number of DOM elements (enter in the console, view the number of DOMs on the current page, press f12 Enter
document.getElementsByTagName('*').length in the console
8. Separate components across domains
9. Minimize the use of iframes
10. Avoid 404 (because unnecessary requests are not required~)
css section
11. Avoid CSS expressions
12. Choose to drop @import
13. Avoid filters
14. Put stylesheets at the top
js section
15. Remove duplicate scripts
16. Minimize DOM access
(
Accessing DOM elements with JavaScript is slow, so to make the page more responsive, you should:
● Cache the index of elements that have been visited
● Update "offline" first Nodes and add them to the DOM tree
Avoid fixing layout issues with JavaScript
)
17. Use smart event handlers (event delegation is recommended)
18. Put scripts at the bottom
javascript, css
19. Keep JavaScript and CSS out
20. Compress JavaScript and CSS
Picture
21. Optimize pictures
22. Optimize CSS Sprite
23. Don't use HTML to scale pictures (don't use large pictures that you don't need because you can set width and height in HTML, it will take time to load)
24. Use small cacheable ones favicon.ico
cookie
25. Lose weight to cookies
26. Put components under a cookie-free domain
other
Some other knowledge, do some simple understanding
Sometimes we see that the image loading effect of some websites is different, this is because the compression algorithm of the image is different:
blur to clear - wavelet algorithm
line by line display - discrete cosine transform
For some advantages and disadvantages of the player in the website
vidwo:
Advantages: No need to download additional resources
Disadvantages : The appearance of each browser is different, you need to write your own UI to unify the style
flash:
Advantages: Good compatibility, only if you have a flash player Can be played
Disadvantages : You need to download the swf thank you file to play, the browser must have a flash player plug-in, the flash player version is fragmented, and ui customization needs to write AS
Current solution:
flowplayer has simple functions and is easy to use
https://flowplayer.org/player/
videoJs is powerful and complicated to use
http://videojs.com