A brief discussion on front-end network, JavaScript optimization and development tips
|
1. Network Optimization YSlow has 23 rules. These dozens of rules are mainly aimed at eliminating or reducing unnecessary network delays and compressing the data that needs to be transmitted to a minimum. 1) Merge and compress CSS, JavaScript, and images, and cache static resources on CDN By using the build tool Gulp, you can do the merging and compression at the same time during development. The reason for merging and compression is that HTTP 1.x does not allow multiple response data on a connection to arrive interleaved (multiplexing), so one response must be completely returned before the next response can begin transmission. This means that even if the client sends two requests at the same time, and the CSS resource is ready first, the server will send the HTML response first and then deliver the CSS.
The purpose of using CDN is to allow users to use the nearest resources when accessing, thus reducing the round-trip transmission time. HTTP2.0 improves HTTP1.x in many aspects. 2) Put CSS at the top and JavaScript at the bottom CSS can be downloaded in parallel, while JavaScript will block after loading. But there are always exceptions. If you put the inline script after the style sheet, it will significantly delay the download of the resource (the result is that subsequent resources can only start downloading after the style sheet is downloaded and the inline script is executed). This is because inline scripts may contain code that depends on styles in the style sheet, such as document.getElementsByClassName(). <head>
<link rel="stylesheet" href="css/all-normal.css" type="text/css" />
</head>
<body>
<div id="content"></div>
<script>
var content = '';
for(i=1; i<1000000; i++)
content += 'Write to page';
document.getElementById('content').innerHTML = content;
</script>
<img src="images/ui.png" />
</body>Let's check it out through Chrome's tools:
3) Optimize DNS resolution and reduce redirection When doing a "Goddess Selection Activity", you need to access the user's openid in WeChat. WeChat needs to go through several steps to obtain the user's basic information: First get the code, then get the openid through the code, and finally jump to access the static page. Since the company has divided its business into multiple groups, the three short steps actually require the cooperation of three groups and the redirection of multiple domain names. The following figure is a waterfall chart before optimization, but it is not the worst case. Sometimes it takes more than 10 seconds to access a static page, which is totally unacceptable. In the following figure, 4 domain names will be redirected:
Instead of jumping to the index domain name, it directly jumps to the WeChat operation domain name, reducing the jump of one domain name. The codes of each group were further optimized, but the effect was still not ideal, and it was only a few seconds faster. Finally, I found that the DNS resolution took too much time when interacting with WeChat's server! As a last resort, add a record in the server's host and point directly to it by IP. The following figure shows the final optimization result. Although it cannot be opened in seconds, it is at least acceptable:
2. JavaScript Optimization 1) Image preloading When doing an "Akina Mountain event", image preloading was used. There are over 120 images in this campaign. The process is very simple, just answer the questions, comment on the results, and then share them.
It would be a stupid idea to load so many images at once, so we finally decided to load some common images first when the page loads. When answering questions, the current page pre-loads the images from the following pages to prevent the images from not being displayed when the page is accessed. The images are also merged appropriately. Put the website address in gtmetrix.com test. The following is the final waterfall chart. You can find that the images are behind other static resources, so that the page can be displayed to users as soon as possible:
The optimization is far from over. After simulating good 2G, good 3G and 4G in Chrome, the results are not ideal. good 2G:
good 3G:
4G:
2) Reduce branches When writing business logic, logical judgments such as if else and switch are often used. If so many judgments are made every time, it is easy to affect performance. So there are ways to avoid too much judgment. 1. Lazy Mode I saw this when I was reading "JavaScript Design Patterns". Reduce repetitive branch judgments each time the code is executed, and shield the branch judgments in the original object by redefining the object. There are two types of lazy mode: the first one is to redefine the object method immediately after the file is loaded, and the second one is to redefine the method object when it is used for the first time. The company had a page to provide to a third-party APP, but eventually found that the third-party APP could not use localStorage cache, so it had to use a compatible method. But in order to avoid making judgments every time a method is referenced, redefine it immediately after loading: var getFn = function() {
if (sore.enabled)
return sore.get;
return cookie.get;
}();
var setFn = function() {
if (sore.enabled)
return sore.set;
return cookie.set;
}();2. Establish mapping relationship Pop-up box prompts are often needed on the page, so I made one myself later, but there are many styles of pop-up boxes. If you use the simple factory mode to create it, you will inevitably have to use the switch branch judgment, and then you can directly assign different keys, and you can also cache it and initialize it only once.
/**
* Pop-up box singleton mode */
var factories = {};
var DialogFactory = function(type, options) {
if (factories[type])
return factories[type];
return factories[type] = new iDialog(options);
};
/**
* Prompt box*/
var Alert = function(content, options) {
var d = DialogFactory('alert', options);
//Other logic omitted return d;
};
/**
* Confirmation box */
var Confirm = function(content, options) {
var d = DialogFactory('confirm', options);
//Other logic omitted return d;
};
3) Asynchronous loading of third-party code Third-party codes, such as Baidu Statistics, WeChat SDK, etc., can be added after the business resources are loaded. /**
* Baidu statistics settings */
util.baidu = function(key) {
global._hmt = global._hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?" + key;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
};4) Cookies and localStorage cache With caching, you can reduce communication with the server and perform operations locally. The company has a business of checking traffic violations. After adding a vehicle locally, when entering the page again, you need to be able to directly select the vehicle you added in advance. The best way is to cache it locally after adding it, and directly retrieve it the next time you enter.
I would prefer to use localStorage. The following table is a comparison:
For local storage, the previous history is roughly as shown below:
In terms of browser compatibility, localStorage is also supported by IE8.
5) Event delegation Using event delegation allows you to avoid adding event listeners to each specific node. Event listeners are added to their parent elements and triggered to execute through event bubbling. During development, it is common to add elements dynamically. If you rebind the event every time, there will be a lot of redundant operations, but if you bind it to the parent of this element, you only need to bind it once. document.getElementById('ul').onclick = function(e) {
var e = e || window.event,
tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
tar.style.background = 'black';
}
}6) Throttling and debounce Throttling: Preset an execution cycle. When the time of calling the action is greater than or equal to the execution cycle, the action is executed and then the next new cycle is entered. For example, the mousemove event, the resize and scroll events of the window object. Debounce: The action will be executed n milliseconds after it is called. If the action is called again within n milliseconds, the execution time will be recalculated. For example, text input keydown event, keyup event, autocomplete, etc. The biggest difference between throttling and debouncing is the way the final execution time is calculated. There are two built-in methods in the famous open source tool library underscore. When working on a system within the company, the user hopes to fix the first column to the far left when scrolling the table left or right for easy viewing. In order to make the operation smoother, I used throttling here. Some browsers will experience lag, so the cycle time needs to be increased.
3. Tips 1) Print variables in the phone When moving pages, you often need to debug fields, but you can't use console.log. Every time you alert, you can't see the content when you touch the object. I can only write a small method to print it out, JSON.stringify, which can easily implement the function. var print = function(obj, space) {
space = space || 4;
var html = JSON.stringify(obj, null, space);
html = html.replace(/\n/g, '<br>').replace(/\s/g, ' ');
var pre = document.createElement('pre');
var div = document.createElement('code');
pre.style.cssText = 'border:1px solid #000;padding:10px;background:#FFF;margin-bottom:20px;';
div.innerHTML = html;
pre.appendChild(div);
var body = document.querySelector('body');
body.insertBefore(pre, body.children[0]);
};
print({a:1, b:'demo', c:{text:'content'}});
2) Chrome plugin JSON-handle A lot of the data returned by the server is in JSON format. Usually, after it is written, an interface will be given to you, and a few demo parameters will be given to you. When opened in a browser, it is a string of characters, but if you want to show it to others, you have to format it. This plug-in is used for people to see it.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: HTML realizes real-time monitoring function of Hikvision camera
>>: JavaScript to implement voice queuing system
Recommend
The meaning of status code in HTTP protocol
A status code that indicates a provisional respon...
WeChat applet wxs date and time processing implementation example
Table of contents 1. Timestamp to date 2. Convert...
Front-end state management (Part 2)
Table of contents 1. Redux 1.1. Store (librarian)...
Detailed explanation of how to implement login function by combining React with Antd's Form component
Table of contents 1. React combined with Antd to ...
Solution to the problem of eight hours difference in MySQL insertion time
Solve the problem of eight hours time difference ...
JavaScript to achieve simple drag effect
This article shares the specific code of JavaScri...
JavaScript Factory Pattern Explained
Table of contents Simple Factory Factory Method S...
Share JS four fun hacker background effect codes
Table of contents Example 1 Example 2 Example 3 E...
Graphic tutorial on installing CentOS7 on VMware 15.5
1. Create a new virtual machine in VMware 15.5 1....
MySQL5.7.03 Replacement of higher version to MySQL 5.7.17 Installation process and solutions to problems found
1. How to install? 1. [Run] -> [cmd] to open t...
Vue data two-way binding implementation method
Table of contents 1. Introduction 2. Code Impleme...
Three ways to implement text color gradient in CSS
In the process of web front-end development, UI d...
HTML validate HTML validation
HTML validate refers to HTML validation. It is the...
The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked
Three functions: 1. Automatic vertical centering o...
React uses antd's upload component to implement the file form submission function (complete code)
I have just started using react to do projects, a...