Front-End optimization

2. Server aspects:
   
   1. Improve their server quality, bandwidth and other aspects
   2. Turn on browser caching to reduce HTTP requests
   3. Turn on gzip compression
   4. Use Content distribution Network CDN
4. HTML interface
   
   1. CSS files placed in the Head,js file are placed at the end of the HTML. Download a certain JS when the other tasks are paused, you need to wait for this JS download and after the completion of the download of other
   2. Inline CSS Not applicable
   3. Minimize labels, do not use more than one label, such as clear floating with: after
   4. JS delay loading, asynchronous loading, using defer tags, async= "true"
   5. Reduce DNS queries. Each reference to a file from outside, there will be a DNS query, generally to the speed of the first visit to the site will have an impact
   6. Avoid 404, download JS encountered 404 is a big problem
   7. Avoid empty src, such as src= ""
   8. Reduce HTTP requests: Picture Sprite technology, combined with CSS, JS code
6. Code aspects
   
   1. Project finally compression css,js with compression tool
   2. CSS class should not be too long, to have a clear hierarchical relationship
   3. JS operation style When using class,html do not use inline CSS and JS code
8. Optimization of JS
   
   1. Concatenation of strings: using + = is inefficient, you can use the join () method of the array
   2. In particular, do not use for (in) when using loops, while than for (;;) A little higher efficiency.
   3. Local variables are accessed faster than global variables, and global variables are avoided as much as possible
   4. Each operation of the DOM element is expensive, so do as little as possible. For example, if there is a concatenation of strings in the for loop, and then use the innerHTML operation, the innerHTML should be placed outside the for loop.
   5. When working on a DOM node, there is a local variable in the DOM node
   6. About string traversal, using regular expressions first
   7. Variable type conversions
      
      • Converts a number to a string ("" +) >string () >.tostring () >newstring ()
      • String converted to digital parseint ()
      • Conversion between floating-point and integral Types Math.floor () or Math.Round ()
   8. Use Direct amount var a = [] faster than var a = new Array ()
   9. Creating a DOM node is best not to write the string directly, but should call the Createlement () method

Front-End optimization