認識script標籤

阿新 • • 發佈：2021-01-06

認識script標籤

將 JavaScript 插入 HTML 的主要方法就是使用 script 元素

1、常用屬性

async 非同步載入指令碼，只對外部檔案有效
defer 頁面載入完成後再執行指令碼，只對外部檔案有效
integrity 對接指令碼資源和制定的加密簽名驗證
src 執行程式碼外部檔案
type 值為"module"時，程式碼會被當成ES6模組

2、標籤的位置

<html>
	<head>
		<title>welcome to my page</title 
>
		<script></script>
	</head>
	<body>
	<!-- 這裡是內容 -->
	<script></script>	
	</body>
</html>

3、指令碼的執行

推遲執行

<html>
   <head>
   	<title>welcome to my page</title>
   	<!-- 指令碼會立即開始下載，待頁面載入完成後開始執行
   	按照HTML5規範example2在example1後執行，但實際卻並不一定總會頁面按順序執行
   	因此這樣鵝指令碼最好只有一個
   	--> 

   	<script defer src="example1"></script>
   	<script defer src="example2"></script>
   </head>
   <body>
   <!-- 這裡是內容 -->
   <script></script>	
   </body>
</html>

非同步執行

<html>
   <head>
   	<title> 
welcome to my page</title>
   	<!-- 指令碼會立即開始下載，但不保證按順序執行
   		非同步指令碼會在load事件（頁面載入完成）前執行
   		所以非同步指令碼不應再載入期間修改DOM
   	 -->
   	<script async src="example1"></script>
   	<script async src="example2"></script>
   </head>
   <body>
   <!-- 這裡是內容 -->
   <script></script>	
   </body>
</html>

動態載入

function loadScript(path){
	let script = document.createElement('script');
	script.src = path;
	/* 這種方式的script元素是以非同步方式載入的，相當於添加了async
	但卻不是所有瀏覽器都支援async標籤
	所以設定同步載入*/
	script.async = false;
	document.body.append(script);
}
//缺陷：以這種方式獲取的資源都是對瀏覽器預載入器不可見的。會嚴重影響它在資源獲取佇列中的優先順序
//解決方式 在文件頭部顯示宣告 <link rel = "preload" href = 'xxx.js' >;

4、noscript元素

noscript標籤可以包含任何出現再body中的元素，script除外。當條件滿足時，
瀏覽器將顯示包裹的內容。實現頁面優雅降級處理

當滿足下面任意條件觸發

瀏覽器不支援指令碼
瀏覽器禁用指令碼

<html>
	<head>
		<title>welcome to my page</title>
		
		<script async src="example1"></script>
		<script async src="example2"></script>
	</head>
	<body>
	<!-- 這裡是內容 -->
	<noscript>
		<p>您的瀏覽器不支援javascript，請允許瀏覽器支援javascript或更換瀏覽器！</p>
	</noscript>
	<script></script>	
	</body>
</html>

總結

1、要引入外部js檔案，必須將src設定為要包含檔案的URL，檔案與網頁可不同域
2、在不使用defer、async屬性時，script 標籤會按照網頁中出現的順序依次被解釋
3、使用defer屬性可延遲指令碼待頁面載入完成後執行，延遲的指令碼按頁面中出現的順序執行
4、使用async屬性指令碼不需等待、不阻塞文件渲染既非同步載入，但不能按頁面出現順序執行

認識script標籤

技術標籤：筆記前端jsjavascriptwebhtml 認識script標籤將 JavaScript 插入 HTML 的主要方法就是使用 script 元素

JavaScript 02 script標籤

javascript程式碼必須放在script標籤中script標籤可以放在html的任何地方，一般建議放在head標籤裡

關於控制檯使用script標籤動態插入jQuery指令碼無法立即正常使用的問題。

問題背景：目的：通過在他人的網頁也增添jQuery庫來使用自己的jQuery指令碼，

Selenium+BeautifulSoup+json獲取Script標籤內的json資料

Selenium爬蟲遇到資料是以 JSON 字串的形式包裹在 Script 標籤中，假設Script標籤下程式碼如下：

script標籤的async、defer屬性傻傻分不清楚？來一次說清楚

技術標籤：前端html5javascript Normal Execution Before looking into the effect of the two attributes, we must first look at what occurs in their absence. By default, as mentioned above, JavaScript

前端中的script標籤

script標籤中的重要屬性！。瀏覽器解析行內指令碼的方式決定了它在看到字串時，會將其當成結束的

script標籤不能自閉合

技術標籤：javascript Uncaught ReferenceError: a is not defined： //HTML中，除了<img><input><link><hr><video><audio>等標籤，其它標籤是不能自動閉合的

js中動態獲取頁面的script地址，並動態給他新增script標籤和地址，解決頁面白屏問題

技術標籤：vue3.0vuevuejs 前言：（業務邏輯）在vue中，遇到這樣的情況，初始化載入太多js，導致頁面白屏，為了解決這個情況，決定使用具體元件具體載入相應的cdn地址。

vs code 設定格式化時 html/script 標籤屬性不換行

1、在vscode中，拷貝某個元件時，屬性自動換行，導致一個檔案千百行，程式碼看著很凌亂，如下：

script標籤中defer和async的區別（稀土掘金學習）

如果沒有defer或async屬性，瀏覽器會立即載入並執行相應的指令碼。它不會等待後續載入的文件元素，讀取到就會開始載入和執行，這樣就阻塞了後續文件的載入。

script 標籤中的defer 和 async 屬性

瀏覽器在解析 HTML 的時候，如果遇到一個沒有任何屬性的 <script> 標籤，就會暫停解析，先發送網路請求獲取該 JS 指令碼的程式碼內容，然後讓 JS 引擎執行該程式碼，當代碼執行完畢後恢復解析。整個過程如下

js動態新增html標籤和屬性_手動插入meta、script、div、img等標籤

web網頁是由html標籤一層層組成的，js也可以動態新增對應的標籤，比如mate標籤、script標籤、div標籤、img標籤等，動態建立的方法基本都差不多，下面將簡單介紹下如何實現

HTML5 文件基礎標籤  html,head,body,base,meta,link,script,style

一、HTML5 註釋標籤  與之前版本沒變化二、 HTML5 <html>標籤 <html> 標籤告知瀏覽器這是一個 HTML 文件。

關於＜script＞標籤(來自《JavaScript高階程式設計》2.1[思維導圖])

2.1[思維導圖]) 補充：源自HTML<script>標籤 HTML 4.01 與 HTML5之間的差異在 HTML 4 中，“type” 屬性是必需的，但在 HTML5 中是可選的。 “async” 屬性是 HTML5 中的新屬性。 HTML5 中不再支

面試官:談談你對mysql索引的認識？

（轉載）原文連結：blog.csdn.net/fujiandiyi0… 引言大家好，我渣渣煙。我曾經寫過一篇《面試官:談談你對錶設計的認識?》於是呢，決定再來一個mysql的資料庫專題，這篇我們就來談談關於索引方面的mysql面試題。還是

Spring自定義標籤配置的原始碼解析與實現

概述 Spring中，從AbstractXmlApplicationContext開始，通過對NamespaceHandler &BeanDefinitionParser，來實現自定義xml配置的功能。

Spring Cloud第二篇 | 使用並認識Eureka註冊中心

本文是Spring Cloud專欄的第二篇文章，瞭解前一篇文章內容有助於更好的理解本文：

Hbase的初步認識

整篇文章是在學習了多篇其他作者的文章的一個結合，若有冒犯侵權，還請及時告知，但也是我對於Hbase的心得體會，如果有理解錯誤的地方也還請大家指點，那麼下面我們就步入正文

大白話帶你認識Kafka，面試不怕不怕了~

訊息系統的作用應該大部份小夥伴都清楚，用機油裝箱舉個例子所以訊息系統就是如上圖我們所說的倉庫，能在中間過程作為快取，並且實現解耦合的作用。

一次標籤指標（Tagged Pointer）導致的事故

前言最近遇到一起由objc_setAssociatedObject和objc_getAssociatedObject引發的線上Crash事故，在痛心疾首的同時也覺得很有意思，特此分享。

認識script標籤