JavaScript DOM Programming Art (2nd edition) reading notes (best practice for JavaScript) _javascript tips

1, to prevent misuse of JavaScript "no matter what Web page you want to change through JavaScript, you must think twice before you do it." The first thing to confirm is: Is it really necessary to add this extra behavior to the Web page? ”

Personally, the author of this sentence in the current almost ubiquitous JavaScript to enhance the interactive experience of the Web page, you can understand that the appropriate use of JavaScript, rather than because the use of the implementation of the cool effect of the script to slow down the Web page loading or very poor compatibility of the end of the request, Causes users to be unable to browse and use the Web site.

2. Stationary degradation is a smooth degradation when users disable browser JavaScript or browsers do not support JavaScript (and also), you should allow users to still be able to browse the site normally.

When I first saw the problem, I felt it was almost negligible, so I read some discussion about the problem (know) and blog "JavaScript is not available" and took the homepage of the blog To do experiments, that is, when JavaScript is disabled to browse the Web page, found that although unable to comment on the blog, can not normal display classification effect, of course, advertising is not, but the main features (view Bowen, paging, etc.) can be used normally.

It is generally possible to conclude that the main functions of the site should at least be guaranteed to be used properly when considering a smooth degradation. For the blog Park, is to view the blog.

3, disable the "javascript:" Pseudo-protocol and embedded event processing functions Although the use of these two methods in HTML does not cause any serious problems, but it will prevent smooth degradation (Web page behavior is inconsistent), and make the script is confusing, increase the difficulty of code maintenance.

4, performance considerations on performance considerations of best practices, or very easy to understand.

"Access the DOM as little as possible and minimize markup." Dom is less accessible because querying the DOM can be very performance-intensive. 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, reducing the time to find specific elements in the DOM tree.

Merge Scripts. Merging external script files reduces the number of requests that are sent when you load a page. By looking at the Chrome Developer Tool Network tag, you can see very clearly the number of requests and the time to load the page, the following figure for my blog, the third party Baidu sharing plug-in is the slowest loaded, of course, the overall load time is still acceptable. However, when the referenced file is too large, or the dependent Third-party plug-in request is slow, the entire page will always be loaded, the feeling is that the Web page loading slow, the experience will be worse.



Additionally, "the position of the script in the tag has a significant effect on the initial load time of the page". As in the case of Bootstrap, the referenced JS Plug-ins are all placed at the end of the page, and added instructions.


because according to the HTTP specification, browsers can download up to two files at a time from the same domain name, and during a script download, 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, and the script will usually be placed in a block, where the scripts can cause the browser to not load other files (such as pictures or other scripts) in parallel.

You can make a page faster by placing all <script> labels at the end of the document,</body> labels, because the Window object's Load event can still perform various operations on the document when the script is loaded. The last piece of advice for

is a compressed script, which is a lot, usually a script file with a. min.js suffix.