整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
么是JS延遲加載？
JS延遲加載，也就是等頁(yè)面加載完成之后再加載JavaScript文件
為什么讓JS實(shí)現(xiàn)延遲加載？
js的延遲加載有助于提高頁(yè)面的加載速度。
Js延遲加載的方式有哪些？一般有以下幾種方式：
·defer屬性
·async屬性
·動(dòng)態(tài)創(chuàng)建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延遲方法
·讓JS最后加載
HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。
用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>說(shuō)明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性
HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁(yè)面的加載。
缺點(diǎn)：不能控制加載的順序
//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近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>$.getScript("outer.js" , function(){ //回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
console.log(“腳本加載完成")
});<script type="text/javascript" >
function A(){
$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延遲1秒
})
</script>把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度。
上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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>這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
6.1）復(fù)制上面代碼
6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
6.3）修改“defer.js”為你的外部JS文件名
6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。
周，我們有機(jī)會(huì)對(duì) SwissDev Jobs 網(wǎng)站的性能進(jìn)行了微調(diào)。
之所以要提升 SwissDevJobs.ch 網(wǎng)站性能，主要是基于以下兩方面原因：
當(dāng)你搜索“website performance basics”時(shí)，你會(huì)得到許多操作建議，例如：
針對(duì)以上這些建議，我們進(jìn)行了部分改進(jìn)。另外，由于我們的主頁(yè)面基本上是一個(gè)可過(guò)濾的列表（用 React 編寫的），我們引入了 react-window 來(lái) 每次渲染 10 個(gè)列表項(xiàng)，而不是 250 個(gè)。
所有這些都幫助我們極大地提升了網(wǎng)站性能，但從速度報(bào)告來(lái)看，我們還可以做得更好。
因此我們開始深挖更多不尋常的方法來(lái)讓我們的網(wǎng)站變得更快…現(xiàn)在看來(lái)，我們非常成功！ 下面是這周的報(bào)告：
這個(gè)報(bào)告顯示，完整的加載時(shí)間減少了 24%！
我們是如何做到這一點(diǎn)的呢？
這條在 index.html 文件中的簡(jiǎn)單代碼向?yàn)g覽器表明：它應(yīng)該在這個(gè)資源被來(lái)自 JavaScript 的 AJAX 或 Fetch 調(diào)用實(shí)際請(qǐng)求之前獲取。
當(dāng)需要獲取數(shù)據(jù)的時(shí)候，它會(huì)從瀏覽器緩存中讀取而不是重新獲取。這幫助我們減少了大約 0.5s 的加載時(shí)間。
我們很早就想實(shí)現(xiàn)這一點(diǎn)了，但是過(guò)去在 Chrome 瀏覽器中一直有問(wèn)題而導(dǎo)致重復(fù)下載兩次。而現(xiàn)在它可以正常生效。
在實(shí)現(xiàn)了 JSON 預(yù)加載后，我們發(fā)現(xiàn)職位列表的下載仍然是瓶頸所在（等待 0.8s 從服務(wù)器獲得響應(yīng)）。因此，我們決定從服務(wù)端緩存入手。
首先，我們嘗試了 node-cache ，但令人吃驚的是，它并沒(méi)有優(yōu)化獲取時(shí)間。
值得一提的是，/api/jobs 接口是一個(gè)簡(jiǎn)單的 GetAll 接口，因此沒(méi)有太多的優(yōu)化空間。
于是，我們決定使用一個(gè) JS 變量來(lái)構(gòu)建我們自己的簡(jiǎn)易緩存。它看起來(lái)如下：
這里唯一沒(méi)有顯示的是 post /jobs 接口，這個(gè)接口刪除了所有的緩存（cachedJobs = undefined）。
就是這么簡(jiǎn)單！又減少了 0.4s 的加載時(shí)間！
我們最后動(dòng)手的是我們加載的 CSS 和 JS 打包文件的大小。我們注意到，非必要的 font-awesome 文件超過(guò) 70KB。
同時(shí)，我們可能只使用其中 20% 的圖標(biāo)。
我們是如何解決這個(gè)問(wèn)題的呢？我們使用 icomoon.io 來(lái)選擇我們使用的圖標(biāo)，然后創(chuàng)建我們自己瘦身過(guò)的圖標(biāo)包。
結(jié)果呢？節(jié)省了 50KB！
這 3 項(xiàng)不尋常的改動(dòng)幫助我們將網(wǎng)站的加載時(shí)間加速了 24%。或者，如其它一些報(bào)告顯示的，加速了 43%（達(dá)到了 1.2s）。
我們對(duì)這些改動(dòng)很滿意。但是，我們相信仍然有優(yōu)化的空間。
如果你有獨(dú)有的不尋常的技術(shù)可以幫助我們——請(qǐng)告知我們！
在應(yīng)用上述優(yōu)化之后，我們注意到瓶頸仍然是獲取 /api/jobs 接口以及下載初始 HTML 的時(shí)間。其原因是，初始 HTML 以及這個(gè) API 是由位于歐洲的一個(gè)單點(diǎn)服務(wù)器提供的。
我們尋找可行的解決方案，然后決定采用將一切都緩存在服務(wù)器層級(jí)的方案。
使用 Cloudflare，默認(rèn)只有靜態(tài)資源會(huì)被緩存。但是，通過(guò)增加一個(gè)簡(jiǎn)單的頁(yè)面規(guī)則，就可以啟用緩存任何頁(yè)面或資源的功能：
這使得我們的網(wǎng)站可以直接由 Cloudflare 的 CDN 提供服務(wù)，甚至不需要訪問(wèn)服務(wù)器。
結(jié)果呢？
在世界各地的加載時(shí)間減少了 50%！
現(xiàn)在，你可能對(duì)緩存初始 HTML 和動(dòng)態(tài) API 的想法將信將疑，但請(qǐng)考慮：
這使得我們可以在不到 1 秒的時(shí)間內(nèi)將 SwissDev Jobs 服務(wù)到世界各地！
作者介紹:
SwissGreg，白天是程序員，晚上是獨(dú)立黑客——SwissDevJobs.ch。
對(duì)于前端來(lái)說(shuō)，HTML 都是最基礎(chǔ)的內(nèi)容。
今天，我們來(lái)了解一下 HTML 和網(wǎng)頁(yè)有什么關(guān)系，以及與 DOM 有什么不同。通過(guò)本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個(gè)過(guò)程中我們可以進(jìn)行怎樣的處理來(lái)提升網(wǎng)頁(yè)的性能，從而提升用戶的體驗(yàn)。
不知你是否有過(guò)這樣的體驗(yàn)：當(dāng)打開某個(gè)瀏覽器的時(shí)候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長(zhǎng)時(shí)間才打開頁(yè)面……
此時(shí)的你，會(huì)選擇關(guān)掉頁(yè)面還是耐心等待呢？
這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過(guò)慢等原因，大多數(shù)都是由于頁(yè)面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過(guò)長(zhǎng)導(dǎo)致的。
我們都知道，頁(yè)面是用 HTML/CSS/JavaScript 來(lái)編寫的。
HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來(lái)定義一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)，基本上所有網(wǎng)頁(yè)都是這樣的 HTML 結(jié)構(gòu)：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。
前面我們提到頁(yè)面 HTML 結(jié)構(gòu)不合理可能會(huì)導(dǎo)致頁(yè)面響應(yīng)慢，這個(gè)過(guò)程很多時(shí)候體現(xiàn)在<script>和<style>元素的設(shè)計(jì)上，它們會(huì)影響頁(yè)面加載過(guò)程中對(duì) Javascript 和 CSS 代碼的處理。
因此，如果想要提升頁(yè)面的加載速度，就需要了解瀏覽器頁(yè)面的加載過(guò)程是怎樣的，從根本上來(lái)解決問(wèn)題。
瀏覽器在加載頁(yè)面的時(shí)候會(huì)用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。
由于 JavaScript 在執(zhí)行過(guò)程中還可能會(huì)改動(dòng)界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計(jì)為互斥的關(guān)系。也就是說(shuō)，當(dāng) JavaScript 引擎執(zhí)行時(shí)，GUI 線程會(huì)被掛起。
以網(wǎng)易云課堂官網(wǎng)為例，我們來(lái)看看網(wǎng)頁(yè)加載流程。
（1）當(dāng)我們打開官網(wǎng)的時(shí)候，瀏覽器會(huì)從服務(wù)器中獲取到 HTML 內(nèi)容。
（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。
（3）<head>元素內(nèi)容會(huì)先被解析，此時(shí)瀏覽器還沒(méi)開始渲染頁(yè)面。
我們看到<head>元素里有用于描述頁(yè)面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時(shí)瀏覽器會(huì)去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過(guò)src屬性指向外部資源。
（4）當(dāng)瀏覽器解析到這里時(shí)（步驟 3），會(huì)暫停解析并下載 JavaScript 腳本。
（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會(huì)交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁(yè)面。
（6）此時(shí)<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁(yè)面。
在這個(gè)過(guò)程中，我們看到<head>中放置的<script>元素會(huì)阻塞頁(yè)面的渲染過(guò)程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁(yè)面。
到這里，我們就明白了：如果外部腳本加載時(shí)間很長(zhǎng)（比如一直無(wú)法完成下載），就會(huì)造成網(wǎng)頁(yè)長(zhǎng)時(shí)間失去響應(yīng)，瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài)，用戶體驗(yàn)會(huì)變得很糟糕。
因此，對(duì)于對(duì)性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁(yè)，常常會(huì)將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁(yè)面得以迅速展示。我們還可以使用defer/async/preload等屬性來(lái)標(biāo)記<script>標(biāo)簽，來(lái)控制 JavaScript 的加載順序。
百度首頁(yè)
對(duì)于百度這樣的搜索引擎來(lái)說(shuō)，必須要在最短的時(shí)間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級(jí)會(huì)相對(duì)較低。
瀏覽器在渲染頁(yè)面的過(guò)程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來(lái)避免瀏覽器渲染的重復(fù)計(jì)算。
我們知道<p>是 HTML 元素，但又常常將<p>這樣一個(gè)元素稱為 DOM 節(jié)點(diǎn)，那么 HTML 和 DOM 到底有什么不一樣呢？
根據(jù) MDN 官方描述：文檔對(duì)象模型（DOM）是 HTML 和 XML 文檔的編程接口。
也就是說(shuō)，DOM 是用來(lái)操作和描述 HTML 文檔的接口。如果說(shuō)瀏覽器用 HTML 來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁(yè)的結(jié)構(gòu)并進(jìn)行操作。一般來(lái)說(shuō)，我們使用 JavaScript 來(lái)操作 DOM 接口，從而實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)變化，以及用戶的交互操作。
在開發(fā)過(guò)程中，常常用對(duì)象的方式來(lái)描述某一類事物，用特定的結(jié)構(gòu)集合來(lái)描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個(gè)由 DOM 節(jié)點(diǎn)以及包含屬性和方法的相關(guān)對(duì)象組成的結(jié)構(gòu)集合。
我們常見的 HTML 元素，在瀏覽器中會(huì)被解析成節(jié)點(diǎn)。比如下面這樣的 HTML 內(nèi)容：
<html>
<head>
<title>標(biāo)題</title>
</head>
<body>
<a href='xx.com'>我的超鏈接</a>
<h1>頁(yè)面第一標(biāo)題</h1>
</body>
</html>打開控制臺(tái) Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：
在瀏覽器中，上面的 HTML 會(huì)被解析成這樣的 DOM 樹，如下圖所示：
我們都知道，對(duì)于樹狀結(jié)構(gòu)來(lái)說(shuō)，常常使用parent/child/sibling等方式來(lái)描述各個(gè)節(jié)點(diǎn)之間的關(guān)系，對(duì)于 DOM 樹也不例外。
舉個(gè)例子，我們常常會(huì)對(duì)頁(yè)面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁(yè)面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來(lái)描述。同時(shí)，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點(diǎn)展開，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會(huì)呈現(xiàn)出樹狀結(jié)構(gòu)。
我們知道，瀏覽器中各個(gè)元素從頁(yè)面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實(shí)現(xiàn)將子元素的事件委托給父級(jí)元素來(lái)進(jìn)行處理，這便是事件委托。
如果我們?cè)诿總€(gè)元素上都進(jìn)行監(jiān)聽的話，則需要綁定三個(gè)事件;(假設(shè)頁(yè)面上有a,b,c三個(gè)兄弟節(jié)點(diǎn))
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 這里可以用 this 獲取當(dāng)前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通過(guò)將事件添加到它們的父節(jié)點(diǎn)，而將事件委托給父節(jié)點(diǎn)來(lái)觸發(fā)處理函數(shù)：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 獲取被點(diǎn)擊的元素
const eventTarget = event.target;
// 檢查源元素`event.target`是否符合預(yù)期
// 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);這樣能解決什么問(wèn)題呢？
常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個(gè)選項(xiàng)都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項(xiàng)，都不需要手動(dòng)去綁定和移除事件。
如果在列表數(shù)量?jī)?nèi)容較大的時(shí)候，對(duì)成千上萬(wàn)節(jié)點(diǎn)進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對(duì)元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡(jiǎn)單和基礎(chǔ)的一個(gè)做法。
注意:
我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁(yè)面的加載過(guò)程的，同時(shí)還介紹了使用 DOM 接口來(lái)控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
