前端：JS延長加載的方式有哪些？

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態創建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行標簽定義了defer屬性。

用途：表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執行在<script>元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標簽后再執行HTML5規范要求腳本按照它們出現的先后順序執行。在現實當中，延遲腳本并不一定會按照順序執行defer屬性只適用于外部腳本文件。支持HTML5的實現會忽略嵌入腳本設置的defer屬性

2、async屬性

HTML5 為<script>標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執行，從而異步加載頁面其他內容。異步腳本一定會在頁面 load 事件前執行。不能保證腳本會按順序執行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內容-->
</body>
</html>

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點：不能控制加載的順序

3、動態創建DOM方式

//這些代碼應被放置在</ body>標簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調函數，成功獲取文件后執行的函數
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應被放置在</body>標簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復制上面代碼

6.2）粘貼代碼到HTML的標簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件。

篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談談文本Content內容的基礎用法
1)).首行縮進文本

<div style='text-indent:2em'></div>  可以設置負數 也可使用百分數 像素

2)).文本對齊方式

<div style='text-align:center'></div>
left    左邊
right   右邊
center  中間
justify 兩端對齊

3)).字間距

<div style='word-spacing:2em'></div> 可以設置負數 也可使用百分數 像素

4)).文本間距

<div style='letter-spacing:2em'></div> 可以設置負數 也可使用百分數 像素

5)).文本轉換

<div style='text-transform:none'></div>
none         不轉換
uppercase    大寫
lowercase    小寫
capitalize   首字母大寫

6)).文本修飾

<div style='text-decoration:none'></div>
none          不修飾
underline     下劃線
overline      上劃線
line-through  中劃線
blink         文本閃爍

7)).文本空白符的處理

<div style='white-space:normal'></div>
pre-line 合并空白符序列，但是保留換行符
normal   忽略空白符
nowrap   文本不會換行，直到<br>出現才換行
pre      空白會被瀏覽器保留
pre-wrap 保留空白符序列，但是正常地進行換行

8)).文本方向

<div style='direction:ltr'></div>
ltr     從左到右
rtl     從右到左
9)).文本行高
<div style='line-height:2'></div> 可使用百分數 像素
10)).文本陰影
<div style='text-shadow:1px 1px 1px red'></div>

11)).字符換行

<div style='word-wrap:normal'></div>
normal 只在允許的斷字點換行
break-word 在長單詞、URL地址內部進行換行

12)).處理溢出文本

<div style='text-overflow:ellipsis'></div>
clip           修剪文本
ellipsis      省略符號來代表被修剪的文本
string        使用給定的字符串來代表被修剪的文本

13)).文本輪廓

<div style='text-outline:1px 1px red'></div>

14)).文本換行

<div style='text-wrap:none'></div>
normal          只在允許的換行點進行換行。
none            不換行。元素無法容納的文本會溢出
unrestricted    在任意兩個字符間換行。
suppress        壓縮元素中的換行。瀏覽器只在行中沒有其它有效換行點時進行換行。

總結

這篇文章主要介紹了CSS樣式更改篇中的文本Content基本設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****

IT共享之家

入群請在微信后臺回復【入群】

想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/

TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學習有所幫助喲！

本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料

HTML 表單

表單使用表單標簽 <form> 來設置:

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

HTML 表單 - 輸入元素

多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。

如何在 HTML 頁面創建文本域？

用戶可以在文本域中寫入文本，參考代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>

</body>

</html>

運行結果為

如何創建 HTML 的密碼域？

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>

</body>

</html>

運行結果如下

戳了解更多免費領取HTML試聽課~

在線咨詢

上一篇：HTML5游戲怎么做？
下一篇：Web前端教程：簡單實用的CSS網頁布局中文排版技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端：JS延長加載的方式有哪些？

1、defer屬性

2、async屬性

3、動態創建DOM方式

4、使用jQuery的getScript()方法

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網頁加載留出更多時間

6、讓JS最后加載

總結

您的項目需求