您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么實(shí)現(xiàn)在頁面加載之后執(zhí)行JavaScript”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“怎么實(shí)現(xiàn)在頁面加載之后執(zhí)行JavaScript”文章能幫助大家解決問題。
我們都知道,頁面加載是有順序的。讓我們先來理一下頁面的展示過程:
當(dāng)你輸入url并按下回車時(shí)
首先從本地查找域名,有的話直接用hosts文件里的ip地址,否則查詢DNS,得到ip地址
建立TCP連接——進(jìn)行“三次握手”
客戶端發(fā)送http請(qǐng)求
服務(wù)端處理,并返回結(jié)果給客戶端
關(guān)閉TCP連接——需要“四次揮手”
瀏覽器收到結(jié)果,開始解析資源(JS、CSS、HTML),解析HTML生成的dom樹,和同時(shí)解析css生成的cssom樹結(jié)合生成渲染樹
根據(jù)渲染樹渲染頁面
當(dāng)然,再詳細(xì)的比如:如何解析生成DOM樹、瀏覽器在三次握手四次揮手的同時(shí)做了什么、CSSOM樹是怎么和DOM樹 一一對(duì)應(yīng)的… 這些如果你不是在做系統(tǒng),似乎是無關(guān)緊要的 —— 至少對(duì)本文來說是這樣的。
經(jīng)過上面的步驟,瀏覽器已經(jīng)拿到了想要的結(jié)果,下一步:瀏覽器渲染進(jìn)程啟用多個(gè)線程協(xié)助完成頁面渲染
GUI渲染線程 ,負(fù)責(zé)渲染瀏覽器界面,解析HTML、css,構(gòu)建DOM樹和RenderObject樹,布局和繪制 ——一旦界面因?yàn)槟撤N操作引發(fā)了回流,此線程就會(huì)執(zhí)行
JS引擎線程 ——和GUI線程互斥,在js引擎執(zhí)行時(shí),GUI線程被掛起
事件觸發(fā)線程 ——依賴js的隊(duì)列機(jī)制完成(當(dāng)一個(gè)事件觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾,等待js引擎處理)
定時(shí)器觸發(fā)線程 ——依賴js的隊(duì)列機(jī)制完成
異步http請(qǐng)求線程
這其中有一個(gè)重要的地方:JavaScript執(zhí)行線程和渲染線程互斥 !而且JavaScript線程的優(yōu)先級(jí)最高!
所以一旦在HTML中發(fā)現(xiàn)了<script>
,瀏覽器便會(huì)暫停其余HTML元素的顯示轉(zhuǎn)而去“馬上加載JS代碼”,這可能會(huì)導(dǎo)致兩個(gè)問題的發(fā)生:
頁面「一片空白」
報(bào)錯(cuò) —— JS無法訪問未知(還沒開始的)加載內(nèi)容
所以,我們需要一種方法來“暫?!盝S執(zhí)行。
很多人第一時(shí)間會(huì)選擇 window.onload
:恕我直言,這確實(shí)不是好的方法,它讓用戶等的太久了。你稍微一查就能知道:onload方法會(huì)等待頁面上所有的文字、table、img加載完成后才觸發(fā)。如果你真的要用,筆者倒是更推薦 DOMContentLoaded
,這個(gè)onload的“變異產(chǎn)品”會(huì)等到文字加載完成后立即觸發(fā) —— 你完全不必考慮圖片的大小對(duì)頁面初始加載時(shí)間的影響,如果你不會(huì)“調(diào)用”圖片的話(前面說了,JS無法訪問未知加載內(nèi)容)。
但事實(shí)上,我們更需要一種方法,讓JS在“瀏覽器獲得內(nèi)容后、真正展示在屏幕上前”就開始執(zhí)行。
比較幸運(yùn)(也可能是不幸)的是,jQuery實(shí)現(xiàn)了這個(gè)方法:
$(document).ready(function(){ //... })
不過據(jù)說jQuery的ready和原生JS的DOMContentLoaded效果是一樣的:網(wǎng)頁中所有 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行(可能 DOM 元素關(guān)聯(lián)的內(nèi)容并沒有加載完)
除此之外,JS中的 window.onload 和jQuery中的$(window).load()
是等價(jià)的
哦,這里并不是“盲目推崇”jQuery,你完全可以去自己封裝一個(gè)。比如 jQuery的 ready()
和JS的 DOMContentLoaded
實(shí)際上都實(shí)現(xiàn)了(或“基于”)這樣一段代碼:
function init(){ if(arguments.callee.done) return; arguments.callee.done=true; if(timer) clearInterval(timer); //... } //判斷瀏覽器 //針對(duì)Mozilla/Opera9 if(document.addEventListener){ document.addEventListener('DOMContentLoaded',init,false) } //針對(duì)IE document.write ("<script id='__ie_onload defer' src='javascript:void(O);'><\/script>" ); var script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if( this.readyState == " complete" ) { init() //調(diào)用加截處理器 }; } //針對(duì)Safari if (/WebKit/i.test(navigator.userAgent)) { var timer = setinterval( function (){ if( /loaded | complete/.test(document.readyState)) { init() //調(diào)用加載處理器 } }. 10); //針對(duì)其他瀏覽器 window.onload = init;
關(guān)于“怎么實(shí)現(xiàn)在頁面加載之后執(zhí)行JavaScript”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。