建站
咨詢
售后
建站咨詢
新聞中心
又是一年跳槽季，最近聽(tīng)到最多的消息就是，我們公司又有同事離職了，所以，如果你想在職場(chǎng)上掌握主動(dòng)權(quán)，你就需要比別人更加努力，更加夯實(shí)的技能基礎(chǔ)，不然你拿什么去跟別人拼?所以，今天我們跟大家分享一些前端基礎(chǔ)知識(shí)，希望對(duì)你有所幫助。
創(chuàng)新互聯(lián)建站專注于新興企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開(kāi)發(fā)。新興網(wǎng)站建設(shè)公司,為新興等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
HTML頁(yè)面的生命周期
HTML頁(yè)面的生命周期有以下三個(gè)重要事件：
- DOMContentLoaded —— 瀏覽器已經(jīng)完全加載了 HTML，DOM 樹(shù)已經(jīng)構(gòu)建完畢，但是像是
和樣式表等外部資源可能并沒(méi)有下載完畢。
- load —— 瀏覽器已經(jīng)加載了所有的資源(圖像，樣式表等)。
- beforeunload —— 當(dāng)用戶即將離開(kāi)當(dāng)前頁(yè)面(刷新或關(guān)閉)時(shí)觸發(fā)。正要去服務(wù)器讀取新的頁(yè)面時(shí)調(diào)用，此時(shí)還沒(méi)開(kāi)始讀取;
- unload —— 在用戶離開(kāi)頁(yè)面后觸發(fā)。從服務(wù)器上讀到了需要加載的新的頁(yè)面，在即將替換掉當(dāng)前頁(yè)面時(shí)調(diào)用。
- 每個(gè)事件都有特定的用途:
- DOMContentLoaded —— DOM 加載完畢，所以 JS 可以訪問(wèn)所有 DOM 節(jié)點(diǎn)，初始化界面。
- load —— 附加資源已經(jīng)加載完畢，可以在此事件觸發(fā)時(shí)獲得圖像的大小(如果沒(méi)有被在 HTML/CSS 中指定)
- beforeunload —— 該事件可用于彈出對(duì)話框，提示用戶是繼續(xù)瀏覽頁(yè)面還是離開(kāi)當(dāng)前頁(yè)面。
- unload —— 刪除本地?cái)?shù)據(jù)localstorage等
DOMContentLoaded
DOMContentLoaded 由 document 對(duì)象觸發(fā)。使用 addEventListener 來(lái)監(jiān)聽(tīng)它：
- document.addEventListener("DOMContentLoaded", () => {});
DOMContentLoaded 和腳本
當(dāng)瀏覽器在解析 HTML 頁(yè)面時(shí)遇到了 標(biāo)簽，將無(wú)法繼續(xù)構(gòu)建DOM樹(shù)(UI 渲染線程與 JS 引擎是互斥的，當(dāng) JS 引擎執(zhí)行時(shí) UI 線程會(huì)被掛起)，必須立即執(zhí)行腳本。所以 DOMContentLoaded 有可能在所有腳本執(zhí)行完畢后觸發(fā)。
外部腳本(帶 src 的)的加載和解析也會(huì)暫停DOM樹(shù)構(gòu)建，所以 DOMContentLoaded 也會(huì)等待外部腳本。帶 async 的外部腳本，可能會(huì)在DOMContentLoaded事件之前或之后執(zhí)行。帶 defer 的腳本肯定會(huì)在在DOMContentLoaded事件之前執(zhí)行。
DOMContentLoaded 與樣式表
外部樣式表并不會(huì)阻塞 DOM 的解析，所以 DOMContentLoaded 并不會(huì)被它們影響。
load
window 對(duì)象上的 load 事件在所有文件包括樣式表，圖片和其他資源下載完畢后觸發(fā)。
- window.addEventListener('load', function(e) {...});
- window.onload = function(e) { ... };
beforeunload
當(dāng)窗口即將被卸載(關(guān)閉)時(shí), 會(huì)觸發(fā)該事件。此時(shí)頁(yè)面文檔依然可見(jiàn), 且該事件的默認(rèn)動(dòng)作可以被取消。beforeunload在unload之前執(zhí)行，它還可以阻止unload的執(zhí)行。
- // 推薦使用
- window.addEventListener('beforeunload', (event) => {
- // Cancel the event as stated by the standard.
- event.preventDefault();
- // Chrome requires returnValue to be set.
- event.returnValue = '關(guān)閉提示';
- });
- window.onbeforeunload = function (e) {
- e = e || window.event;
- // 兼容IE8和Firefox 4之前的版本
- if (e) {
- e.returnValue = '關(guān)閉提示';
- }
- // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
- return '關(guān)閉提示';
- };
unload
用戶離開(kāi)頁(yè)面的時(shí)候，window 對(duì)象上的 unload 事件會(huì)被觸發(fā)，無(wú)法阻止用戶轉(zhuǎn)移到另一個(gè)頁(yè)面上。
- // 推薦使用
- window.addEventListener("unload", function(event) { ... });
- window.onunload = function(event) { ... };
readyState
document.readyState 表示頁(yè)面的加載狀態(tài)，有三個(gè)值：
- loading 加載 —— document仍在加載。
- interactive 互動(dòng) —— 文檔已經(jīng)完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載。
- complete —— 文檔和所有子資源已完成加載。 load 事件即將被觸發(fā)。
可以在 readystatechange 中追蹤頁(yè)面的變化狀態(tài)：
- document.addEventListener('readystatechange', () => {
- console.log(document.readyState);
- });
Script標(biāo)簽：向HTML插入JS的方法
沒(méi)有 defer 或 async，所有'字符串，如果必須出現(xiàn)，必須使用轉(zhuǎn)義標(biāo)簽‘\’
包含在
與嵌入式j(luò)s代碼一樣, 在解析外部js文件時(shí)，頁(yè)面的處理會(huì)暫時(shí)停止。
改變腳本行為的方法
1. defer: 立即下載，延遲執(zhí)行
加載和渲染后續(xù)文檔元素的過(guò)程將和腳本的加載并行進(jìn)行(異步)，但是腳本的執(zhí)行會(huì)在所有元素解析完成之后。腳本總會(huì)按照聲明順序執(zhí)行。
在DOMContentLoaded事件之前執(zhí)行。
2. async: 異步腳本
加載和渲染后續(xù)文檔元素的過(guò)程將和腳本的加載與執(zhí)行并行進(jìn)行(異步)。但是async 在下載完畢后的執(zhí)行會(huì)阻塞HTML的解析。腳本加載后馬上執(zhí)行，不能保證異步腳本按照他們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行。
一定會(huì)在load事件之前執(zhí)行，可能會(huì)在DOMContentLoaded事件之前或之后執(zhí)行。
區(qū)別：
meta
META標(biāo)簽是HTML標(biāo)記HEAD區(qū)的一個(gè)關(guān)鍵標(biāo)簽，它提供的信息雖然用戶不可見(jiàn)，但卻是文檔的最基本的元信息。 除了提供文檔字符集、使用語(yǔ)言、作者等網(wǎng)頁(yè)相關(guān)信息外，還可以設(shè)置信息給搜索引擎，目的是為了SEO(搜索引擎優(yōu)化)。
HTML 元素表示那些不能由其它 HTML 元相關(guān)(meta-related)元素（(