Knowledge points related to website performance optimization

The website performance mentioned in this article refers to the response speed of the website, which is also in line with most people's understanding of website performance: a website with fast access has good performance. On the contrary, the slower the access speed, the worse the website performance. The optimization methods summarized in this article are macro-level engineering methods and do not include methods at the micro-level language syntax. For example, syntax optimization of JS and CSS. This part also affects the performance of the website, but optimization at the language syntax level is more important. It depends on the developer's programming level.

What kind of website responds quickly? In fact, it is easy to think that the faster the website loads resources, the faster the website responds; the fewer resources the website needs to load, the faster the website responds. This corresponds to the two major directions of website performance optimization: resource caching and resource merging and compression. After the browser completes loading of resources, it needs to further parse the resources before rendering the final web page. Therefore, the browser's parsing mechanism is also a direction for website performance optimization. Various optimization methods can be classified into these three general directions.

1. Resource caching

1.1 Use CDN

to separate the static resources of the website, such as static HTML, picture Image, style CSS, script JS, etc., and deploy the static resources Using CDN can significantly speed up the loading of these resources.

1.2 Utilizing HTTP caching mechanism

HTTP caching will cache the resources loaded by the browser locally. When loading next time, as long as the cached resources have not expired, the local resources can be used directly. , reducing the number of HTTP requests and speeding up resource loading. The specific method is to set the Cache-Control parameter in the HTTP Header. HTTP 1.0 uses two parameters, Pragma and Expires, for caching, but their use is no longer recommended.

2. Resource merging and compression

2.1 Reduce HTTP requests

Use one HTTP request to load a 10M file, and split the file into 10 1M files The file is loaded in parallel with 10 HTTP requests. Which method can complete the loading faster? Since it is mentioned that reducing HTTP requests can improve website response speed, the conclusion seems to be that using one HTTP request is faster. In fact, the correct answer is: not necessarily!

I did a small experiment: there are two html files, index1.html and index2.html, index1.html uses a

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills