JavaScript DOM The Art of Programming (2nd Edition) Reading Notes (Best Practices in JavaScript)_Javascript Skills

1. Prevent the abuse of JavaScript "No matter which web page you want to change the behavior of through JavaScript, you must think twice before doing it. First, confirm: Is it really necessary to add this additional behavior to this web page?"

Personally, I think that in the current era when JavaScript is used almost everywhere to enhance the interactive experience of web pages, this sentence of the author can be understood to mean that JavaScript should be used appropriately and not cause the web page to be damaged due to the use of scripts that achieve cool effects. Slow loading or extremely poor compatibility results in users being unable to browse and use the website.

2. Smooth degradation. Smooth degradation means that when the user disables JavaScript in the browser 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 on this issue (Zhihu) and the blog post "Exploring the problem of JavaScript being unavailable", I also did an experiment on the homepage of the blog park, that is, browsing the web with JavaScript disabled. I found that although I could not comment on the blog, the classification effect could not be displayed normally, and of course there were no ads, the main functions (viewing blog posts, page jumps, etc.) It can be used normally.

Then we can basically draw the conclusion: when considering smooth degradation, at least the main functions of the website should be guaranteed to be usable normally. For Blog Park, it means checking the blog.

3. Disable "javascript:" pseudo-protocol and inline event handling functions. Although using these two writing methods in HTML will not cause any serious problems, it will prevent smooth degradation (inconsistent web page behavior) and make The way the script is written is confusing, making it difficult to maintain the code.

4. Performance considerations The best practices for performance considerations are still very easy to understand.

"Minimize DOM access and minimize markup". The reason for less access to the DOM is that querying the DOM consumes a lot of performance. Repeated DOM queries for multiple functions should be refactored, extracted as global variables or passed directly as parameters. Reducing markup reduces the size of the DOM, thereby reducing the time it takes to find a specific element in the DOM tree.

"Merge script". Incorporating external script files can reduce the number of requests sent when loading a page. By observing the Chrome Developer Tools Network tab, you can clearly see the number of requests and the time it takes to load a web page. The picture below shows the request for my blog. The third-party Baidu sharing plug-in is the slowest to be loaded. Of course, the overall loading time Still acceptable. However, when the referenced files are too large or too large, or the third-party plug-in requests are slow, the entire page will always be loaded, giving the impression that the web page is loading slowly and the experience will be worse.



Also, "the position of the script within the markup also has a large impact on the initial load time of the page." Just like in the bootstrap example, the referenced JS plug-ins are all placed at the end of the page, and descriptions are added.


Because according to the HTTP specification, the browser can only download up to two files from the same domain name at the same time, and during the script download period, the browser will not download any other files. Even files from different domain names will not be downloaded. All other resources will not be downloaded until the script is loaded; usually we will put the script file in a block. At this time, the script in the block will cause the browser to Other files (such as images or other scripts) cannot be loaded in parallel.

Put all

• 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