Read high-performance website building Guide (II)

Article 7 rule: Avoid applying CSS expressions. I am not familiar with CSS expressions, but I am not familiar with them directly. However, when I use CSS expressions to modify page styles, it may cause repeated operation of expressions, this reduces the execution efficiency. For example, you can use CSS expressions to call JavaScript Functions to perform dynamic Dom operations.

Article 8 rules: use external JavaScript and CSS. Using inline JavaScript and CSS files can indeed increase the file loading speed. The application reduces HTTP requests and does not require parallel loading. However, external JavaScript and CSS files can be used for caching and less network transmission. Currently, there are many projects that use a large number of Js for logic processing. External JS and CSS files also increase the code reuse rate. Of course, the book still shows how to use both internal and external files to load at the same time, that is, using Dom operations to dynamically reconnect link and scrip nodes, and download CSS and JS files, this method is called post-onload download (post-onload download) in the book. I personally used this method to implement dynamic modular loading of JS files.

Article 9: Reduce DNS lookup. If a website address is converted to a fixed IP address, it is cached by the browser and the operating system. By setting the DNS Cache survival time (time-to-live, TTL) and HTTP keep-alive, which can reduce DNS lookup and improve request response efficiency. At the same time, using keep-alive will calculate the Content-Length. For scenarios that are not easy to calculate the Content-Length, keep-alive may need to be disabled.

Article 10 rule: streamline JS files. This is different from the compression component (rule 4) in that it deletes useless code (comments, blank spaces) in the file and submits the use of jsmin. Obfuscation corresponds to streamlining (Dojo compressor mentioned in the book). obfuscation will replace code variables and other variables, which can also be streamlined, but the effect is not obvious. Obfuscation also increases the workload (deployment and debugging). Therefore, we recommend that you only streamline the obfuscation. Yui compressor is mentioned in the previous file. It should be a tool for streamlining and obfuscation of JS and CSS.

11th rules: Avoid redirection. The book provides an introduction to the performance damage caused by redirection, and provides an alternative solution for some redirection scenarios. What has a profound impact is the use of Referer to track outbound information.

12th rules: Remove duplicate scripts. Repeated scripts add HTTP requests.

13th rules: Configure etag. Etag is an enhancement of IF-modified-since (if-modified-since can only be accurate to seconds). If-None-match information is added to the HTTP header. However, when the etag is in the cluster environment, the cache becomes invalid. Therefore, you need to start or disable etag based on the actual situation.

14th rules: Make Ajax cacheable. Get Ajax requests can be cached, so it is appropriate to enable Ajax request caching to reduce HTTP requests. For example, if disablecaching: false is configured in extjs in reque mode, Ajax requests in get mode can be cached.

Chapter 2 evaluates the front-end performance of multiple websites and introduces the yslow tool which can be integrated into firebug. Of course, you can also choose Google pagespeed.

In addition to the above four rules, yahoo also has a wider range of front-end optimization rules. (The author of this book is also a Yahoo engineer .)

Summary: I personally think that the application of compression, streamlining, and caching is very important to non-professional front-ends and easier to implement. cache is especially important. Use cache, you need to understand the relevant HTTP headers, the meaning of the corresponding commands, the logic processing process in the cache process, and the impact of the browser on the cache (such as F5, crtl + F5, address bar press enter, and back ).