AngularJS $watch 性能殺手

  雙向綁定是AngularJS核心概念之一,它給我們帶來了思維的轉變,不再是以DOM為驅動,而是以Model為核心,View中寫上聲明式標簽(指令或{{}}),AngularJS會在后臺默默同步View到Model,并將Model的變化更新到View。其雖然帶來了極大好處,但是需要有一種有性能隱患的“臟檢查機制”,隨時觀察所有綁定值的變化,如果這些需要觀察的值太多,就會產生性能問題。

一、watchers函數

  AngularJS利用$watch API來監控$scope上Model的變化,AngularJS應用在編譯模版的時候,會收集模版上的聲明式標簽-指令或表達式,并鏈接它們,這個過程指令或表達式會注冊自己的監控函數,即watchers函數。

  有個AngularJS表達式{{}},其會在其所在的$scope中注冊watchers函數(watch是監控mode變化,observe是監控DOM中屬性變化),監控Mode中的count屬性的變化,以便能更新到view。每次點擊Button時候,count計數器加1,觸發digest過程將變化同步到View上。這里是單向更新從Model更新到View上。如果界面上有個帶有ngModel指令的input控件,View上每次輸入都會被及時更新到Model上。

  Model上的數據被更新到了View,背后是臟檢查機制被觸發,它會執行當前$scope及其所有子$scope上注冊的watcher函數,如果變化了就執行相應處理函數,直到Model穩定了,如果這個過程中Model發生了變化,瀏覽器會重新渲染DOM來反應Model變化。

  另外,AngularJS會在編譯階段手機所有指令,表達式{{}}會被解析成一種特殊的指令:addTextInterpolateDirective;在link階段,就會利用$watch的API來注冊watchers函數,所以,表達式也會成為digest循環中watchers的一員。

  不僅Angular表達式,其他的指令如ngShow、ngHide和ngBind,都會通過$watch API添加watchers函數。ngBind需要一個HTML節點,并以attribute屬性標記的方式。

  所以,如果有太多watchers函數,那么在每次digest循環時候,肯定會慢下來,這是臟檢查機制的性能瓶頸,超過2000個watchers,就會感到明顯卡頓,所以,減少$watch,去掉不必要的$watch。在開發時候,盡量減少顯式使用$Scope.$watch,AngularJS很多內置的指令已經滿足大部分的業務需求,如ngChange,ngClick,不需要額外添加$watch。

二、one-time綁定

  

  

  

  如果sessions有300個,那么這個循環會產生300*5+1(ngRepeat本身)個$watch,每次點擊likeSession時候,會檢查name,room等5個屬性是否會變化,而其實這5個屬性一旦綁定是不會變化的,沒必要watch,這個時候可以使用one-time綁定。

  AngularJS的單次綁定在1.3版本引入,單次表達式在第一次digest后,將不再計算(檢測屬性變化),寫法是在表達式前邊加個“:”前綴,如下:

? ? ?

? ?三、滾屏加載

  一種可行的性能解決方案,用于大量數據集顯示的時候,又不想分頁,所以一般放在頁面底部,當滾動屏幕到達底部時候,就嘗試加載一個序列的數據集,追加到底部。可以用開源組件ngInfiniteScroll。

  

轉載于:https://www.cnblogs.com/shawnhu/p/8522072.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/281083.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/281083.shtml
英文地址,請注明出處:http://en.pswp.cn/news/281083.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ipad和iphone切圖_如何在iPhone和iPad上的Messages App中固定對話

ipad和iphone切圖Khamosh PathakKhamosh PathakBetween updates from your bank and group chats, the Messages app on your iPhone or iPad can be a mess. Use the pinned conversations feature introduced in iOS 14 and iPadOS 14 to access your favorite conversations…

這個WPF的企業級MES項目爆火,就是UI爭議大!

工業4.0時代,智能智造MES系統大行其道,然而基于.NET跨平臺的罕見!這里有一套《.NET6WPF企業級MES實戰》教程,基于.NET6跨平臺開發,實現了MES多核心功能,尤其是開發框架完整,非常適合復用。這里分…

單調棧學習筆記

線性結構——單調棧①定義:棧內的元素,按照某種方式排序(單調遞增或單調遞減)如果新入棧的元素破壞了單調性,就彈出棧內元素,直到滿足單調性②優點:可以很方便地求出某個數左邊或者右邊第一個比…

《VMware Virtual SAN權威指南(原書第2版)》一1.5 什么是Virtual SAN

1.5 什么是Virtual SAN Virtual SAN是VMware推出的一種存儲解決方案,它的beta版本在2013年發布,2014年3月正式開放給公眾,并于2016年3月升級到6.2版。VSAN完全集成在vSphere中,它是一種基于對象的存儲系統,是虛擬機存…

js 控制超出字數顯示省略號

//多余顯示省略號 function wordlimit(cname, wordlength) {var cname document.getElementsByClassName(cname);for (var i 0; i < cname.length; i) {      var nowLength cname[i].innerHTML.length;if (nowLength > wordlength) {cname[i].innerHTML cname…

在Outlook 2007中查看您的Google日歷

Google Calendar is a phenomenal web application for managing your calendars, but so many of us are still forced to use Outlook at work. The good thing is you can have the best of both worlds by subscribing to your Google Calendar from Outlook. Google日歷是…

元宇宙、數字孿生和企業NFT

昨天參加了華為云上海開發者日活動&#xff0c;并客串主持了一場"元宇宙技術創新和商業實踐之路"的閉門研討會。研討會上大家討論熱烈&#xff0c;干貨多多&#xff0c;大家提到元宇宙的企業級前景、數字藏品和數字人案例的親身體會。在會上盆盆分享了自己關于企業級…

設置狀態欄和標題欄的樣式

設置狀態欄和標題欄的樣式Android setSystemUiVisibility(visible)方法詳解這個方法可以詳細的設置各種標題欄的狀態欄的樣式.visible的值來決定1.SYSTEM_ UI_ FLAG_ LOW_ PROFILE: 影藏不重要的狀態欄圖標&#xff0c;導航欄中相應的圖標都變成了一個小點。點擊狀態欄或者標題…

CMD命令硬盤/光驅掛載

使用Mountvol命令掛載時&#xff0c;發現GUID不對啊&#xff0c;哪應該到哪找呢&#xff1f; 1.首先可以用Mountvol命令&#xff1a; Mountvol 創建、刪除或列出卷的裝入點。Mountvol 是一種不需要驅動器號而連接卷的方式。 語法&#xff1a; mountvol [Drive:]Path VolumeName…

紐約大街上的免費WiFi,終于鋪起來了

紐約市的城市互聯網項目終于開始動工了。 這個被稱為 LinkNYC 的網絡服務項目&#xff0c;是將現有的 1 萬多個付費電話亭改造成提供 Wi-Fi 網絡的“熱點樁”&#xff0c;為紐約市民提供免費網絡。從 12 月 28 日開始&#xff0c;工人們已經開始安裝首批的 LinkNYC 熱點樁了&am…

解決Maven管理項目update Maven時,jre自動變為1.5

本文為博主原創&#xff0c;未經允許不得轉載&#xff1a; 在搭建一個maven web項目時&#xff0c;項目已經按步驟搭建完好&#xff0c;之后項目上就報了一個錯誤。 在控制臺看到錯誤提示如下&#xff1a;Dynamic Web Module 3.0 requires Java 1.6 or newer。。 已經改過項目中…

reddit_如何將多個子Reddit與多個Reddit合并

redditchrisdorney/Shutterstock.comchrisdorney / Shutterstock.comIf you’re subscribed to a lot of communities on Reddits, some of the content you want to see may get lost in the mix. For easier browsing, you can make your own “multireddit” that combines …

BeetleX之ServerBuilder對象使用

ServerBuilder是BeetleX新版本添加對象&#xff0c;用于進一步簡化TCP服務的構建。ServerBuilder對象提供兩個泛型版本&#xff1a;一個是針對網絡數據流操作&#xff0c;另一個則針對協議解釋器的對象處理操作。網絡數據流當需要解釋簡單的網絡數據流時使用ServerBuilder<A…

Unbuntu 自動重啟MySQL

上個月&#xff0c;通過Unbuntu搭建了WordPress&#xff0c;一切運行良好。 UBUNTU搭建WORDPRESS-MYSQL-APACHE 但是&#xff0c;最近幾天&#xff0c;不知道啥情況&#xff0c;MySQL偶爾會出現Stop&#xff1b;影響了blog的使用&#xff0c;所以&#xff0c;我這里嘗試了自動調…

識別Win10系統兩種方法

最近寫寫一個工具&#xff0c;需要識別當前系統。 首先&#xff0c;找到GetVersionEx函數&#xff0c;能識別win7和win8。但win10需要修改manifested&#xff0c;才能識別&#xff0c;具體參考如下鏈接&#xff1a; http://blog.csdn.net/k1988/article/details/47614529 實…

solidworks小金球_如何在沒有電纜的情況下傳送第77屆年度金球獎

solidworks小金球Gil C / Shutterstock吉爾C / ShutterstockAs the 77th annual Golden Globes Awards approach, you may be wondering how to watch it without paying a cable bill. These streaming services are the best way to watch the awards show tonight if you cu…

2017年,這兩個大數據崗位一定會火!

討論哪個大數據崗位會火之前&#xff0c;我們先來簡單的分析一下大數據領域的行情&#xff0c;這里重點說一下當前的情況。 2016年&#xff0c;互聯網行業遇到了資本寒冬&#xff0c;拋開大公司不說&#xff0c;一些中小型的公司不斷的縮減預算&#xff0c;因為很難融到錢。 但…

PHP7 學習筆記(十一)使用phpstudy快速配置一個虛擬主機

說明&#xff1a;為了windows本地開發php方便&#xff0c;這里推薦使用PHP集成環境phpstudy。 目的&#xff1a;使用域名訪問項目&#xff08;tinywan.test&#xff09; 1、官網&#xff1a;http://www.phpstudy.net 2、虛擬主機的配置 3、站點域名管理 &#xff08;1&#xff…

962-最大寬度坡

前言 Weekly Contest 116 的最大寬度坡&#xff1a; 給定一個整數數組 A&#xff0c;坡是元組 (i, j)&#xff0c;其中 i < j 且 A[i] < A[j]。這樣的坡的寬度為 j - i。 找出 A 中的坡的最大寬度&#xff0c;如果不存在&#xff0c;返回 0 。 示例1&#xff1a; 輸入&am…

C# 文件操作筆記

文件夾 1.存在&#xff1a; if(Directory.Exists(dirPath&#xff09; { } 2.獲取文件夾內文件信息&#xff1a; DirectoryInfo di new DirectoryInfo(dirPath); foreach (FileInfo fi in di.GetFiles()) { …