2023-09-23 分類: 網(wǎng)站建設(shè)
通常,在他們的網(wǎng)站上實(shí)現(xiàn)新功能時(shí),用戶將使用其他開發(fā)人員設(shè)計(jì)的預(yù)構(gòu)建代碼片段,而不是自己編寫代碼。這有雙重好處;沒(méi)有經(jīng)驗(yàn)的開發(fā)人員能夠利用更強(qiáng)的功能,這些功能對(duì)他們來(lái)說(shuō)很難單獨(dú)編碼,即使有經(jīng)驗(yàn)的用戶也可以通過(guò)使用預(yù)先編寫的代碼段來(lái)節(jié)省時(shí)間。
但是,隨著瀏覽器的更新和改進(jìn),它們通常會(huì)添加對(duì)以前只能通過(guò)腳本實(shí)現(xiàn)的功能的支持。未能使我們的內(nèi)容適應(yīng)這些創(chuàng)新可能會(huì)阻止我們的網(wǎng)站充分發(fā)揮其潛力,因此跟上瀏覽器更新中引入的新特性和功能以保持我們的網(wǎng)站平穩(wěn)有效地運(yùn)行非常重要。以下是三個(gè)相對(duì)較新的瀏覽器功能可以更有效地解決問(wèn)題的示例:
示例 1:圖像的延遲加載
直到幾年前,如果我們想要延遲加載圖像(即只在用戶滾動(dòng)到圖像時(shí)加載圖像,而不是在初始頁(yè)面加載時(shí)加載圖像,讓用戶更快地看到頁(yè)面內(nèi)容),一個(gè)非常常見的解決方案是用 data-src 屬性替換圖像中的 src 屬性,然后通過(guò)瀏覽器窗口的 onscroll 事件跟蹤用戶在網(wǎng)站中的滾動(dòng)。
示例 2:滾動(dòng)頁(yè)面時(shí)激活項(xiàng)目
多年來(lái),我們從 onscroll 事件中獲得了很多進(jìn)展;除了用于延遲加載圖像外,它還經(jīng)常用于在給定網(wǎng)頁(yè)的某些點(diǎn)觸發(fā)事件。例如,我們可能希望在用戶從頁(yè)面頂部滾動(dòng)時(shí)出現(xiàn)一個(gè)粘性菜單。目前,更強(qiáng)大的解決方案是API;有了這個(gè),我們可以在相對(duì)于頁(yè)面元素或元素組的可見性的特定時(shí)刻觸發(fā)事件。這使其成為粘性菜單、滾動(dòng)期間觸發(fā)的動(dòng)畫或僅用于分析、跟蹤用戶是否查看給定項(xiàng)目的理想解決方案。
示例 3:跟蹤網(wǎng)站更改
將我們的網(wǎng)站腳本與其他外部腳本鏈接起來(lái)可能是一個(gè)相當(dāng)大的挑戰(zhàn);如果我們的腳本沒(méi)有使用方便的 API 或引發(fā)任何類型的事件,那么我們就無(wú)法監(jiān)控更改。這可以通過(guò)循環(huán)執(zhí)行腳本來(lái)克服,這些腳本將驗(yàn)證頁(yè)面上的腳本是否有任何重要的更改,但使用API,它允許我們跟蹤在不同級(jí)別的特定元素中發(fā)生的更改- 無(wú)論是 HTML 結(jié)構(gòu)、文本還是屬性。
與 CSS 和 HTML 一樣,縮小和壓縮 JavaScript 代碼以節(jié)省帶寬并減少網(wǎng)站加載時(shí)需要運(yùn)行的查詢數(shù)量始終是一個(gè)好主意。 在 JS 代碼的情況下,縮小腳本的工具比 CSS 代碼具有更大的范圍,因?yàn)橥ǔS懈?jiǎn)單的方法來(lái)簡(jiǎn)化腳本構(gòu)造,盡管如果您希望稍后檢查腳本,這當(dāng)然會(huì)使它們的可讀性降低. 另外,我們應(yīng)該特別注意我們的腳本加載的順序;低效的加載順序可能導(dǎo)致用戶不必要的加載延遲和整體更差的用戶體驗(yàn)。
文章題目:JavaScript對(duì)網(wǎng)站制作的速度和性能有什么影響
URL分享:http://jinyejixie.com/news30/283280.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、定制開發(fā)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容