摘要:動態添加屬性會造成隱藏類派生同時無法使用優化針對熱點代碼會使用優化編譯器目前默認是比如上述示例循環中會進行參數預測標記為整形后的代碼。
v8層面
var person = { multiply:function (a,b) { return a*b; }, name:"gcy" } for(let i=0;i<1000;i++){ person.multiply(i,i); }
說明 定義對象的時候,最好一開始就初始化好對象的屬性,不要動態的添加。
在java或c++靜態語言中,類的信息是確定的,所以每個對象包含哪些成員和成員在對象中偏移量在編譯階段確定,基地址和偏移地址就可以快速的訪問對象內部信息。
js中對象屬性可以動態添加或刪除,為了實現按照索引的方式快速訪問成員,v8內部產生了一種數據結構即隱藏類(基于運行中的對象分類)。動態添加屬性會造成隱藏類派生,同時無法使用v8優化(針對熱點代碼,v8會使用優化編譯器,目前默認是 CrankShaft,比如上述示例for循環中會進行參數預測,標記為整形)后的代碼。另外推薦在編寫代碼的時候進行不要讓程序進行類型推導,方案有flow和typeScript,flow我用過,侵入性低、容易上手,推薦使用,這樣做的目的一方面在大項目協作過程中可以使代碼具有良好的維護性,其次還可以提高v8執行效率,避免優化回退(重新執行函數->ast->機器碼過程)。
c++層面void Method(const FunctionCallbackInfo& args) { Isolate* isolate = args.GetIsolate(); //isolate V8 runtime args.GetReturnValue().Set(String::NewFromUtf8(isolate, "hw gcy")); } void init(Local
c++拓展node 模塊(針對底層拓展和效率要求極高場景)
為什么使用c++編寫node?
http://www.tuicool.com/articl...
Prepack (js執行效率優化)
webpack2 (tree-shaking) 體積優化
內存層面var vm=new WeakMap(); var b=new Object(); vm.set(b,{"name":"gcy"}); b=null; vm.get(b);
使用weakMap,在key對應的對象,可能會消失的情況下,會減少內存泄漏發生的概率,合理的利用和使用內存的方式之一。
參考鏈接 weakmap
最小化dom訪問次數,注意重繪和重排,盡可能在JavaScript端處理,"離線操作DOM tree",使用緩存,減少訪問布局信息次數
案例一不要頻繁獲取布局信息,因為其會導致渲染隊列刷新,例如常用的offsetTop屬性,offsetWidth屬性等等。
案例二批量修改dom時,使元素脫離文檔流(!important),應用多重改變邏輯,然后再把元素放回文檔中
脫離文檔流的三種方式
隱藏元素,應用修改,重新顯示
fragment方式額外創建DOM tree
原始element copy,然后修改后,在 replace
動畫元素使用絕對定位的方式
virtual dom方式,操作vnode,diff后在實際元素上應用最終邏輯
使用事件委托減少事件處理器數量(本質上是利用冒泡機制,比較簡單,不在舉例)
js層面 案例一function ProcessArray(items,process,callback) { let todo=items.concat(); setTimeout(function () { process(todo.shift()); //如果還有待處理元素,創建另外一個定時器 if(todo.length>0){ setTimeout(arguments.callee,20); }else { callback(items); } },20) }
說明 上面優化的目的是為了避免browser的鎖定,還可以使用web work的方式
var worker=new Worker("process.js"); worker.onmessage=function (event) { //logic } worker.postMessage(items) // process.js self.onmessage=function (event) { var ans=process(event.data); self.postMessage(ans); }案例二
var num1=5; var num2=6; eval("num1+num2"); new Function("arg1","arg2","return arg1+arg2"); setTimeout("sum1=num1+num2",100)
說明 避免雙重求值
案例三function fact1(n) { if(n==0)return 1; return n*fact1(n-1); } ----------------------------------- fact2(n,acc=1){ if(n==0)return acc; return fact2(n-1,acc*n); }
說明 尾遞歸的優化的目的是為了防止棧溢出
關于js方面的技巧蠻多的,比如延遲加載,位操作,throttle等等,不在一一列舉。
總結js優化這篇文章小部分是工作的總結,大部分是看書(高性能js和NODE進階之路等)后的理解和總結,其實點蠻多的,以后再補充吧。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82968.html
摘要:圖表中的比例并不代表真實情況下的確切比例情況。解析當到達瀏覽器時,源代碼就被解析成了抽象語法樹。解析過后抽象語法樹就變成了中間代碼叫做字節碼,提供給引擎編譯。目前為止,不支持垃圾回收。這就是為什么在大多數情況下,同一個任務比表現更好的原因。 作者:Lin Clark 編譯:胡子大哈 翻譯原文:http://huziketang.com/blog/posts/detail?postId...
摘要:類將源代碼解釋并構建成抽象語法樹,使用類來創建它們,并使用類來分配內存。類抽象語法樹的訪問者類,主要用來遍歷抽象語法樹。在該函數中,先使用類來生成抽象語法樹再使用類來生成本地代碼。 通過上一篇文章,我們知道了JavaScript引擎是執行JavaScript代碼的程序或解釋器,了解了JavaScript引擎的基本工作原理。我們經常聽說的JavaScript引擎就是V8引擎,這篇文章我們...
摘要:的目標是對高級程序中間表示的適當低級抽象,即代碼旨在由編譯器生成而不是由人來寫。表示把源代碼變成解釋器可以運行的代碼所花的時間表示基線編譯器和優化編 WebAssembly 那些事兒 什么是 WebAssembly? WebAssembly 是除 JavaScript 以外,另一種可以在網頁中運行的編程語言,并且相比之下在某些功能和性能問題上更具優勢,過去我們想在瀏覽器中運行代碼來對網...
摘要:本文將會深入分析的引擎的內部實現。該引擎使用在谷歌瀏覽器內部。同其他現代引擎如或所做的一樣,通過實現即時編譯器在執行時將代碼編譯成機器代碼。這可使正常執行期間只發生相當短的暫停。 原文 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 幾周前我們開始了一個系列博文旨在深入...
摘要:本文是圖說系列文章的第五篇。這樣的話,使用的開發者也不需要做任何適配,但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行,稱為垃圾回收。 本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章,建議您從第一篇入手。 在上一篇文章中,我們說到了使用 WebAssembly 和 JavaScript...
摘要:第二篇文章將深入谷歌的引擎的內部。引擎可以實現為標準解釋器,或者以某種形式將編譯為字節碼的即時編譯器。這個引擎是在谷歌中使用的,但是,與其他引擎不同的是也用于流行的。一種更復雜的優化編譯器,生成高度優化的代碼。不是唯一能夠做到的引擎。 本系列的 第一篇文章 主要介紹引擎、運行時和調用堆棧。第二篇文章將深入谷歌 V8 的JavaScript引擎的內部。 想閱讀更多優質文章請猛戳GitHu...
閱讀 2752·2021-11-24 10:23
閱讀 1159·2021-11-17 09:33
閱讀 2507·2021-09-28 09:41
閱讀 1418·2021-09-22 15:55
閱讀 3644·2019-08-29 16:32
閱讀 1911·2019-08-29 16:25
閱讀 1060·2019-08-29 11:06
閱讀 3427·2019-08-29 10:55