"JavaScript DOM programming (Second Edition)" the art of reading notes

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Read the book the fifth chapter best practice regarding the use of JavaScript, most of the previous recommendations are heard, but after reading experience a deeper.

1,To prevent the abuse of JavaScript

“Wherever you want to by JavaScript change which webpage behavior, must look before you leap. First to confirm this webpage: increased this additional behavior is really necessary? ”

Personal opinion, this sentence the author on the current almost nowhere without JavaScript to enhance the Web page interaction experience time, can be understood as should be appropriate to use JavaScript, and not because of the use of the cool effect script lead webpage loading slowly or compatibility range and concentrate on trifles and neglect essentials, causes the user to be unable to browse and use the web site.

2,Graceful degradation

Graceful degradation is when the user disables browser JavaScript or your browser does not support JavaScript (there), should let users can still normal browsing the web.

Just to see this problem, feel the situation is almost negligible, so read some discussion on this issue (knowledge) and post "JavaScript not available Problem Inquiry", and take the blog home page to do the experiment, namely the browsing webpage to disable the JavaScript condition, although unable to comment on the blog unable to display the classification effect, of course, no advertising, but the main function (see Bowen, page Jump) can be used in normal.

Then we can draw the conclusion: when considering a smooth degradation, according to need at least should guarantee that the main function of the website can be normal use. On the blog, the blog is.

3,Disable "javascript:" pseudo protocol and embedded event handling function

Although the use of this two kinds of writing in HTML, not bring any serious problem, but it will prevent graceful degradation (webpage inconsistent behavior), and the script writing is confusing, increases the code maintenance difficulty.

4,Performance considerations

Best practice about performance into account, is very easy to understand.

As little as possible to access the DOM and minimize the marker ”. Less access to DOM because the query DOM operations very expensive. Repeat DOM multiple function query should reconstruct, extraction as global variables or parameters are passed directly as. Reducing the mark can be reduced the size of the DOM, thereby reducing the specific elements in the DOM tree search time.

With the script”. Combined with the external script file, can be reduced while loading the page request number. By observing the Chrome developer tools Network label, can clearly see the loading webpage request number and time, the request of my blog, third party Baidu share plug-in is the most slow load, of course, the overall load time is acceptable. But when the referenced document excessive, or to rely on third party plugins for slow, will the whole page has been loaded state, gives the impression that the webpage loading slowly, experience will become worse.

In addition, “ script in the markup of position on the page first loading time also has a great effect on ”. Examples like bootstrap, reference JS plug-in all on the page of the tail, and illustrated.

Because according to the HTTP specification, the browser each time from the same domain can only download two files at the same time, but in the script during download, the browser will not download any file, even from different domain name file will not download, all other resources have to wait until the script is loaded; and we will usually the script file on the block, the block in the script will cause the browser could not be loaded in parallel to other documents (such as a picture or other scripts).

All <script> label is placed at the end of the document, </body> tag, faster, can make the page change because of this, the loading scripts, the window object's load event still can perform various operations on the document.

One last piece of advice is that compression script, this view many, usually with a suffix of.Min.js script file.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Upton at November 16, 2013 - 1:23 AM