摘要:發布自的博客,歡迎大家轉載,但是要注意注明出處提高前端性能的方法宏觀上看加速什么是內容分發網絡由于位于用戶網絡的第一跳,將大多數靜態文件啟用加速可以大大提高效率,很多框架用的很多的靜態文件都啟用了加速反向代理什么是反向代理正常的代理服務器是
發布自Kindem的博客,歡迎大家轉載,但是要注意注明出處提高前端性能的方法 宏觀上看
CDN加速
什么是CDN(內容分發網絡)
由于 CDN 位于用戶網絡的第一跳,將大多數靜態文件啟用 CDN 加速可以大大提高效率,很多框架用的很多的靜態文件都啟用了 CDN 加速
反向代理
什么是反向代理 ? 正常的代理服務器是位于瀏覽器一端,代理用戶發送 http 請求給 Web 服務器,但是反向代理服務器則是位于 Web 服務器一端,代理 Web 服務器接受請求,然后再將請求處理轉發,這樣可以提高效率,用過 Nginx 的同學可能就有印象, Nginx 就可以做反向代理
減少 http 請求,合理設置 http 緩存
將多個文件合并成一個文件,將多個請求合并成一個請求
能夠進行緩存的情況下緩存越多越好,越久越好
使用瀏覽器緩存
某些靜態文件長期不變化,可以使用 http 頭中的 cache-control 和 expires設置瀏覽器緩存
壓縮文件
很常見,html、css、js 等文件壓縮后的效果很好,很多框架支持構建 min 文件,即是這么一種辦法
CSS Sprites
即使用該技術將很多零散的圖片合成一張大圖,比較適合圖標之類的使用,可以參照很多游戲制作中的 Sprites 貼圖,效果類似,這種辦法能夠大大減少 http 請求量
LazyLoad Images
懶加載,比如旋轉木馬,可以先加載第一張圖片,如果用戶不繼續翻閱,后面的圖片也沒有加載的必要了
CSS 放在頁面最上部,javascript 放在頁面最下面
這與頁面的渲染順序有關,CSS盡早加載可以使得頁面盡早開始渲染,而js是會阻塞頁面的,js的加載需要等到 DOM 完成形成之后才會開始生效,所以js最好放到最下面
減少 cookie 傳輸
cookie 是會包含在每一次 http 請求中的(如果啟用 cookie),所以太大的 cookie 是會影響到性能的
微觀(代碼層面)上看
虛擬 DOM
什么是虛擬 DOM ? 大體上來說就是使用 js 模擬了 DOM,對虛擬 DOM 的操作會影響到真正的 DOM,這樣的方式提高了性能,很多前端框架都采用了虛擬 DOM,比如 Vue、React 等等
詳細了說有點麻煩,看這里吧:虛擬DOM介紹
慎用eval
這玩意真的慢
js 鏈式作用域需要注意的地方
js 的鏈式作用域:用到一個變量的時候,現在當前作用域下的局部變量查詢,查不到了再往上一級作用域查詢
因為這樣的作用域,當使用到全局變量的時候,最好先將全局變量緩存到本地
變量/常量訪問開銷
常量最快
局部變量次之
鏈式作用域找到的變量再次之
對象和數組的操作涉及到尋址,很慢
字符串拼接
想想都慢
可以使用模板字符串或者盡量避免
css 選擇器優化
選擇器實際上是從右往左選,所以 div#hello 會比 #hello div 效率高很多
參考資料前端影響性能的細節 - CSDN - i秋風伴落葉
百度百科 - CDN
虛擬 DOM 介紹
侵刪
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96206.html
摘要:淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗,提升用戶首屏體驗,提升用戶訪問速度,讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時,主要是通過進行通信。 最近項目慢慢走上正軌,需求趨于平穩,這才想起需要對整站進行性能優化。經過一段時間的學習,結合現在項目的實際性能情況,發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要:淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗,提升用戶首屏體驗,提升用戶訪問速度,讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時,主要是通過進行通信。 最近項目慢慢走上正軌,需求趨于平穩,這才想起需要對整站進行性能優化。經過一段時間的學習,結合現在項目的實際性能情況,發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:感謝王下邀月熊分享的前端每周清單,為方便大家閱讀,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列,并以年月為單位進行分類,具體內容看這里前端每周清單年度總結與盤點。 感謝 王下邀月熊_Chevalier 分享的前端每周清單,為方便大家閱讀,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列,并以年/月為單位進行分類,具...
閱讀 2027·2021-11-19 11:37
閱讀 714·2021-11-11 16:54
閱讀 1161·2021-11-02 14:44
閱讀 3049·2021-09-02 15:40
閱讀 2368·2019-08-30 15:44
閱讀 951·2019-08-29 11:17
閱讀 1059·2019-08-26 14:06
閱讀 1552·2019-08-26 13:47