Discussion on the position of javascript tags in the page

Home

Web Front-end

JS Tutorial

Discussion on the position of javascript tags in the page_Basic knowledge

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:37 PM

Location Label

In the process of making web pages, we often write code similar to the following:
[html]

Copy code The code is as follows:

 
Example HTML Page 
 
< ;body> 
 
Example HTML Page 
 
< ;/body>

By convention, all <script> elements should be placed within the <head> element of the page. Please note: No matter how many external js files are referenced, the browser will parse them in sequence according to the order in which the <script> elements appear on the page. In other words, after the code contained in the first <script> element is parsed, the code contained in the second <script> will be parsed, and then the third and fourth... <br>The purpose of this approach is to place references to all external files (including CSS files and JavaScript files) in the same place. However, including all JavaScript files in the <head> element of the document means that all JavaScript code must be downloaded, parsed, and executed before the content of the page can begin to be rendered (the browser will wait until it encounters the <body> tag Only then will the content begin to be displayed). For pages that require a lot of JavaScript code, this will undoubtedly cause the browser to experience a noticeable delay in rendering the page, and the browser window during the delay will be blank. To avoid this problem, modern web applications generally place all JavaScript references in the <body> element, after the content of the page, as shown below: <br>[html] <br><div class="codetitle"> <span> <a style="CURSOR: pointer" data="92026" class="copybut" id="copybut92026" onclick="doCopy('code92026')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code92026"> <br><html> <br><head> <br><title>Example HTML Page&lt ;/title> <br></head> <br><body> <br> <br><script type="text/javascript" src=" example1.js"></script>

< ;/html>

Example HTML Page

This way, before parsing the included JavaScript code , the content of the page will be fully rendered in the browser. Users will also feel that the speed of opening the page is accelerated because the time the browser window displays a blank page is shortened.

Alternatively, you can use the defer attribute of the <script> tag to indicate that the script will not affect the structure of the page when executed, that is, the script will be delayed until the entire page is parsed before running. The code is as follows: <br>[html] <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="70000" class="copybut" id="copybut70000" onclick="doCopy('code70000')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code70000"> <br><html> <br><head> <br><title>Example HTML Page</title> <br><script type="text/javascript" defer="defer" src ="example1.js"></script>

< /head>

Example HTML Page

The actual effect of the above two writing methods is the same. However, not all browsers support the defer attribute, and some browsers ignore this attribute and do not delay the execution of the script.

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7375

Java Tutorial

1628

CakePHP Tutorial

1355

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

Details on how to turn on environment variable settings on Windows 11 Dec 30, 2023 pm 06:07 PM

The environment variable function is an essential tool for running the configuration program in the system. However, in the latest win11 system, there are still many users who do not know how to set it up. Here is a detailed introduction to the location of the win11 environment variable opening. Come and join us. Learn to operate it. Where are the win11 environment variables: 1. First enter "win+R" to open the run box. 2. Then enter the command: controlsystem. 3. In the system information interface that opens, select "Advanced System Settings" from the left menu. 4. Then select the "Environment Variables" option at the bottom of the "System Properties" window that opens. 5. Finally, in the opened environment variables, you can make relevant settings according to your needs.

Win11 startup path and how to open it Jan 03, 2024 pm 11:13 PM

Every Windows system has a startup path. If you add files or software to it, it will be opened at boot time. However, many friends don’t know where the win11 startup path is. In fact, we only need to enter the corresponding folder on the C drive. Win11 startup path: 1. Double-click to open "This PC" 2. Directly paste the path "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" into the path box. 3. Here is the win11 startup path. If we want to open the file after booting, we can put the file in. 4. If you cannot enter according to this path, it may be hidden.

Understand the location and structure of pip installation package storage Jan 18, 2024 am 08:23 AM

To learn more about the storage location of packages installed by pip, you need specific code examples. Pip is a commonly used package management tool in the Python language. It is used to easily install, upgrade and manage Python packages. When using pip to install a package, it will automatically download the corresponding package file from PyPI (Python Package Index) and install it to the specified location. So, where are the packages installed by pip stored? This is a problem that many Python developers will encounter. This article will delve into the location of the packages installed by pip and provide

Where is Kuaishou published and how to change its location? How to add a location to a video that has been uploaded? Mar 21, 2024 pm 06:00 PM

As a well-known short video platform in China, Kuaishou provides many creators with opportunities to showcase their talents and share their lives. When uploading a video, some novice creators may be confused about how to change the video posting location. This article will introduce you to how to change the publishing location of Kuaishou videos, and share some tips for Kuaishou video publishing to help you make better use of this platform to showcase your work. 1. Where is Kuaishou published and how to change its location? 1. Publishing interface: In Kuaishou APP, click the "Publish" button to enter the video publishing interface. 2. Location information: In the publishing interface, there is a "Location" column. Click to enter the location selection interface. 3. Change location: In the location selection interface, click the "Location" button to view the current location. If you want to change the location, click "Location"

How to search for text across all tabs in Chrome and Edge Feb 19, 2024 am 11:30 AM

This tutorial shows you how to find specific text or phrases on all open tabs in Chrome or Edge on Windows. Is there a way to do a text search on all open tabs in Chrome? Yes, you can use a free external web extension in Chrome to perform text searches on all open tabs without having to switch tabs manually. Some extensions like TabSearch and Ctrl-FPlus can help you achieve this easily. How to search text across all tabs in Google Chrome? Ctrl-FPlus is a free extension that makes it easy for users to search for a specific word, phrase or text across all tabs of their browser window. This expansion

Location of Origami Bird at Stardome Railway Crocker Film and Television Park Mar 27, 2024 pm 11:51 PM

There are a total of 20 origami birds in Croaker Film and Television Park on Star Dome Railway. Many players don’t know where the origami birds are in Crocker Film and Television Park. The editor has summarized the locations of each origami bird to help everyone. Search for it, and take a look at this latest summary of the locations of the origami birds in Croaker Film and Television Park for specific content. Guide to the Honkai Star Dome Railway: Origami Bird in Crook Movie Park Location 1, Crook Movie Park 1st Floor 2, and Crook Movie Park 2nd Floor Star Dome Railway

How to change the location of Gaode Map Home Feb 27, 2024 pm 07:31 PM

As a powerful assistant for our daily travels, Amap not only provides accurate navigation services, but also allows users to directly determine their "home location" in a user-friendly manner. It is convenient to check your route home every time. But sometimes the location of our home also needs to be updated, so how can we easily modify the "location of home" in Amap? Next, follow the editor's guide and learn how to modify it together! Amap How to change the location of your home? Answer: [AMAP] - [Settings] - [Three-dot icon] - [Modify location] - [Set location] - [Set as home address]. Specific steps: 1. First open the Amap software, enter the homepage, slide up, find home and click [Settings]; 2. Then in the settings page, we can

Where is the Last Era Arena? Mar 07, 2024 pm 08:16 PM

In "Last Age", players can play in various modes such as game mode, challenge mode, and arena, etc. Arena is the ultimate way to play the game, providing two modes for players to choose from. Where is the Arena in the Last Era? Answer: The Arena is an endgame game, and its specific location is at the Champion's Gate. You need to obtain the Arena Key or Memory Arena Key. After right-clicking, you can see the world map and find the specific location of the Champion's Gate. The arena is divided into two major modes: Arena Championship Mode and Endless Arena Mode. The former includes 40 waves of enemies and selected rewards, always culminating in a battle with the Arena Champion. There are 4 stages in Arena Championship Mode. The higher the difficulty, the better the rewards. Endless Arena is a mode with infinite waves. The difficulty gradually increases. The challenger with the best score will

See all articles