更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

Web前端新手該如何進行性能優化?

  • 發布:Web前端培訓
  • 來源:Web職場
  • 時間:2020-04-02 13:29

今天小編要跟大家分享的文章是關于Web前端新手該如何進行性能優化?影響用戶訪問的最大部分是前端的頁面。網站的劃分一般為二:前端和后臺。我們可以理解成后臺是用來實現網站的功能的,比如:實現用戶注冊,用戶能夠為文章發表評論等等。而前端呢?其實應該是屬于功能的表現。

而我們建設網站的目的是什么呢?不就是為了讓目標人群來訪問嗎?所以我們可以理解成前端才是真正和用戶接觸的。

Web前端新手該如何進行性能優化

除了后臺需要在性能上做優化外,其實前端的頁面更需要在性能優化上下功夫,只有這樣才能給我們的用戶帶來更好的用戶體驗。不僅僅如此,如果前端優化得好,他不僅可以為企業節約成本,他還能給用戶帶來更多的用戶,因為增強的用戶體驗。說了這么多,那么我們應該如何對我們前端的頁面進行性能優化呢?下面來和小編一起看一看吧!

一、content方面

1,減少HTTP請求:合并文件、CSS精靈、inline Image

2,減少DNS查詢:DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法:DNS緩存、將資源分布到恰當數量的主機名,平衡并行下載和DNS查詢

3,避免重定向:多余的中間訪問

4,使Ajax可緩存

5,非必須組件延遲加載

6,未來所需組件預加載

7,減少DOM元素數量

8,將資源放到不同的域下:瀏覽器同時從一個域下載資源的數目有限,增加域可以提高并行下載量

9,減少iframe數量

10,不要404

二、Server方面

1,使用CDN

2,添加Expires或者Cache-Control響應頭

3,對組件使用Gzip壓縮

4,配置ETag

5,Flush Buffer Early

6,Ajax使用GET進行請求

7,避免空src的img標簽

三、cookie方面

1,減小cookie大小

2,引入資源的域名不要包含cookie

四、CSS方面

1,將樣式表放到頁面頂部

2,不使用CSS表達式

3,使用不使用@import

4,不使用IE的Filter

五、JavaScript方面

1,將腳本放到頁面底部

2,將javascript和css從外部引入

3,壓縮javascript和css

4,刪除不需要的腳本

5,減少DOM訪問

6,合理設計事件監聽器、

六、圖片方面

1,優化圖片:根據實際顏色需要選擇色深、壓縮

2,優化css精靈

3,不要在HTML中拉伸圖片

4,保證favicon.ico小并且可緩存

七、移動方面

1,保證組件小于25k

2,Pack Components into a Multipart Document

以上就是小編今天為大家分享的關于Web前端新手該如何進行性能優化的文章,希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助。想要了解更多Web前端相關知識記得關注達內Web培訓官網。最后祝愿小伙伴們工作順利,成為一名優秀的Web前端工程師

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:提高Web前端性能的技巧有哪些?
下一篇:Web前端工程師要掌握的JavaScript代碼片段(一)

學習Web前端開發要學習什么?會用到哪些工具?

Web前端開發工程師入門必備指南

Web前端工程師要掌握的Web前端性能優化方法

成為Web前端工程的必備基礎技能

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天