<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          改善網(wǎng)頁性能的5種方法

          共 1580字,需瀏覽 4分鐘

           ·

          2021-04-13 17:05

          英文 | https://javascript.plainenglish.io/5-ways-to-improve-your-web-page-performance-1af1f57175bb

          翻譯 | web前端開發(fā)公眾號


          介紹

          大多數(shù)站長認為,在其網(wǎng)頁上產(chǎn)生許多令人敬畏的效果,會吸引更多的客戶。但是那些額外的功能(動畫等)只有在客戶不必等待10秒鐘,就能加載完網(wǎng)站的情況下才可以。
          優(yōu)化你的網(wǎng)頁性能是改善用戶體驗的好方法,但是快速的網(wǎng)站會帶來很多損失。Web性能優(yōu)化是一項永無止境的工作。
          在本文中,我們將討論一些改善網(wǎng)頁性能的有用方法。但是首先,讓我們檢查一下如何使用瀏覽器中的開發(fā)人員工具來跟蹤網(wǎng)站的性能。

          跟蹤網(wǎng)站效果

          你可以通過在瀏覽器中打開開發(fā)人員工具來跟蹤網(wǎng)站的性能(在Chrome中按F12鍵)。
          之后,轉(zhuǎn)到“網(wǎng)絡”選項卡,然后在你的站點上重新加載頁面。你將看到一些類似于以下示例的結(jié)果:

          在這種情況下,你可以看到,該網(wǎng)頁花費了22.85秒,并且有95個請求加載了頁面的全部內(nèi)容。那是一個很大的加載時間,用戶不喜歡等待太多。但是我們可以通過以下技巧提高性能來解決這一問題。

          1、綁定和縮小

          改善網(wǎng)頁性能的最流行的方法之一是綁定和縮小文件(JS-CSS等)。這對于減小文件大小很有用。你可以使用Webpack或Parcel等網(wǎng)絡程序來實現(xiàn)。Web程序使綁定和縮小文件變得更加容易。
          如果這是你第一次了解捆包機,我強烈建議你使用Parcel,因為它易于使用并且不需要任何配置。

          2、縮小圖像尺寸

          您可以通過減少頁面上圖像的大小來加快網(wǎng)站速度。可以優(yōu)化大多數(shù)圖像并將其縮小,有些有用的工具可以幫助縮小它們并減小其大小。
          最后,如果你的頁面上包含很多圖像,則可能需要考慮延遲加載圖像。這意味著只要我們滾動頁面,圖像就只會在屏幕上可見時加載。你可以使用某些庫或僅使用交集觀察器API來實現(xiàn)。

          3、緩存和內(nèi)容交付網(wǎng)絡

          你可以采取的提高性能的措施之一就是利用內(nèi)容交付網(wǎng)絡(CDN)。你網(wǎng)站上的某些靜態(tài)文件不會更改,例如JavaScript,CSS和圖像文件。
          你可以通過在用戶所在位置附近的服務器上緩存這些文件來提高網(wǎng)站的性能。這對于減輕服務器的流量負擔和加快網(wǎng)站加載速度很有用。你可以為此使用某些工具,例如Cloudflare,它很容易設置。

          4、延遲載入JavaScript

          將腳本放在頁面正文的底部可以使瀏覽器首先加載頁面。另一種方法是defer="true"在script標簽中使用。defer屬性指定腳本應在頁面解析完成后執(zhí)行,但僅適用于外部腳本。你所要做的就是將腳本放在HTML的head標簽下面。
          <script src = fileName.jsdefer = true”> </ script>br
          此技巧有助于減輕同時加載多個文件的壓力,從而影響網(wǎng)站性能。

          5、異步加載JavaScript

          提高性能的另一個技巧是異步加載JavaScript代碼。如今,大多數(shù)網(wǎng)站都與一些第三方內(nèi)容集成在一起,例如社交媒體,聊天功能,評論服務等等。因此,在這種情況下,你必須異步加載JavaScript,這意味著你的代碼不應等待任務完成才能遷移到另一個任務。它必須同時(異步)執(zhí)行許多任務,因為這將有助于加快頁面加載速度,提高性能并最終改善用戶體驗。

          結(jié)論

          改善性能并非易事。隨著你繼續(xù)對網(wǎng)頁進行更改,其使用和性能也將發(fā)生變化。因此,你必須犧牲時間和精力來改善它。
          感謝你閱讀本文,希望它對你有用。

          學習更多技能

          請點擊下方公眾號


          瀏覽 58
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  久久亚洲AV成人无码国产电影 | 九九久久精品视频 | 青青射| 国产在线观看啊 | 丁香婷婷色 |