Home > Article > Web Front-end > Deeply understand why js sometimes fails when placed in the head

Deeply understand why js sometimes fails when placed in the head

迷茫Original: 2017-03-26 17:25:231264browse

1. I encountered a strange problem when writing js today. The written js was placed in the body for execution, but it had no effect when placed in the head. Why did this happen?

Look at the invalid code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
  .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
  </style>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    $(".login").click(function(){
            alert(1);
            }); </script>
 </head>
 <body>
   <input type="text" class="pass" />
   <p id="enter" class="login"> 登录</p>
 </body></html>

2. Solution: Put the js code in the body, or use the window.onload = function(){} code package, and then execute it after the document is loaded. It is not recommended to put it in the head in the future.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
  .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
  </style>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){
    $(".login").click(function(){
            alert(1);
            });
  }    
 </script>
 </head>
 <body>
   <input type="text" class="pass" />
   <p id="enter" class="login"> 登录</p>
 </body></html>

3. Reason:

Because the document has not been loaded yet, js will not work after reading js. If you want to use it in the head, use window.onload = function(){/ /Wrap your code here}

js can be divided into external and internal. External js is generally placed in the head. The internal js is also called the JS script of this page.
The internal js is usually placed in the body. There are many purposes for doing this:

1. Do not block the loading of the page (in fact, the js will be cached ).

2. You can directly operate dom in js. At this time, dom is ready, that is, it is guaranteed that dom exists when js is running.

3. The recommended way is to place it at the bottom of the page and listen to window.onload or readystate to trigger js.

4. Extension:

The js in the head will block the transmission of the page and the rendering of the page. The JavaScript in the head needs to be executed before starting to render the body, so try not to place JS files in the head. You can choose to introduce and execute JavaScript when the document is completed, or after a specific block. The JavaScript in the head needs to be executed before starting to render the body, so try not to place JS files in the head. You can choose to introduce and execute JavaScript when the document is completed, or after a specific block.

So the js in the head must be executed first before rendering the body page. In order to prevent the js script introduced by the head from blocking the DOM parsing work of the main parsing engine in the wanderer, the general principle for DOM rendering is that the style is at the front, the DOM document, and the script at the end. Follow the order of parsing first, then rendering, and then executing the script.

The above is the detailed content of Deeply understand why js sometimes fails when placed in the head. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of Array object method attributes in javacsriptNext article：Summary of Array object method attributes in javacsript

See more

Deeply understand why js sometimes fails when placed in the head

Related articles