web_performance.md

Web Performance

DOM

1. use events delegation, instead of direct binding e.g. a table with 1000 rows, $("table").on("click", "tr", fn);

2. reduce reflow when changing DOM node 1. hide it first, then change, then display 2. clone it then change, then replace

3. when changing DOM style, do not change it one by one

4. fixed and absolute position will not reflow, use them to do layout

5. try to change DOM node at lowerst level possible

6. don't use table to do layout

Loading

1. browser cache 1. set expiry date, maximum age in the HTTP header 2. set name as fingerprint

2. proxy cache 1. Cache-control: public

3. gzip, minified

4. CDN