• <dd id="wpirm"><center id="wpirm"></center></dd>

      <button id="wpirm"><acronym id="wpirm"></acronym></button>
      <s id="wpirm"><acronym id="wpirm"></acronym></s>

      好程序員-千鋒教育旗下高端IT職業教育品牌

      400-811-9990
      我的賬戶
      好程序員

      專注高端IT職業培訓

      親愛的猿猿,歡迎!

      已有賬號,請

      如尚未注冊?

      [HTML5] 好程序員web前端培訓分享Web前端性能優化

      [復制鏈接]
      909 0
      葉子老師 發表于 2019-9-28 14:14:41 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
        好程序員web前端培訓分享Web前端性能優化Web前端性能優化的結果直接影響到用戶體驗,而用戶體驗則與網站的滿意度息息相關,所以,Web前端的優化非常重要。雖然Web前端工程師也把這項工作當做重中之重,但是令他們感到棘手的是不知道從哪些方面去著手優化。其實Web前端優化并不難,只需要掌握一些實用的技巧,就可以輕松應對。接下來,為大家提供一些優化的方法。
        一、減少HTTP請求數
        (1)避免重定向:重定向說明需要客戶端采取進一步操作才能完成請求,請求時間會延長。所以輸入URL時應使用最完整的、最直接的地址。
        (2)使用緩存的機制:主要有數據庫緩存、服務端緩存(反向代理和CDN緩存)、瀏覽器緩存。
        二、圖片懶加載
        在頁面圖片非常多的情況下,可以使用懶加載。只加載第一屏的圖片,當用戶通過滾動訪問后面的內容時再加載相應圖片。方法是先用一張極小的占位圖代替圖片,占位圖只需下載一次,將原本圖片的src存儲在另一個屬性中,判斷當圖片快進入可視區域就將路徑賦值給src并下載圖片進行展示。
        三、代碼的優化
        (1)頁面的結構:CSS放在HTML內容上部,JavaScript放在HTML內容下部。可以使用preload提前解析資源的DNS。由于瀏覽器是自上而下讀取內容的,因此放置資源的位置會影響網站的訪問速度。比如,如果將script標簽放在HTML內容的前邊,瀏覽器就會先調用JavaScript解釋器對JS進行解析,完成之后才會渲染其余的HTML內容。對用戶而言,能看到的是HTML的內容,所以這么做會導致頁面可用性的延遲。
        (2)JavaScript優化:比如減少對DOM的操作,減少重排和重繪,減少作用域鏈查找,慎用eval函數等。JS代碼和CSS的優化要求前端開發人員對頁面渲染原理清晰了解以及對基礎知識掌握扎實。
        (3)CSS優化:減少使用通配符,提取公用樣式增強可復用性,選擇器準確可減少匹配時間,適度使用內聯樣式。
      其實更多情況下,Web前端優化的難易程度取決于你的熟練程度以及實操經驗。而好程序員Web前端課程更注重實戰項目的開發,帶領學員深入學習Web前端,為他們傳授更多有用的技術點,同時也為他們未來職場的發展帶來更多機遇與可能。
      好程序員web前端培訓官網:http://www.jyf24.com/html5_class.shtml

      精彩內容,一鍵分享給更多人!
      收藏
      收藏0
      轉播
      轉播
      分享
      淘帖0
      支持
      支持0
      反對
      反對0
      回復

      使用道具 舉報

      您需要登錄后才可以回帖

      本版積分規則

      關注我們
      好程序員
      千鋒好程序員

      北京校區(總部):北京市海淀區寶盛北里西區28號中關村智誠科創大廈

      深圳西部硅谷校區:深圳市寶安區寶安大道5010號深圳西部硅谷B座A區605-619

      杭州龍馳智慧谷校區:浙江省杭州市下沙經濟技術開發區元成路199號龍馳智慧谷B座7層

      鄭州校區:鄭州市二七區航海中路60號海為科技園C區10層、12層

      Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right

      京ICP備12003911號-5 京公安網11010802011455號

      請您保持通訊暢通1對1咨詢馬上開啟

      Pictoa