JavaScriptDOM programming art (version 2nd) Reading Notes (best practices for JavaScript) _ javascript skills

I have read the best practices for using JavaScript in Chapter 5 of this book, and I have heard most of the suggestions before, but I have a deeper understanding after reading this article. 1. To prevent the abuse of JavaScript, "no matter which web page you want to change through JavaScript, you must think twice. First, check whether it is necessary to add such additional behaviors to this webpage ?"

I personally think that in the current era where JavaScript is almost everywhere to enhance the Web page interaction experience, I think JavaScript should be used properly, instead, users cannot browse or use the website because the webpage loading is slow or the compatibility is poor due to the use of scripts that implement the cool effect.

2. Stable, degraded, and stable degradation: when a user disables the browser JavaScript or the browser does not support JavaScript (is there any more), the user should still be able to browse the website normally.

When I first saw this problem, I felt that this situation was almost negligible. So I read some discussions about this problem (zhihu) and the blog article "explore the unavailability of javascript". I also conducted an experiment on the homepage of the blog Park, that is, when JavaScript is disabled, I browsed the webpage and found that although I could not comment on my blog, I could not normally display the classification effect, and of course the advertisement was gone, however, the main functions (such as viewing blog posts and page jumps) can be used normally.

Then we can conclude that, when considering stable degradation, we should at least ensure that the main functions of the website can be used normally as needed. For the blog site, you can view the blog.

3. Disable "javascript:" pseudo protocol and embedded event handler. Although these two methods are used in HTML, they will not cause any serious problems, however, it will prevent smooth degradation (inconsistent web page behavior), and make the script writing method messy, increasing the difficulty of code maintenance.

4. It is easy to understand the best practices of performance considerations.

"Try to minimize DOM access and tag ". Less DOM access is because the query of DOM operations is very performance-consuming. Repeated DOM queries of multiple functions should be reconstructed, extracted as global variables or directly transmitted as parameters. Reducing the tag can reduce the DOM size and reduce the time needed to find specific elements in the DOM tree.

"Merge scripts ". Merge external script files to reduce the number of requests sent during page loading. By observing the Network tag of the Chrome developer tool, we can clearly see the number and time of webpage loading requests. In order to request my blog, the third-party Baidu sharing plug-in is the slowest, of course, the overall loading time is acceptable. However, when the referenced files are too large or the requests of third-party plug-ins are slow, the entire page will remain in the loading status. This gives people the feeling that webpage loading is slow and the experience will deteriorate.



In addition, "the position of the script in the tag has a great impact on the initial loading time of the page ". Just like in the bootstrap instance, all referenced JS plug-ins are placed at the end of the page and added instructions.


According to the HTTP specification, the browser can download up to two files from the same domain name at a time. During the script download process, the browser does not download any other files, files from different domain names are not downloaded, and all other resources are downloaded only after the script is loaded. Generally, we place the script file in the block, in this case, the script in this block will cause the browser to be unable to concurrently load other files (fragments or other scripts ).

Put all the script tags at the end of the document,Before the tag, the page can be changed faster, because in this way, when loading the script, the load event of the window object can still perform various operations on the document.

The last suggestion is to compress the script. This is often a script file suffixed with. min. js.