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