Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "web front-end performance optimization summary". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. principles

Use more memory, cache or other methods

Reduce CPU computation and network requests

Reduce IO operations (hard disk reads and writes)

2. Load Resource Optimization

Consolidation and compression of static resources.

Static resource caching (browser caching policy).

Use CDN to make static resources load faster.

3. Rendering optimization

CSS in head, JS in body

Image Lazy Loading

Reduce DOM operations and cache DOM operations

Reduce DOM operations and combine multiple operations as much as possible

event throttling

Do it early DOMContentLoaded

4. example

4.1 resource pooling

a.js b.js c.js --- abc.js

4.2 cache

Control cache by connection name

Link names change only when the content changes.

4.3 lazy loading

var i = document.getElementById('img1'); i.src = i.getAttribute('realsrc');

4.4 Cache dom queries

//no cache dom for (let i = 0; i

< document.getElementsByTagName('p').length; i++) { } //缓存dom var p = document.getElementsByTagName('p'); for (let i = 0; i < p.length; i++) { } 4.5 合并dom插入 var listNode = document.getElementById('list'); var flag = document.createDocumentFragment(); var li; for (let i = 0; i < 10; i++) { li = document.createElement('li'); li[xss_clean] = i; flag.appendChild(li); } listNode.appendChild(flag); 4.6 事件节流 监听文字改变事件，无操作100毫秒后执行操作，不用每次触发。 var textarea = document.getElementById('ta'); var timeoutId; textarea.addEventListener('keyup',function(){ if(i){ clearTimeout(i); } timeoutId = setTimeout(() =>

{ //Operation }, 100); });

Event throttling is mainly used to trigger events with high frequency, and a buffer trigger event is set.

supplementary

asynchronous loading

Non-core code asynchronous loading-asynchronous loading method-difference

1. Dynamic script loading

Created with JS

2.defer

3.async

Without defer or async, the browser loads and executes the specified script immediately,"immediately" meaning before rendering the document elements under the script tag, that is, without waiting for subsequent document elements to be loaded. With async, the process of loading and rendering subsequent document elements takes place in parallel (asynchronously) with the loading and execution of script.js. With defer, the loading of subsequent document elements will occur in parallel (asynchronously) with the loading of script.js, but script.js execution will complete after all elements have been parsed and before the DOMContentLoaded event is triggered.

Another thing to remember about defer is that it executes scripts in order of loading.

Scripts marked async are not guaranteed to execute in the order in which they are specified. For it, scripts are loaded and executed immediately, so no matter what order you declare them, they will execute as soon as they are loaded.

browser cache

Browser cache-Classification of cache-Principle of cache

Cache is a locally existing copy of an html file,

strong cache

Found cache directly used.

Expires: absolute time, determine whether the client date exceeds this time Cache-Control: relative time, determine whether the access interval is greater than 3600 seconds//will not communicate with the server before the set time//if both are sent, the latter shall prevail

negotiation cache

Ask if the server cache can be used, and determine whether it is used.

Last-Modified/If-Modified-Since

For the first request, add Last-Modified to the header of the response. For the second request, add If-Modified-Since to the header of the request and compare it with the last modified time of the server. If there is no change, 304 Not Modified will be returned, but the resource content will not be returned. If there is any change, the resource content will be returned normally. After the browser receives the 304 response, it loads the resource from the cache. If the negotiation cache misses, the browser loads the resource directly from the server. The Last-Modified Header is updated when reloading.

Etag/If-None-Match

These two values are unique identification strings for each resource generated by the server and change whenever the resource changes; the determination process is similar to Last-Modified/If-Modified-Since, which can be accurate to a higher level of seconds.

"Web front-end performance optimization summary" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.